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修改CSS属性的代码
May 06 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 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+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
Python面向对象特殊成员
2017/04/24 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
python实现简单遗传算法
2018/03/19 Python
python 编码规范整理
2018/05/05 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
Python3离线安装Requests模块问题
2019/10/13 Python
python如何查看安装了的模块
2020/06/23 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
教师个人培训总结
2015/02/11 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python