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去除空格的几种方法
Oct 03 Javascript
jQuery textarea的长度进行验证
May 06 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
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 iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
PHP面向对象概念
2011/11/06 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
PHP进程通信基础之信号
2017/02/19 PHP
Javascript 面试题随笔
2011/03/31 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
给Python入门者的一些编程建议
2015/06/15 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
Django 反向生成url实例详解
2019/07/30 Python
Python底层封装实现方法详解
2020/01/22 Python
python 安装移动复制第三方库操作
2020/07/13 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
遗嘱继承公证书
2014/04/09 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫
JavaScript获取URL参数的方法分享
2022/04/07 Javascript