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 相关文章推荐
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
判断访客终端类型集锦
Jun 05 Javascript
js实现延迟加载的方法
Jun 24 Javascript
简单谈谈json跨域
Mar 13 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
详解vue-router导航守卫
Jan 19 Javascript
react+redux仿微信聊天界面
Jun 21 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
晶体管来复再生式二管收音机
2021/03/02 无线电
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
深入php之规范编程命名小结
2013/05/15 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
PHP反射基础知识回顾
2020/09/10 PHP
javascript document.images实例
2008/05/27 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python实现的ini文件操作类分享
2014/11/20 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
医院合作意向书范本
2015/05/08 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
java泛型通配符详解
2021/07/25 Java/Android
js作用域及作用域链工作引擎
2022/07/07 Javascript