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 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
Convert Seconds To Hours
Jun 16 Javascript
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
Nuxt.js实战详解
Jan 18 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 Javascript
vue 获取url里参数的两种方法小结
Nov 12 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自定义错误日志
2015/02/13 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
js select常用操作控制代码
2010/03/16 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
Python实现的tab文件操作类分享
2014/11/20 Python
Python实用日期时间处理方法汇总
2015/05/09 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
Python处理session的方法整理
2019/08/29 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
办公室文书岗位职责
2013/12/16 职场文书
心理健康课教学反思
2014/02/13 职场文书
自查自纠整改报告
2014/11/06 职场文书
大学军训的体会
2014/11/08 职场文书
违纪学生保证书
2015/02/27 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
Windows server 2016服务器基本设置
2022/08/14 Servers