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 相关文章推荐
JavaScript 事件的一些重要说明
Oct 25 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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计算2点经纬度之间的距离代码
2013/08/12 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
Symfony的安装和配置方法
2016/03/17 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
Javascript typeof 用法
2008/12/28 Javascript
Javascript 汉字字节判断
2009/08/01 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
JS中的phototype详解
2017/02/04 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
Python3 中文文件读写方法
2018/01/23 Python
详解Python:面向对象编程
2019/04/10 Python
python中upper是做什么用的
2020/07/20 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
盛大二次面试题
2016/11/18 面试题
毕业生自荐书
2014/02/03 职场文书
元宵节晚会主持词
2015/07/01 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
MySQL通过binlog恢复数据
2021/05/27 MySQL