Angular的Bootstrap(引导)和Compiler(编译)机制


Posted in Javascript onJune 20, 2016

在上节简单介绍了Angular js框架,在这节将继续Angular的Bootstrap(引导)和Compiler(编译)机制。

一:Bootstrap:Angular的初始化

1:Angular推荐的自动化初始如下:

<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
<body>
...
<script src="angular.js">
</body>
</html

利用ngapp标示你需要自动引导应用程序的根节点,一般典型为html tag。在DOMContentLoaded事件触发Angular会自动寻找ngapp作为应用的根节点,如果找到则会进行如下操作:

1.加载module(模块)相关directive(指令)。

2.创建应用程序injector(Angular的注入机制).

3.编译处理ng-app作为根节点的指令。这里允许你自定义选择DOM节点作为应用根节点。

<!doctype html>
<html ng-app="optionalModuleName">
<body>
I can add: {{ + }}.
<script src="angular.js"></script>
</body>
</html>

2:手动初始化:

如果想对对初始化有更多的控制权,可以采用自定义手动引导方法初始化代替angular的自动初始化。比如你需要在angular编译模板之前做一些事情,比如改变模板某些内容。手动引导方式将会如下:

<!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模板根节点(典型为document元素).

2.调用api/angular.bootstrap(angular.bootstrap(element[, modules]))编译模板使其可执行.

二:Compiler:Angular的编译

Angular的编译机制允许开发人员给浏览器添加新的Html语法,允许我们添加一些html节点,attribute,甚至创建一些自定义的节点,attribute。Angular把这些行为的扩展成为指令directives.Angular带来了有用的directive,并允许我们创建特定领域的directive。

1: Compiler处理分为两个步骤:

1.转换DOM,收集directive,返回Link(连接)function。

2.合并指令和Scope产生一个活生生的View。scop mode中的任何改变都会通过反应到view中,并来自view的用户交互也会同步到scope model,并scope是一个单一数据源。

2:指令Directive

Directive是一个会被特殊的html设计编辑处理的行为。其可以被放置在节点的names, attributes, class 上,甚至是html注释中。下面是Angular自带的ng-bind的等价写法:

<span ng-bind="exp"></span>
<span class="ng-bind: exp;"></span>
<ng-bind></ng-bind>
<!-- directive: ng-bind exp ?>

directive仅仅是一个在dom中会被Angular执行的一个function。下面是一个拖拽的实例,其可以被应用于span,div的attribute上:

angular.module('drag', []).directive('draggable', function ($document) { 
var startX = , 
startY = , 
x = , 
y = ; 
return function (scope, element, attr) { 
element.css({ 
position: 'relative', 
border: 'px solid red', 
backgroundColor: 'lightgrey', 
cursor: 'pointer' 
}); 
element.bind('mousedown', function (event) { 
startX = event.screenX - x; 
startY = event.screenY - y; 
$document.bind('mousemove', mousemove); 
$document.bind('mouseup', mouseup); 
}); 
function mousemove(event) { 
y = event.screenY - startY; 
x = event.screenX - startX; 
element.css({ 
top: y + 'px', 
left: x + 'px' 
}); 
} 
function mouseup() { 
$document.unbind('mousemove', mousemove); 
$document.unbind('mouseup', mouseup); 
} 
} 
});

Demo
you can drag and move me to anywhere !

3:view理解

有许多的模板引擎都被设计为模板(template)和数据(model)的合并返回一个字符串,再利用innerHTML追加在DOM节点,这以为则数据的任何改变都必须重新合并生成新的内容追加在DOM上。形如下图属于单向绑定技术:

Angular的Bootstrap(引导)和Compiler(编译)机制

而Angular则不同利用directive指令而非字符串,返回值是一个合并数据model的link function。view和model的绑定是自动,透明的,不需要开发人员添加额外的action去更新view,Angular在这里不仅是数据model的绑定,还有行为概念。作为双向的绑定,形如下图:

Angular的Bootstrap(引导)和Compiler(编译)机制

资料:

 1.Angular官网:http://angularjs.org/

2.代码下载:https://github.com/angular/angular.js

以上所述是小编给大家介绍的Angular的Bootstrap(引导)和Compiler(编译)机制,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript的parseInt 取整使用
May 09 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 #Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 #Javascript
对jQuary选择器的全面总结
Jun 20 #Javascript
jQuery实现的可编辑表格完整实例
Jun 20 #Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 #Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 #Javascript
浅谈JavaScript中数组的增删改查
Jun 20 #Javascript
You might like
php文档更新介绍
2011/07/22 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
js sort 二维数组排序的用法小结
2014/01/24 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
js操作二进制数据方法
2018/03/03 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Python tkinter模版代码实例
2020/02/05 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
Python关于反射的实例代码分享
2020/02/20 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
单位介绍信格式范文
2015/05/04 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python