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 相关文章推荐
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 Javascript
vue+Element-ui前端实现分页效果
Nov 15 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
什么是 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获取远程图片并把它保存到本地的代码
2008/04/07 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
Python3.4解释器用法简单示例
2019/03/22 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
办公室人员先进事迹
2014/01/27 职场文书
天地会口号
2014/06/17 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers