AngularJS 启动有两种方式

1、绑定初始化，自动加载

通过绑定来进行angular的初始化，会把js代码侵入到html中。

ng-app是angular的一个指令，代表一个angular应用（也叫模块）。使用ng-app或ng-app=""来标记一个DOM结点，让框架会自动加载。也就是说，ng-app是可以带属性值的。

<body ng-app="myApp">

    <div ng-controller="myCtrl">

        {{ hello }}

    </div>

    <script type="text/javascript">

        var myModule = angular.module("myApp",[]);

        myModule.controller("myCtrl",function($scope){

            $scope.hello = "hello,angular!";

        });

    </script>

</body>

2、手动初始化

如果想对对初始化有更多的控制权，可以采用自定义手动引导方法初始化代替angular的自动初始化。比如你需要在angular编译模板之前做一些事情，比如改变模板某些内容。

Angular中也提供了手动绑定的api——bootstrap，它的使用方式如下：

angular.bootstrap(element, [modules], [config]);

其中第一个参数element:是绑定ng-app的dom元素；
modules：绑定的模块名字
config：附加的配置

值得注意的是：

  • angular.bootstrap只会绑定第一次加载的对象。
  • 后面重复的绑定或者其他对象的绑定，都会在控制台输出错误提示。
<html>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>

<body id="body">

    <div ng-controller="myCtrl">

        {{ hello }}

    </div>

    <script type="text/javascript">

        var app = angular.module("bootstrapTest",[]);

        app.controller("myCtrl",function($scope){

            $scope.hello = "hello,angular from bootstrap";

        });

        // angular.bootstrap(document.getElementById("body"),['bootstrapTest']);

        angular.bootstrap(document,['bootstrapTest']);

    </script>

</body>

</html>
<html>

  <head>

    <script src="angular.js"></script>

    <script>

    // 创建moudle1

    var rootMoudle = angular.module('moudle1', []);

    rootMoudle.controller("controller1",function($scope){$scope.name="aty"});

    // 创建moudle2

    var m2 = angular.module('moudle2', []);

    m2.controller("controller2",function($scope){$scope.name="aty"});

    // 页面加载完成后,再加载模块

    angular.element(document).ready(function() {

      angular.bootstrap(document.getElementById("div1"),["moudle1"]);

      angular.bootstrap(document.getElementById("div2"),["moudle2"]);

    });

  </script>

  <head>

  <body>

    <div id="div1"  ng-controller="controller1">div1:{{name}}</div>

    <div id="div2"  ng-controller="controller2">div2:{{name}}</div>

  </body>

</html>

转自：http://www.tuicool.com/articles/aiayI3    http://www.cnblogs.com/xing901022/p/4931543.html

angularJS 初始化的更多相关文章

  1. AngularJS 初始化加载流程

    一.AngularJS 初始化加载流程 1.浏览器载入HTML,然后把它解析成DOM.2.浏览器载入angular.js脚本.3.AngularJS等到DOMContentLoaded事件触发.4.A ...

  2. AngularJS开发指南2：AngularJS初始化过程

    自动初始化 请将ng-app指令放到你应用的标签节点中, 如果你想要AngularJS自动执行整个<html>程序就把它放在 <html> 标签中.比如:<html ng ...

  3. AngularJS初始化Select选择框

    一.引入 之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能.由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就 ...

  4. AngularJS初始化静态模板

    AngularJS可以通过ng-app来自动初始化模块,也可以通过angular.bootstrap(document, [module])手动启动应用,不管用哪种方法,应用启动后,动态往dom树里面 ...

  5. Angularjs 初始化框架

    bindJQuery(); publishExternalAPI(angular); jqLite(document).ready(function() { angularInit(document, ...

  6. angularjs 初始化方法执行两次以及url定义错误导致传值错误问题

    1.初始化方法执行两次以上的问题定义一个 route.如下所示:.state('main.channelQryDetail', { url:'/channelDetail/:channelNo/:pa ...

  7. AngularJS初始化闪烁

    可以使用:ng-if和ng-cloak解决,原因见:http://www.cnblogs.com/whitewolf/p/3495822.html

  8. AngularJS初始化普通数组和对象数组

    普通数组: ng-init="persons=['john','jack']" 对象数组: ng-init="persons=[{name:'john',age:20}, ...

  9. angularjs初始化时不显示模板内容, 不显示html, 不显示template

    template的内容可能在需要的数据准备好之前就显示出来了, ng-cloak可以解决这个问题 ng-cloak <div id="template1" ng-cloak& ...

随机推荐

  1. JZOJ 5459 购物

    Description X 城的商场中,有着琳琅满目的各种商品.一日,小X 带着小Y 前来购物,小Y 一共看中了n件商品,每一件商品价格为Pi.小X 现在手中共有m个单位的现金,以及k 张优惠券.小X ...

  2. Faster RCNN算法训练代码解析（1）

    这周看完faster-rcnn后,应该对其源码进行一个解析,以便后面的使用. 那首先直接先主函数出发py-faster-rcnn/tools/train_faster_rcnn_alt_opt.py ...

  3. 关于rss的内容（转载）

    转载自: https://blog.csdn.net/zhao1949/article/details/52806123 (本文对读者有帮助的话请移步支持原作者) 内容记录: 在C++技术网开通了RS ...

  4. 使用openpyxl模块时出现错误： zipfile.BadZipFile: File is not a zip file

    通过Pycharm工具新建一个xlsx文件. 再通过openpyxl模块读取该表时,报错: zipfile.BadZipFile: File is not a zip file 如下所示: 解决办法: ...

  5. locationManager 回调方法不调用问题？

    当locationManager都设置好了后开始定位服务后回调方法didUpdateToLocation不调用 [_locationManager setDelegate:self]; [_locat ...

  6. 【数论】如何证明gcd/exgcd

    我恨数论 因为打这篇的时候以为a|b是a是b的倍数,但是懒得改了,索性定义 a|b 为 a是b的倍数 咳咳,那么进入正题,如何证明gcd,也就是 gcd(a,b) = gcd(b,a%b)? 首先,设 ...

  7. 使用 Apachetop 实时监测web服务器运行状况

    转自 http://42.96.169.71/blog/2013/01/26/shi-yong-apachetop-shi-shi-jian-ce-webfu-wu-qi-yun-xing-zhuan ...

  8. More Effective C++: 01基础议题

    01:仔细区别 pointers 和 references 1:没有所谓的null reference,但是可以将 pointer 设为null.由于 reference 一定得代表某个对象,C++ ...

  9. 开通了第一个博客，mark一下！

    今日上网查询了不同的博客,包括csdn.掘金等,最终决定选择博客园.打算待前端学完后,自己建立一个博客,这段时间内先用博客园记录学习过程.经常总结.更新,相信坚持学习一定可以找到好工作!

  10. Cython保护Python代码

    注:.pyc也有一定的保护性,容易被反编译出源码... 项目发布时,为防止源码泄露,需要对源码进行一定的保护机制,本文使用Cython将.py文件转为.so进行保护.这一方法,虽仍能被反编译,但难度会 ...