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 等指令可能会便捷性比较小。
Jquery使用ajax以及angularjs 动态模板加载并进行渲染的更多相关文章
- jquery实现表单验证与页面加载之后执行渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery+php+Ajax文章列表点击加载更多功能
jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...
- jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...
- Angularjs 异步模块加载项目模板
ng-lazy-module-seed(Angularjs 异步模块加载项目模板) 相信做过SPA项目的朋友都遇到过这个问题:页面初始化时需要加载文件太大或太多了,许多文件加载后很可能不会运行到,这是 ...
- angular模板加载 ----ng-template
Angularjs作为mvc(或者说mvvm)框架,同样具备模板这一基本概念. NG加载模板的顺序为 内存加载---AJAX加载. 如果排版乱掉,请查阅https://www.zybuluo.com/ ...
- Java_动态重新加载Class总结
在此记载Java动态重新加载Class的点点滴滴,实现之前也在网上看了很多文章,但发现不是很清晰,后来发现总结,看源码实现还是最靠谱. 直接上代码: package com.lkb.autoCode. ...
- Java_动态重新加载Class机制
Java动态重新加载Class 项目中使用到了动态重新加载Class的机制,作用是让一些代码上线之前可以在线上环境测试一下,当然,这是非常不好的测试机制,我刚来的时候也为这种机制感到惊讶—怎么可以在线 ...
- Android系统下的动态Dex加载
1 问题在Android系统中,一个App的所有代码都在一个Dex文件里面.Dex是一个类似Jar的存储了多有Java编译字节码的归档文件.因为Android系统使用Dalvik虚拟机,所以需要把使用 ...
- Android系统下的动态Dex加载与app速度优化
1 问题 在Android系统中,一个App的所有代码都在一个Dex文件里面.Dex是一个类似Jar的存储了多有Java编译字节码的归档文件.因为Android系统使用Dalvik虚拟机,所以需要把 ...
随机推荐
- Xcode 断点调试，取消直接进入到汇编语言界面处理
Xcode 上部的菜单拦: Product -> Debug Wokflow 下的菜单中,将“ Always Show Disassembly ”的勾去掉.(勾上的意思是用汇编语言进行Debu ...
- 在hdfs上存取xml文件的实现代码
要读取的文件为:/user/hdfs/stdin.xml <?xml version="1.0" encoding="UTF-8"?> <re ...
- 动态数组 - ArrayList
前言 如果数组的大小要随时间变化,那么数组操作起来就比较麻烦. 在C++中,这种情况要用到动态向量Vector. 而Java中,提供了一种叫做ArrayList的泛型数组结构类型,提供相似的作用. 其 ...
- Javascript模块化编程（一）：模块的写法【转】
作者: 阮一峰 日期: 2012年10月26日 随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分 ...
- Html与CSS布局技巧
一.单列布局 1.水平居中:(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parend元素) 1-1:使用inline-block和text-align实现: .par ...
- tiny4412SD启动盘的制作--1
一.使用SD-flasher工具烧写superboot到SD卡. 1.SD-Flasher.exe 会对 SD 卡进行分区,第一个分区为 130M 用于存放 Superboot4412, 剩下的空间格 ...
- 水灾（sliker.cpp/c/pas） 1000MS 64MB
大雨应经下了几天雨,却还是没有停的样子.土豪CCY刚从外地赚完1e元回来,知道不久除了自己别墅,其他的地方都将会被洪水淹没. CCY所在的城市可以用一个N*M(N,M<=50)的地图表示,地图上 ...
- 服务器启用 FTP
通常使用 vsftpd 作为FTP服务器. 安装 vsftpd: 1.以管理员(root)身份执行以下命令 yum install vsftpd 2.设置开机启动 vsftpd ftp 服务 chkc ...
- Java设计模式之简单工厂设计模式
简单工厂将业务逻辑部分和界面逻辑部分分离开来,降低了界面逻辑和业务逻辑的耦合度,符合面向对象迪米特法则.下面以一个加法减法运算器为例,各位读者可以自行按照这种设计方式设计出一个小小的运算器. 1.业务 ...
- 常用的文件和目录操作命令【转vbird】
cdpwdmkdirrmdirlscprmmvcattacnlmorelessheadtailtouch cd (变换目录) 我们知道vbird这个使用者的家目录是/home/vbird/,而root ...