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 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
js实现网页收藏功能
Dec 17 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
JS控制GIF图片的停止与显示
Oct 24 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
两个强悍的php 图像处理类1
2009/06/15 PHP
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
javascript Object与Function使用
2010/01/11 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
Python for循环与getitem的关系详解
2020/01/02 Python
keras.layer.input()用法说明
2020/06/16 Python
Python错误的处理方法
2020/06/23 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
大学生冰淇淋店商业计划书
2014/01/14 职场文书
五一促销活动总结
2014/07/01 职场文书
出差报告怎么写
2014/11/06 职场文书
python保存图片的四个常用方法
2022/02/28 Python
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL