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 OOP面向对象介绍
Dec 02 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
Javascript之Math对象详解
Jun 07 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 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
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
Python实现测试磁盘性能的方法
2015/03/12 Python
Python实现基于POS算法的区块链
2018/08/07 Python
快速查找Python安装路径方法
2020/02/06 Python
python+requests接口自动化框架的实现
2020/08/31 Python
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
EJB面试题
2015/07/28 面试题
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
咖啡馆创业计划书
2014/01/26 职场文书
《狼》教学反思
2014/03/02 职场文书
购房协议书范本
2014/04/11 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python