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

在上节简单介绍了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则不同利用directive指令而非字符串，返回值是一个合并数据model的link function。view和model的绑定是自动，透明的，不需要开发人员添加额外的action去更新view，Angular在这里不仅是数据model的绑定，还有行为概念。作为双向的绑定，形如下图：

资料：

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

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

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

赞 (0)

相关推荐

  • angularjs指令中的compile与link函数详解

    angularjs指令中的compile与link函数详解

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了. 大部分教程只是简单的说下compile会在ng内部用到,而且建

  • angular.js指令中的controller、compile与link函数的不同之处

    angular.js指令中的controller、compile与link函数的不同之处

    前言 算了算用angualrjs去做开发也有两个月了,但做为一个菜鸟,难免会被大神吊打(这里有一个悲伤的故事...).某天一位前端大神问我:你知道angular指令中的controller,compile,link函数有什么不同?然后我就一脸懵逼了....于是决定深入的去探究下. 今天我们来一起了解一下它们有什么不同的地方: 先看一段示例代码 var ag = angular.module("myApp",[]); ag.controller("myCtrl",[&

  • AngularJs html compiler详解及示例代码

    AngularJs html compiler详解及示例代码

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自定义新的HTML语法.compiler允许我们对任意HTML元素或属性,甚至是新的HTML标签.属性(如<beautiful girl="cf"></beautiful >)附加行为.Angular将这些附加行为称为directives. HTML有很多专门格式化静

  • 浅谈Angularjs link和compile的使用区别

    compile 想在dom渲染前对它进行变形,并且不需要scope参数 想在所有相同directive里共享某些方法,这时应该定义在compile里,性能会比较好 返回值就是link的function,这时就是共同使用的时候 link 对特定的元素注册事件 需要用到scope参数来实现dom元素的一些行为 以上就是小编为大家带来的浅谈Angularjs link和compile的使用区别全部内容了,希望大家多多支持我们~

  • 基于angular中的重要指令详解($eval,$parse和$compile)

    在angular的服务中,有一些服务你不得不去了解,因为他可以说是ng的核心,而今天,我要介绍的就是ng的两个核心服务,$parse和$compile.其实这两个服务讲的人已经很多了,但是100个读者就有100个哈姆雷特,我在这里讲讲自己对于他们两个服务的理解. 大家可能会疑问,$eval呢,其实他并不是一个服务,他是scope里面的一个方法,并不能算服务,而且它也基于parse的,所以只能算是$parse的另一种写法而已,我们看一下ng源码中$eval的定义是怎样的就知道了 $eval: fu

  • Angular中$compile源码分析

    $compile,在Angular中即"编译"服务,它涉及到Angular应用的"编译"和"链接"两个阶段,根据从DOM树遍历Angular的根节点(ng-app)和已构造完毕的 \$rootScope对象,依次解析根节点后代,根据多种条件查找指令,并完成每个指令相关的操作(如指令的作用域,控制器绑定以及transclude等),最终返回每个指令的链接函数,并将所有指令的链接函数合成为一个处理后的链接函数,返回给Angluar的bootstrap

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

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

    在上节简单介绍了Angular js框架,在这节将继续Angular的Bootstrap(引导)和Compiler(编译)机制. 一:Bootstrap:Angular的初始化 1:Angular推荐的自动化初始如下: <!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> ... <script src="angular.js"> &l

  • angular使用bootstrap方法手动启动的实例代码

    angular使用bootstrap方法手动启动的实例代码

    要启动一个angular应用,可以使用ng-app指令,也可以调用bootstrap方法手动启动.先看一下angular的bootstrap方法. angular.bootstrap(element, [modules], [config]); element(必需).要启动angular的根节点,一般为document,也可以是其他的的html的dom. modules(数组,可选).依赖的模块. conifg(object,可选).配置项,目前只有strictDi一个可配置项,默认为fals

  • jsp 自动编译机制详细介绍

    jsp 自动编译机制详细介绍

     jsp 自动编译机制详细介绍 总的来说,Jasper的自动检测实现的机制比较简单,依靠某后台线程不断检测JSP文件与编译后的class文件的最后修改时间是否相同,若相同则认为没有改动,但倘若不同则需要重新编译.实际上由于在Tomcat部署的项目的JSP可能引入了其他页面,或者引入了其他jar包,而且这些资源都可能是远程的资源,所以实际处理会比较复杂,同样要遍历检测这些引入的不同资源是否做了修改. 上图是一个形象的示意图,我们知道Tomcat架构中有四个级别的容器,Engine.Host.Con

  • Angular ui.bootstrap.pagination分页

    Angular ui.bootstrap.pagination分页

    本文实例为大家分享了Angular 分页的具体代码,供大家参考,具体内容如下 1.Html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>MyPagination</title> <link href="//netdna.bootstrapcdn

  • Angular 2应用的8个主要构造块有哪些

    前面的话:最近空余时间在学 Angular 2,国庆节的时候看了官网的quickstart,还写了一篇文章,只是一个hello world demo.后面继续看了它的一个项目教程,刚开始还可以跟上,当后面就比较混乱了.的确,对于新手来讲,要了解一个框架还是比较麻烦的.所以停止项目,开始看看 angular 的整体框架是如何的,联系项目,分析下,慢慢来. 学习链接:中文官网 正文开始: angular 应用:用带 angular 拓展语法的 HTML 写模板,用组件类管理这些模板,用服务添加应用逻

  • Angular.js基础学习之初始化

    一.绑定初始化,自动加载 通过绑定来进行angular的初始化,会把js代码侵入到html中. ng-app是angular的一个指令,代表一个angular应用(也叫模块).使用ng-app或ng-app=""来标记一个DOM结点,让框架会自动加载.也就是说,ng-app是可以带属性值的. <body ng-app="myApp"> <div ng-controller="myCtrl"> {{ hello }} <

  • Angular2使用Angular CLI快速搭建工程（一）

    Angular2使用Angular CLI快速搭建工程（一）

    前言: 本文适合Angular2的初学者阅读: 时下web前端发展迅猛,新框架层出不穷,大家都知道三驾马车VueJS,Angular2,React.国内VueJS非常热门,百度热点趋势以1000%的涨幅在增加.Angular2在国外非常受欢迎,在国内的粉丝还非常少,文章不多,究其原因有这么几点主要是学习曲线陡峭,上手困难,(1)angular本身概念难懂,(2)使用typescript开发,用到很多es6特性:(3)配置太多,复杂,工程架构搭建上手难度大.本文为了解决项目搭建的问题,详细的一步步

  • angularjs封装bootstrap时间插件datetimepicker

    angularjs封装bootstrap时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经很成熟的jquery UI 库和大量jquery 插件,几乎是一个取之不尽用之不竭的宝库.然而,它是否能与angularjs结合呢? 很多angularjs原教旨主义者对此持否定态度.他们认为,既然已经使用了angularjs做web应用框架,那就必须避免其他类库的干扰,做纯净的MvvM模式应用.任

  • JVM教程之Java代码编译和执行的整个过程（二）

    JVM教程之Java代码编译和执行的整个过程（二）

    Java代码编译是由Java源码编译器来完成,流程图如下所示: Java字节码的执行是由JVM执行引擎来完成,流程图如下所示: Java代码编译和执行的整个过程包含了以下三个重要的机制: Java源码编译机制类加载机制类执行机制 Java源码编译机制 Java源码编译由以下三个过程组成: 分析和输入到符号表注解处理语义分析和生成class文件 流程图如下所示: 最后生成的class文件由以下部分组成: 结构信息.包括class文件格式版本号及各部分的数量与大小的信息元数据.对应于Java源码中声

  • AngularJS bootstrap启动详解及实例代码

    对于一般的使用者来说,AngularJS的ng-app都是手动绑定到某个dom元素.但是在一些应用中,这样就显得很不方便了. 绑定初始化 通过绑定来进行angular的初始化,会把js代码侵入到html中,但是对于新手使用来说,还是足够了! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script s

随机推荐