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中__proto__与prototype的关系深入理解
Dec 04 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
javascript实现弹出层效果
Dec 10 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
让你的网站首页自动选择语言转跳
2006/12/06 PHP
一篇入门的php Class 文章
2007/04/04 PHP
PHP 超链接 抓取实现代码
2009/06/29 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
php URL验证正则表达式
2011/07/19 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
推荐dojo学习笔记
2007/03/24 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
java直接调用python脚本的例子
2014/02/16 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
Python 解析xml文件的示例
2020/09/29 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
单位创先争优活动方案
2014/01/26 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
人工作失职检讨书
2015/05/05 职场文书
新生开学寄语大全
2015/05/28 职场文书
治庸问责工作总结
2015/08/11 职场文书
丧事答谢词大全
2015/09/30 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android