您的位置：首页 > Web前端 > AngularJS

Jquery使用ajax以及angularjs 动态模板加载并进行渲染

2016-03-08 19:47 786 查看
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 等指令可能会便捷性比较小。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航