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 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
js获取滚动距离的方法
May 30 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 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中操作ini配置文件的方法
2013/04/25 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
YII框架关联查询操作示例
2019/04/29 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
JS实现页面打印功能
2017/03/16 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
python设计模式大全
2016/06/27 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
python 变量初始化空列表的例子
2019/11/28 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
后勤园长自我鉴定
2013/10/17 职场文书
自我评价个人范文
2013/12/16 职场文书
酒后驾车标语
2014/06/30 职场文书
解除劳动合同协议书
2014/09/17 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
2015年党员自评材料
2014/12/17 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
一文搞懂Java中的注解和反射
2022/06/21 Java/Android