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 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
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/02/19 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
python获取当前计算机cpu数量的方法
2015/04/18 Python
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
PyQt5实现拖放功能
2018/04/25 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
医药工作者的求职信范文
2013/09/21 职场文书
英文版网络工程师求职信
2013/10/28 职场文书
自我评价中英文语句
2013/11/30 职场文书
大学毕业感言100字
2014/02/03 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
2016新年晚会开场白
2015/12/03 职场文书
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS