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国旗变换效果代码
Aug 13 Javascript
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
序列化模块json代码实例详解
Mar 03 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的变量总结 新手推荐
2011/04/18 PHP
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
简单的js分页脚本
2009/05/21 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
分析python切片原理和方法
2017/12/19 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
Django 视图层(view)的使用
2018/11/09 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
军校本科大学生自我评价
2014/01/14 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
邀请函范文
2015/02/02 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android