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 相关文章推荐
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 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
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
php多文件上传实现代码
2014/02/20 PHP
javascript eval函数深入认识
2009/02/21 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
JavaScript的一些小技巧分享
2021/01/06 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
用Python写一段用户登录的程序代码
2018/04/22 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
Python ellipsis 的用法详解
2020/11/20 Python
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
大三预备党员入党思想汇报
2014/01/08 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
供货协议书
2014/04/22 职场文书
2016大学军训心得体会
2016/01/11 职场文书
MySQL常用慢查询分析工具详解
2022/08/14 MySQL
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python