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. day36 06-Hibernate抓取策略：set集合上的抓取策略

    你在做查询的时候它可以帮你关联出它的一些相应的关联对象.那么它关联这个对象的时候是在什么时候发送的这些语句以及它是如何把这些数据拿出来的? 知道延迟检索是怎么回事了,而且它也能够产生这个代理对象.当你 ...

  2. HDU5583 Kingdom of Black and White

    Kingdom of Black and White Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Ja ...

  3. input只能输入数字和小数点，并且只能保留小数点后两位 - CSDN博客

    1.给文本框添加一个onkeyup=’clearNoNum(this)’点击事件 2.建立clearNoNum方法 function clearNoNum(obj) { obj.value = obj ...

  4. sublime3安装javascript控制台环境 方法1

    Sublime Text 3    http://www.sublimetext.com/3 node.js        http://nodejs.cn/download 1.安装完成后. 2.打 ...

  5. HDU 4006优先队列

    //按照降序排列,而且队列中只保存k个元素 #include<stdio.h> #include<queue> using namespace std; int main(){ ...

  6. 【JZOJ4461】【GDOI2016模拟4.21】灯塔 分治

    题面 GDOI是一个地处丘陵的小国,为了边防建设,国王希望在国界线上的某一座山峰上建立一座灯塔,照亮整个边界.而灯塔建设的调研工作,就交给了你. GDOI的国境线上有N座连续的山峰,其中第i座的高度是 ...

  7. [J2EE规范]RMI简单实例 标签： j2ee实例 2017-06-29 18:05 217人阅读 评论(13)

    RMI是什么? RMI是指Java Remote Method Invocation,远程方法调用,RMI是Java的一组拥护开发分布式应用程序的API.RMI使用Java语言接口定义了远程对象,它集 ...

  8. golang之常量

    1.  常量可以是全局常量,也可以是函数内部的局部常量.常量的值不可修改,常量表达式的值在编译期计算,而不是在运行期.存储在常量中的数据类型只可以是布尔型.数字型(整数型.浮点型和复数)和字符串型.当 ...

  9. Sublime中输入中文的解决方案

    之前系统用的输入法是 ibus,在sublime中无法使用, 可能是不支持该输入法. 然后改用 fcitx,切换输入法之后要重启系统才可以生效, 启动之后就可以使用中文了.

  10. GeoServer手动发布本地Shapefile地图

    首先,本文实现的结果图给大家展现一下: 放大的样子: 颜色是通过属性中某个字段值来分级的,可以自定义. 上面功能是用ArcGIS切片好数据,在Geoserver 中发布,并用google地图作为底图展 ...