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 动态模板加载并进行渲染的更多相关文章

  1. jquery实现表单验证与页面加载之后执行渲染

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jQuery+php+Ajax文章列表点击加载更多功能

    jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...

  3. jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...

  4. Angularjs 异步模块加载项目模板

    ng-lazy-module-seed(Angularjs 异步模块加载项目模板) 相信做过SPA项目的朋友都遇到过这个问题:页面初始化时需要加载文件太大或太多了,许多文件加载后很可能不会运行到,这是 ...

  5. angular模板加载 ----ng-template

    Angularjs作为mvc(或者说mvvm)框架,同样具备模板这一基本概念. NG加载模板的顺序为 内存加载---AJAX加载. 如果排版乱掉,请查阅https://www.zybuluo.com/ ...

  6. Java_动态重新加载Class总结

    在此记载Java动态重新加载Class的点点滴滴,实现之前也在网上看了很多文章,但发现不是很清晰,后来发现总结,看源码实现还是最靠谱. 直接上代码: package com.lkb.autoCode. ...

  7. Java_动态重新加载Class机制

    Java动态重新加载Class 项目中使用到了动态重新加载Class的机制,作用是让一些代码上线之前可以在线上环境测试一下,当然,这是非常不好的测试机制,我刚来的时候也为这种机制感到惊讶—怎么可以在线 ...

  8. Android系统下的动态Dex加载

    1 问题在Android系统中,一个App的所有代码都在一个Dex文件里面.Dex是一个类似Jar的存储了多有Java编译字节码的归档文件.因为Android系统使用Dalvik虚拟机,所以需要把使用 ...

  9. Android系统下的动态Dex加载与app速度优化

    1 问题 在Android系统中,一个App的所有代码都在一个Dex文件里面.Dex是一个类似Jar的存储了多有Java编译字节码的归档文件.因为Android系统使用Dalvik虚拟机,所以需要把 ...

随机推荐

  1. 17、SQL基础整理（事务）

    事务 事务==流程控制 确保流程只能成功或者失败,若出现错误会自动回到原点 例: begin tran insert into student values('111','王五','男','1999- ...

  2. python学习札记(1)

    首先给大家推荐一个很好的python入门网站,感觉比<python基础>之类的书更容易懂,廖雪峰小站,希望有学习资源同学们也能多多交流.下面是今天所学: 下面总结一些非常有特色的函数及其应 ...

  3. 【转】同形的JavaScript：Web应用的未来

    原文转自:http://blog.jobbole.com/51786/ 在Airbnb,这几年我们已经学习了很多了关于构建富应用的经验,从2011年通过做我们的网站手机版,我们开始研究single-p ...

  4. 详解for循环（各种用法）

    常见的for循环一般是一下代码这种结构: for (int i = 0; i < 100; i++){    Console.WriteLine(i);} 或者递减的:              ...

  5. cookie 和 session 机制

    cookie机制 Cookie实际上是Web服务端与客户端(典型的是浏览器)交互时彼此传递的一部分内容,内容可以是任意的,但要在允许的长度范围之内.客户端会将它保存在本地机器上(如IE便会保存在本地的 ...

  6. eclipse中文乱码

    问题描述: 在导入log4j.properties文件时里面出现中文乱码,如下: ### 设置### log4j.rootLogger = debug,stdout,D,E ### è¾“å‡ ...

  7. UVa 11729 - Commando War

    [题目翻译]: 题目分析:因为任务是可以并行的执行,所以直觉上是花费时间长的任务优先去部署.但是这到题目还给你交待任务的时间,所以容易让人想多了. 不管有没有交待任务的时间,对于任务x和y,只可能有两 ...

  8. ZOJ 1016 Parencodings

    原题链接 题目大意:有两串数字P和W.数组P中,数字P[i]表示第i个右括号之前的左括号个数.数组W中,数字W[i]表示在第i个右括号和与它匹配的左括号之间的右括号的个数(包括本身).给出一个数组P, ...

  9. URAL 1320 Graph Decomposition（并查集）

    1320. Graph Decomposition Time limit: 0.5 secondMemory limit: 64 MB There is a simple graph with an ...

  10. phpmyadmin使用中碰到的一些问题

    在导入数据库文件的时候出现 #1062 – Duplicate entry '1′ for key ‘PRIMARY' 说明在上一次的导入中没有完全导入,但是主键是自增的,所以要输入主键才能继续,解决 ...