浅谈AngularJS启动引导过程
我们都知道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启动引导过程的更多相关文章
- AngularJS的启动引导过程
原文:http://www.angularjs.cn/A137?utm_source=ourjs.com 目录: 引导之前 自动引导启动框架 手工引导启动框架 引导第1步:创建注入器 引导第2步:创建 ...
- AngularJS 启动执行过程
一.浏览器下载HTML/CSS/JavaScript等 当你转到一个页面地址后,浏览器先回下载这个HTML,同时,会开启一些辅助线程下载所关联的script标签和link标签里引用的文件. 二.浏览器 ...
- Linux学习笔记之Linux启动引导过程
早期时,启动一台计算机意味着要给计算机喂一条包含引导程序的纸带,或者手工使用前端面板地址/数据/控制开关来加载引导程序.尽管目前的计算机已经装备了很多工具来简化引导过程,但是这一切并没有对整个过程进行 ...
- (六)Angularjs - 启动引导
自动引导 AngularJs 通过 ng-app 指令进行自动引导 手工引导启动框架 如果一个HTML文件中 有多个ng-app,AngularJS只会自动引导启动它找到的第一个ng-app应用,这是 ...
- 浅谈AngularJS中的指令和指令间的相互通信
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- 浅谈angularJS指令的属性
restrict – 这个属性用来指定指令在HTML中如何使用(指令的四种表示方式).我们使用 ‘AE’,这个指令可以被当作新的HTML元素或者属性来使用.如果要允许指令被当作class来使用,我们将 ...
- 浅谈AngularJS中的$parse和$eval
AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑,今天我们就来说说AngularJS中的$parse和$eval. 总的来说,$parse和$eval都是作用于Ang ...
- 浅谈 JavaScript new 执行过程及function原理
前言 最近在学习JavaScript语言精粹,感觉写得相当不错.所以这里也算是总结一下.一个方法使用new的方式创建到底是怎样的过程,一个function的声明内部又是怎样执行的呢 另外学的过程中,不 ...
- 浅谈AngularJS的$parse服务
$parse 作用:将一个AngularJS表达式转换成一个函数 Usage$parse(expression) arguments expression:需要被编译的AngularJS语句 retu ...
随机推荐
- 一个数n的最大质因子
#include<cstdio> #include<cmath> using namespace std; #define Max(x, y) (x > y ? x : ...
- (原)Matlab的svmtrain和svmclassify
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5554551.html 参考网址: http://www.cnblogs.com/zhangchaoya ...
- git commit的--amend选项
git commit --amend常常用来修改某个branch上最顶端的commit,大多数情况下,这个命令给人的感觉是用新的commit替换了原来的commit.git commit --amen ...
- hdu1466 计算直线的交点数
题意: 平面上有n条直线,且无三线共点,问这些直线能有多少种不同交点数. 比如,如果n=2,则可能的交点数量为0(平行)或者1(不平行). 分析: DP 设状态:f[i][j]表示i条直线能否产生j个 ...
- java读取xml文件报“org.xml.sax.SAXParseException: Premature end of file” .
背景:java读取xml文件,xml文件内容只有“<?xml version="1.0" encoding="UTF-8"?>”一行 java读取该 ...
- FatMouse's Speed(HDU LIS)
FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- More is better(hdu 1856 计算并查集集合中元素个数最多的集合)
More is better Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 327680/102400 K (Java/Others) ...
- "windows 正在启动"
xp 在cmd下使用了control userpasswords2 设定开机不需要密码之后,开机停留在“window正在启动”,无法进入.估计是设置的时候密码输入错误了( 并不会提示你错误:() 在停 ...
- LeetCode_Interleaving String
Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example, Given: s1 ...
- java.net.SocketTimeoutException: Read timed out
If you get java.net.SocketTimeoutException: Read timed out exception Try setting own timeout value w ...