AngularJS初始化过程分析(引导程序)


Posted in Javascript onDecember 06, 2014

概览

这一节解释了AngularJS初始化的过程,以及需要的时候你该如何修改AngularJS的初始化。

AngularJS的 <script> 标签

这个示例展示了我们推荐的整合AngularJS的方法,它被称之为“自动初始化”。

<!doctype html>

<html xmlns:ng="http://angularjs.org" ng-app>

    <body>

        ...

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

    </body>

</html>

formatDate

1.将上面代码中的script标签放在页面的底部。将script标签放在底部缩短应用加载的时间,因为这样HTML的加载不会被angular.js脚本的加载阻塞。你可以从http://code.angularjs.org获得最新的版本。请不要在你的代码里面引用这个URL,因为它会暴露你的站点的安全隐患。如果只是实验性质的开发,那链接到我们的站点没有什么问题。

1).angular-[version].js 是具有可读性的版本, 适合开发和调试。
2).angular-[version].min.js 是压缩和混淆后的版本, 适合部署到成型产品中。

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

<html ng-app>

3.如果你想使用旧版的指令语法:ng:,那还需要将xml-namespace写在<html>中 才能使AngularJS在IE下正常工作。(这样做是因为一些历史原因, 我们不推荐继续使用ng:的语法。)

<html xmlns:ng="http://angularjs.org">

自动初始化

AngularJS会在DOMContentLoaded事件触发时执行,并通过ng-app指令 寻找你的应用根作用域。如果 ng-app指令找到了,那么AngularJS将会:

1.载入和 指令 内容相关的模块。
2.创建一个应用的“注入器(injector)”。
3.已拥有ng-app 指令 的标签为根节点来编译其中的DOM。这使得你可以只指定DOM中的一部分作为你的AngularJS应用。

<!doctype html>

<html ng-app="optionalModuleName">

    <body>

        I can add: {{ 1+2 }}.

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

    </body>

</html>

手动初始化

如果你需要主动控制一下初始化的过程,你可以使用手动执行引导程序的方法。比如当你使用“脚本加载器(script loader)”,或者需要在AngularJS编译页面之前做一些操作,你就会用到它了。

下面的例子演示了手动初始化AngularJS的方法。它的效果等同于使用ng-app指令 。

<!doctype html>

<html xmlns:ng="http://angularjs.org">

    <body>

        Hello {{'World'}}!

        <script src="http://code.angularjs.org/angular.js"></script>

        <script>

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

            angular.bootstrap(document);

            });

        </script>

    </body>

</html>

下面是一些你的代码必须遵守的顺序:

1.等页面和所有的脚本加载完之后,找到HTML模板的根节点——通常就是文档的根节点。
2.调用 api/angular.bootstrap将模板编译成可执行的、数据双向绑定的应用程序。

Javascript 相关文章推荐
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 Javascript
聊聊JS ES6中的解构
Apr 29 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 #Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 #Javascript
AngularJS入门教程(一):静态模板
Dec 06 #Javascript
AngularJS入门教程(零):引导程序
Dec 06 #Javascript
AngularJS入门教程之学习环境搭建
Dec 06 #Javascript
AngularJS入门教程之Hello World!
Dec 06 #Javascript
JavaScript中的Web worker多线程API研究
Dec 06 #Javascript
You might like
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
第五章 php数组操作
2011/12/30 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
python实现下载文件的三种方法
2017/02/09 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
青年志愿者先进事迹
2014/05/06 职场文书
个人承诺书怎么写
2014/05/24 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
创建文明城市标语
2014/06/16 职场文书
上班迟到检讨书
2014/09/15 职场文书
社区党建工作总结2015
2015/05/13 职场文书
导游词之凤凰古城
2019/10/22 职场文书
Java中的Kotlin 内部类原理
2022/06/16 Java/Android