Jquery使用ajax以及angularjs 动态模板加载并进行渲染
1. 源码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="director-master/build/director.js"></script> <script type="text/javascript" src="angular/angular.js"></script> <script> /// 定义模块 var login=angular.module("mylogin",[]); login.factory("dalongapp",function(){ return { appname:"dalong demo", appurl:"http://www.baidu.com" }; }); /// 此处注入模块 var myapp=angular.module("YYIMApp",["mylogin"]); myapp.run(function($rootScope,$templateCache){ alert("app is running") $rootScope.dalongappdemo={ dalonginfo:"dalong demo", daongage:33 }; $templateCache.put("applogin.html",'<div><h1>cache file info:</h1>{{username.appurl}}</div>') }); /// 此处暴露共享的方法 myapp.controller("IMctrl",function($scope,dalongapp,$rootScope,$compile,$templateCache){ $scope.username={ appurl:"www.baidu.com" }; $scope.onclickdemo=function(){ console.log(dalongapp); console.log($templateCache); var cachetemp=$templateCache.get("applogin.html"); console.log(cachetemp); alert($scope.username.appurl+dalongapp.appname+$rootScope.dalongappdemo.daongage); }; $rootScope.compileservice=function(ele,scope){ return $compile(ele)(scope); } $scope.getcache=function(key){ return $templateCache.get(key); } $scope.cachelogindemo=function(){ } $rootScope.safeApply=function(scope){ scope.$apply(); } }); </script> <script> /// 此处手工启动应用 angular.element("#dalongdemo").ready(function(){ angular.bootstrap(document.getElementById("dalongdemo"),["YYIMApp"]); }) </script> <script> function mess() { var content=$("#content"); var content2=$("#content2"); content.empty(); content2.empty(); first(); second(); } function first() { $.get("myapp.htm",function(data){ var html=data; var content=$("#content"); var content2=$("#content2"); var el=$(data); console.info("appappend el"); //console.log(el); //console.log(html); //content.append(html); console.log(angular); var appdalong=angular.element("#content"); console.log(appdalong) scope= angular.element(document.getElementById("dalongdemo")).scope(); console.info("scope"); scope2= angular.element(document.getElementById("dalongdemo2")).scope(); // console.log(scope); // console.log(scope2); /// 动态编译模板并进行数据加载 var appinfo= scope.$parent.compileservice(el,scope) content.append(appinfo); scope.$parent.safeApply(scope); // console.log(appinfo); // console.log(angular.element(document.getElementById("dalongdemo"))) // //angular.element("#YYIMApp").ready(function(){ // // angular.bootstrap(document.getElementById("YYIMApp"),["YYIMApp"]); // // }) }); } function second() { $.get("myapp1.htm",function(data){ var html=data; var content=$("#content"); var content2=$("#content2"); var cachetemp=scope.getcache("applogin.html"); console.info("app demo"); console.log(cachetemp); console.log(scope); var compile=scope.compileservice($(cachetemp),scope.$new()); console.log(compile); content2.append(compile); scope.$parent.safeApply(scope); // angular.element("#YYIMApp2").ready(function(){ // // angular.bootstrap(document.getElementById("YYIMApp2"),["YYIMApp"]); // // }) }); } function myappdemo() { var content=$("#content"); var content2=$("#content2"); content.empty(); content2.empty(); content.append('<p>dalong demo</p>') } var routes = { '/message': mess, '/appdemo':myappdemo }; var router = Router(routes); router.init(); </script> </head> <body> <h1>dalong demo</h1> <a href="#message">message</a> <br> <a href="#appdemo">myappdemo</a> <h1>first</h1> <div id="dalongdemo" ng-controller="IMctrl"> <h1>{{dalongappdemo.dalonginfo}}</h1> <div id="content"> </div> <h1>second</h1> <div id="content2"> </div> </div> </body> </html>
2. ajax 请求的模板片段文件：
<div id="YYIMApp"> <div ng-controller="IMctrl"> <h1 ng-bind="username.appurl">{{username.appurl}}</h1> <button ng-click="onclickdemo()">clickdemo</button> </div> </div>
原理解析：
主要是通过JavaScript 与angularjs 互调用并使用$compile 服务进行数据的动态渲染并添加DOM元素
价值：
可以方便的进行第三方框架与angularjs 的集成，如果使用ng-app 等指令可能会便捷性比较小。
