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 相关文章推荐
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
javascript代码实现简易计算器
Jan 25 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
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
php面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
php中in_array函数用法探究
2014/11/25 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
PHP图片水印类的封装
2017/07/06 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
Python 的 Socket 编程
2015/03/24 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
基于python调用psutil模块过程解析
2019/12/20 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
车间班组长的职责
2013/12/13 职场文书
安全标准化实施方案
2014/02/20 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android