开发者社区> ghost丶桃子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Angular-Bootstrap和Compiler

简介:
+关注继续查看

      在上节简单介绍了Angular js框架,在这节将继续Angular的Bootstrap(引导)和Compiler(编译)机制。

一:Bootstrap:Angular的初始化

     1:Angular推荐的自动化初始如下:

复制代码
 1 <!doctype html>
 2 
 3 <html xmlns:ng="http://angularjs.org" ng-app>
 4 
 5 <body>
 6 
 7 ...
 8 
 9 <script src="angular.js">
10 
11 </body>
12 
13 </html  
复制代码

   利用ngapp标示你需要自动引导应用程序的根节点,一般典型为html tag。在DOMContentLoaded事件触发Angular会自动寻找ngapp作为应用的根节点,如果找到则会进行如下操作:

  1. 加载module(模块)相关directive(指令)。
  2. 创建应用程序injector(Angular的注入机制).
  3. 编译处理ng-app作为根节点的指令。这里允许你自定义选择DOM节点作为应用根节点。
复制代码
 1 <!doctype html>
 2 
 3 <html ng-app="optionalModuleName">
 4 
 5 <body>
 6 
 7 I can add: {{ 1+2 }}.
 8 
 9 <script src="angular.js"></script>
10 
11 </body>
12 
13 </html>
复制代码
 

    2:手动初始化:

     如果想对对初始化有更多的控制权,可以采用自定义手动引导方法初始化代替angular的自动初始化。比如你需要在angular编译模板之前做一些事情,比如改变模板某些内容。手动引导方式将会如下:

复制代码
 1 <!doctype html>
 2 
 3 <html xmlns:ng="http://angularjs.org">
 4 
 5 <body>
 6 
 7 Hello {{'World'}}!
 8 
 9 <script src="http://code.angularjs.org/angular.js"></script>
10 
11 <script>
12 
13 angular.element(document).ready(function() {
14 
15 angular.bootstrap(document);
16 
17 });
18 
19 </script>
20 
21 </body>
22 
23 </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的等价写法:

复制代码
1 <span ng-bind="exp"></span>
2 
3 <span class="ng-bind: exp;"></span>
4 
5 <ng-bind></ng-bind>
6 <!-- directive: ng-bind exp –>
复制代码

       directive仅仅是一个在dom中会被Angular执行的一个function。下面是一个拖拽的实例,其可以被应用于span,div的attribute上:

ExpandedBlockStart.gif
复制代码
 1 angular.module('drag', []).directive('draggable', function ($document) { 
 2     var startX = 0, 
 3         startY = 0, 
 4         x = 0, 
 5         y = 0; 
 6     return function (scope, element, attr) { 
 7         element.css({ 
 8             position: 'relative', 
 9             border: '1px solid red', 
10             backgroundColor: 'lightgrey', 
11             cursor: 'pointer' 
12         }); 
13         element.bind('mousedown', function (event) { 
14             startX = event.screenX - x; 
15             startY = event.screenY - y; 
16             $document.bind('mousemove', mousemove); 
17             $document.bind('mouseup', mouseup); 
18         }); 
19 
20         function mousemove(event) { 
21             y = event.screenY - startY; 
22             x = event.screenX - startX; 
23             element.css({ 
24                 top: y + 'px', 
25                 left: x + 'px' 
26             }); 
27         } 
28 
29         function mouseup() { 
30             $document.unbind('mousemove', mousemove); 
31             $document.unbind('mouseup', mouseup); 
32         } 
33     } 
34 });
35 
36  
复制代码

    Demo

you can drag and move me to anywhere !

     3:view理解

     有许多的模板引擎都被设计为模板(template)和数据(model)的合并返回一个字符串,再利用innerHTML追加在DOM节点,这以为则数据的任何改变都必须重新合并生成新的内容追加在DOM上。形如下图属于单向绑定技术:

2012-8-13 23-33-08 

     而Angular则不同利用directive指令而非字符串,返回值是一个合并数据model的link function。view和model的绑定是自动,透明的,不需要开发人员添加额外的action去更新view,Angular在这里不仅是数据model的绑定,还有行为概念。作为双向的绑定,形如下图:

2012-8-13 23-33-08 

资料:

  1. Angular官网:http://angularjs.org/
  2. 代码下载:https://github.com/angular/angular.js

Angular随笔:

  1. AngularJs - Javascript MVC 框架
  2. Angular-Bootstrap和Compiler

   其他章节还在翻译中...希望大家多多指教,对于翻译我不会去按照原文完全翻译,会按照自己的理解。


作者:破  狼 
出处:http://www.cnblogs.com/whitewolf/ 
本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-个人独立博客博客园--破狼51CTO--破狼。http://www.cnblogs.com/whitewolf/archive/2012/08/13/2637262.html


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
13-Bootstrap 全局 css 样式---表单2|学习笔记
快速学习13-Bootstrap 全局 css 样式---表单2
60 0
05_Bootstrap全局css样式_栅格2|学习笔记
快速学习05_Bootstrap全局css样式_栅格2
41 0
BootStrap样式
Bootstrap简介 来自Twitter,是目前最流行的前端框架 是基于HTML、CSS、Javascript的一个简洁、灵活的开源框架,便于开发人员随时上手 目前版本V3 Bootstrap受欢迎的原因 快速制作响应式的网页来适配各种终端 开发简...
1652 0
bootstrap的样式
一、字体图标 进入bootstrap官方文档的组件页面https://v3.bootcss.com/components/,最上面的组件就是字体图标“Glyphicons 字体图标”部分。
1608 0
AngularJs angular.bind、angular.bootstrap、angular.copy
angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能。 格式:angular.bind(self,fn,args); self:object  对象; fn的上下文对象,在fn中可以用t...
811 0
bootstrap (前端css框架)
bootstrap是一个前端css框架,由twitter公司开发。它简洁、直观、漂亮,特点之一是能够根据不同尺寸的设备(如手机、平板、笔记本与台式机的显示器尺寸不一)来响应式地布局,背后原理是css的媒体查询功能。 响应式 实现响应式布局的&lt;meta&gt;标签: &lt;!-- Bootstrap 根据屏幕大小自适应样式 --&gt; &lt;meta name="vi
1401 0
Bootstrap系列 -- 12. 水平表单
  Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右)      在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:  1、在元素是使用类名“form-horizontal”。
656 0
1955
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载