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 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
JavaScript实现串行请求的示例代码
Sep 14 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
德劲1107的电路分析与打磨
2021/03/02 无线电
php 面向对象的一个例子
2011/04/12 PHP
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
jQuery chili图片远处放大插件
2009/11/30 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Django获取应用下的所有models的例子
2019/08/30 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
python实现文字版扫雷
2020/04/24 Python
python 常见的排序算法实现汇总
2020/08/21 Python
CSS3 实现的加载动画
2020/12/07 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
毕业生自我鉴定
2013/11/05 职场文书
两则小学生的自我评价分享
2013/11/14 职场文书
大学生个人自我鉴定
2013/12/03 职场文书
离婚协议书标准格式
2014/10/04 职场文书
考研复习计划
2015/01/19 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
详解Python中的进程和线程
2021/06/23 Python