Angularjs学习笔记11_手工初始化
http://my.oschina.net/fuckBAT/blog/375579
Angular的编译机制允许开发人员给浏览器添加新的Html语法，允许我们添加一些html节点，attribute，甚至创建一些自定义的节点，attribute。Angular把这些行为的扩展成为指令directives.Angular带来了有用的directive，并允许我们创建特定领域的directive。
一、Angular初始化的过程
如何在你有需要的时候对Angular进行手工初始化。
二、Angular <script> 标签
<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
<body>
...
<script src="angular.js">
</body>
</html>
· 将sciprt标签放置于页面底部。这样做能避免因为加载angular.js而阻挡HTML的加载，从而降低应用的加载时间。我们可以在http://code.angularjs.org中获取到最新版本的angularJs。出于安全考虑，切勿在产品中直接引用这个地址来加载脚本。但如果仅仅是研究学习使用的话，直接连接也无妨。
· 选择：angular-[version].js 是方便阅读的一个版本，适合日常开发、调试使用。
· 选择：angular-[version].min.js 是压缩、混淆后的版本，适合最终产品使用。
· 放置”ng-app”到应用的根节点中，如果你想让angular自动启动你的应用，通常可以放置于<html>标签中。
三、自动初始化
Angular会在DOMContentLoaded事件中自动初始化，Angular会找出由你通过ng-app这个directive指定的应用根节点。如果找到，Angular会做以下事情：
加载与module相关的directive。
创建应用相关的injector（依赖管理器）。
以ng-app指定根节点，开始对DOM进行相关“编译”工作。换言之，可以将页面的其中一部分（非<html>）作为根节点，从而限制angular的作用范围
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap-auto</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
这里是ng-app外面的~~{{1+2}}
<div ng-app>这里是ng-app里面~~~{{1+3*2}}</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
</body>
</html>
注：里面的”ng-cloak”，这个是用于在angular.js编译完成之前（对！没错！是编译完成之前，不是angularjs加载完成之前。所以，如果想很好地避免这个情况，最好的办法是优化应用的加载流程，或者结合css对未编译的模版进行处理。而由于那万恶的ie6、7不支持属性选择器，所以最好使用class=”ng-cloak”的方式。编译完成后，这个class或属性会被删除。）隐藏模版，避免在页面显示原模版。
四、手工初始化
如果我们想进一步控制初始化进程(例如你需要通过script loader加载angular.js或者在angular编译页面前做一些操作)，那么我们可以用一个手工调用的启动方法去代替。
以下例子等同于使用ng-app这个directive：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap-manual</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
这里是ng-app外面的~~{{1+2}}
<div id="rootOfApp">这里是ng-app里面~~~{{1+3*2}}</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
angular.element(document).ready(function() {
angular.bootstrap(angular.element(document.getElementById("rootOfApp")));
});
</script>
</body>
</html>
就是说，我们的代码可以按照以下步骤编写：
1. 在页面和其他代码加载完成后，找到应用模版的根节点；
2. 调用angular.bootstrap，让angular去将模版编译为一个可执行的，双向绑定的应用！这里的angular.bootstrap(element,[ modules])是一个编译命令，[modules]貌似不用写，这个问题随后会更新
Angularjs学习笔记11_手工初始化的更多相关文章
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--Modules
原版地址:http://code.angularjs.org/1.0.2/docs/guide/module 一.什么是Module? 很多应用都有一个用于初始化.加载(wires是这个意思吗?)和启 ...
- AngularJs学习笔记--Dependency Injection（DI，依赖注入）
原版地址:http://code.angularjs.org/1.0.2/docs/guide/di 一.Dependency Injection(依赖注入) 依赖注入(DI)是一个软件设计模式,处理 ...
- AngularJs学习笔记--Understanding the Controller Component
原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular中,controller是一个javasc ...
- AngularJs学习笔记--Understanding Angular Templates
原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与mode ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
随机推荐
- luogu P1772 [ZJOI2006]物流运输
题目描述 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线,以便对整个运输过程实施严格的管理和跟踪. ...
- 洛谷 - Sdchr 的邀请赛 T4 信息传递
(乱搞艹爆正解系列) 对不起,由于博主太弱了,并不会正解的多项式exp(甚至多项式exp我都不会2333). 只能来说一说我是怎么乱搞的啦QWQ 首先这个题最关键的性质是: 一个在原置换 g 中长度为 ...
- 【递推】【卡特兰数】CODEVS 3134 Circle
新GET了一种卡特兰数的应用…… 在一个圆上,有2*K个不同的结点,我们以这些点为端点,连K条线段,使得每个结点都恰好用一次.在满足这些线段将圆分成最少部分的前提下,请计算有多少种连线的方法. 不会证 ...
- 【模拟】bzoj2760 [JLOI2011]小A的烦恼
注意细节和初始化. #include<cstdio> #include<string> #include<algorithm> #include<iostre ...
- Java概述--Java开发实战经典
1)Java有三个发展方向,分别是Java SE,Java EE,Java ME.以下简要介绍. a.Java SE,Java Standard Edition(java标准版),包含了构成java语 ...
- Android开发工具
Android开发工具: AndroidDevTools: 收集整理Android开发所需的Android SDK.开发中用到的工具.Android开发教程.Android设计规范,免费的设计素材等. ...
- Wait statistics, or please tell me where it hurts
https://www.sqlskills.com/blogs/paul/wait-statistics-or-please-tell-me-where-it-hurts/ By: Paul Rand ...
- java中的注解详解和自定义注解
一.java中的注解详解 1.什么是注解 用一个词就可以描述注解,那就是元数据,即一种描述数据的数据.所以,可以说注解就是源代码的元数据.比如,下面这段代码: @Override public Str ...
- DELPHI HMAC256
DELPHI HMAC256 unit HMAC;interfaceuses System.SysUtils, EncdDecd, IdHMAC, IdSSLOpenSSL, IdHas ...
- Linux中C语言的编程
编译的过程 编译的概念:编译程序读取源程序(字符流),对之进行词法与语法的分析,将高级语言指令转换成功能等效的汇编代码,再由汇编程序转换成机器语言,并且按照操作系统对可执行文件格式的要求链接成可执行程 ...