我们都知道AngularJS默认会执行app.js来启动整个angular项目，但你知道angular具体执行过程吗？

一、自动引导启动框架

例如我们有如下代码，我们想要完成一个指令功能：

<html ng-app>

    <head>

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

    </head>

    <body>

         <div my-directive></div>

    </body>

</html>

下面分析一下Angular具体启动引导的过程：

第一步：加载angular.min.js文件，通过全局变量angular提供API接口；

第二步：等待直到DOM树加载完毕；

第三步：找到ng-app，自动进入启动引导阶段；

第四步：找到 my-directive，根据指令的定义展开。

另外，何时使用ng-app=“myapp”，何时直接使用ng-app？

如果使用ng-app，你的controller只能这么写：

function MyController($scope){

       //do something...

}

而你使用ng-app="myapp"你可以这么写：

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

myapp.controller('MyControler',function($scope){

      //do something...

});

二、手动引导启动框架

在大多数情况下，我们都使用ng-app指令来进行自动引导启动，但是如果一个HTML文件中 有多个ng-app，AngularJS只会自动引导启动它找到的第一个ng-app应用，这是需要手工引导 的一个应用场景。

我们可以利用 angular.bootstrap() 方法进行手动引导:

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

bootstrap方法有三个参数：

element ： 一个DOM元素，以这个元素为Angular应用的根，等同自动引导时ng-app所在 的元素。这个参数是必须的。比如：document、document.body等。modules ： 引导时需要载入的模块数组。比如：[]、["myapp"]等。由于我们的HTML中引用 了myapp模块中定义的my-directive指令，所以，我们需要指定载入myapp模块。config ：引导配置项，可选。我们先忽略。 最终，我们使用如下的形式进行手动引导：

angular.bootstrap(document,["myapp"]);

比如如下的例子：

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

<script>

    var myapp1mod = angular.module('Lilei',[]);

    myapp1mod.controller('Textcontroller',function($scope){

        var content= {};

        content.message = "Hello Lilei";

        $scope.content= content;

    });

    var myapp2mod = angular.module('Hanmeimei',[]);

    myapp2mod.controller('Textcontroller',function($scope){

        var content= {};

        content.message = "Hello Hanmeimei";

        $scope.content= content;

    });

    angular.bootstrap(angular.element("#Lilei"),["Lilei"]);

    angular.bootstrap(angular.element("#Hanmeimei"),["Hanmeimei"]);

</script>

浅谈AngularJS启动引导过程的更多相关文章

  1. AngularJS的启动引导过程

    原文:http://www.angularjs.cn/A137?utm_source=ourjs.com 目录: 引导之前 自动引导启动框架 手工引导启动框架 引导第1步:创建注入器 引导第2步:创建 ...

  2. AngularJS 启动执行过程

    一.浏览器下载HTML/CSS/JavaScript等 当你转到一个页面地址后,浏览器先回下载这个HTML,同时,会开启一些辅助线程下载所关联的script标签和link标签里引用的文件. 二.浏览器 ...

  3. Linux学习笔记之Linux启动引导过程

    早期时,启动一台计算机意味着要给计算机喂一条包含引导程序的纸带,或者手工使用前端面板地址/数据/控制开关来加载引导程序.尽管目前的计算机已经装备了很多工具来简化引导过程,但是这一切并没有对整个过程进行 ...

  4. （六）Angularjs - 启动引导

    自动引导 AngularJs 通过 ng-app 指令进行自动引导 手工引导启动框架 如果一个HTML文件中 有多个ng-app,AngularJS只会自动引导启动它找到的第一个ng-app应用,这是 ...

  5. 浅谈AngularJS中的指令和指令间的相互通信

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  6. 浅谈angularJS指令的属性

    restrict – 这个属性用来指定指令在HTML中如何使用(指令的四种表示方式).我们使用 ‘AE’,这个指令可以被当作新的HTML元素或者属性来使用.如果要允许指令被当作class来使用,我们将 ...

  7. 浅谈AngularJS中的$parse和$eval

    AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑,今天我们就来说说AngularJS中的$parse和$eval. 总的来说,$parse和$eval都是作用于Ang ...

  8. 浅谈 JavaScript new 执行过程及function原理

    前言 最近在学习JavaScript语言精粹,感觉写得相当不错.所以这里也算是总结一下.一个方法使用new的方式创建到底是怎样的过程,一个function的声明内部又是怎样执行的呢 另外学的过程中,不 ...

  9. 浅谈AngularJS的$parse服务

    $parse 作用:将一个AngularJS表达式转换成一个函数 Usage$parse(expression) arguments expression:需要被编译的AngularJS语句 retu ...

随机推荐

  1. WebBrowser中取对应的图片资源

    在客户端中使用webbrower控件,控件中已显示网页,对应的图片资源应已下载完,下面从缓存中找到图片资源,两种方法都可 1.GetUrlCacheEntryInfo http://msdn.micr ...

  2. YUI的类型判断函数

    1.首先定义一个关于类型的对象,及相关变量 类型判断对象 ar L = Y.Lang || (Y.Lang = {}), STRING_PROTO = String.prototype, TOSTRI ...

  3. JQuery easyui （1） Draggable（拖动）组件

    很不习惯这种强迫式的学习,但谁叫我不是老师了,所以还是决定坚持练习,顺带为博客加点东西.虽然我还是很反感短时间内惯性的去熟悉一个工具. easyui做为一个封装了JQusey的UI插件,其实还是蛮好用 ...

  4. IE6 双倍距BUG

    IE6双倍距BUG的形成: 1.快元素 2.元素浮动 3.margin左右 解决方案:_display:inline;

  5. H5+Boostrap的音乐播放器

    H5+Boostrap做简单的音乐播放器 前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做 ...

  6. ansilbe 入门001、ansible的介绍

    概述: ansible 作为一个配置管理工具.首先我们要“告诉”它管理的是那几台机器啊:而这个信息就在要ansible 的配置文件中体现了.默认情况下ansible的配置文件保存在 /etc/ansi ...

  7. Linux性能统计工具

    Linux下的一些I/O统计工具 http://blog.csdn.net/longxibendi/article/details/36004155

  8. 如何不保存Word即可用Word打开想显示的内容！

    今天遇到客户需要将数据用Word预览,原来做的时候是保存到本地然后打开,客户说这样不好,因为不一定预览了一定要保存,于是我翻箱倒柜的发现真没资料啊!!幸好经过我的大量实验(好吧,我是挨个方法试的!), ...

  9. 【ASP.NET MVC路由测试+性能调试工具】

    http://getglimpse.com https://github.com/Glimpse/Glimpse 百度网盘: http://pan.baidu.com/s/1jHuTtKa

  10. Android SDK更新缓慢或无法更新的解决方法

    windows 解决方法就是修改C:\Windows\System32\drivers\etc\hosts文件.添加一行: 74.125.237.1       dl-ssl.google.com l ...