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. 解决安装编译工具gcc后无法连接mysql

    在安装编译工具gcc后: yum -y install make gcc g++ gcc-c++ libtool autoconf automake imake mysql-devel libxml2 ...

  2. poj 2406 Power Strings（KMP入门，next函数理解）

    Power Strings Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 37685   Accepted: 15590 D ...

  3. LintCode刷题笔记-- Maximal Square

    标签:动态规划 题目描述: Given a 2D binary matrix filled with 0's and 1's, find the largest square containing a ...

  4. 【转】基于OLSR路由协议实现Ad-Hoc组网

    一.软件包的安装 1. olsrd软件包的安装 libpthread_0.9.33.2-1_ar71xx.ipk olsrd_0.6.6.2-4_ar71xx.ipk 2. luci的安装 olsrd ...

  5. （转）jQuery中append(),prepend()与after(),before()的区别

    在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...

  6. 工信部<<大数据产业发展规划>>

    大数据产业发展规划 (2016-2020年) 发布时间:2017-01-17  来源:规划司 数据是国家基础性战略资源,是21世纪的“钻石矿”.党中央.国务院高度重视大数据在经济社会发展中的作用,党的 ...

  7. golang数据运算符

     

  8. 【JZOJ4919】【NOIP2017提高组模拟12.10】神炎皇

    题目描述 神炎皇乌利亚很喜欢数对,他想找到神奇的数对. 对于一个整数对(a,b),若满足a+b<=n且a+b是ab的因子,则成为神奇的数对.请问这样的数对共有多少呢? 数据范围 对于100%的数 ...

  9. 数组map用法总结

    数组中,map方法,指的是是数组的映射. map基本语法如下:function回调支持3个参数,第1个是遍历的数组内容:第2个是对应的数组索引,第3个是数组本身. map方法的作用不难理解,“映射”嘛 ...

  10. AtCoder Regular Contest 090 D - People on a Line

    D - People on a Line Problem Statement There are N people standing on the x-axis. Let the coordinate ...