Angularjs 基础入门


Posted in Javascript onDecember 26, 2014

针对于这个其实我不太清楚应该针对于哪些人或者说不知道从哪开始写,所以这里我就按照一种简单的思路开始写

1.angular.element
2.angular.Bootstrap

我们非常清楚ng-app应用到节点,angular自动帮你初始化,初始化的过程分为如下几个步骤

1.angular会在document load的时候自动初始化,首先会找到ng-app这个指令指定的节点。
2.加载与module相关的指令
3.创建与应用相关的injector(依赖管理器)
4.以制定的ng-app为根节点,开始对Dom进行compile

现在我们自己初始化一下,做一个等同于ng-app这个指令的东西。angular.element这个就是包装,包装原始DOM元素或HTML字符串作为jQuery元素。angular.Bootstrap可以手动初始化脚本,我们用这两个来初始化这个脚本

<!DOCTYPE HTML>

  <html lang="zh-cn">

  <head>

  <meta charset="UTF-8">

  <title>Bootstrap-manual</title>

  <style type="text/css">

  .ng-cloak {

  display: none;

  }

  </style>

  </head>

  <body>

  这里是ng-app外面的~~{{1+2}}

  <div id="widuu" >这里是ng-app里面~~~ {{1+2}}</div>

  <script src="angular.min.js" type="text/javascript"></script>

  <script type="text/javascript">

  angular.element(document).ready(function() {

  angular.bootstrap(angular.element(document.getElementById("widuu")));

  });

  </script>

  </body>

  </html>

2.compiler

我们清楚的看到angularjs的官方文档上边都是驼峰式命名法,譬如ngApp、ngModule、ngBind等等这些都是相关的指令,其中html compiler就是允许我们自己定义元素 属性和标签,Angular将这些附加行为称为directives。
官方文档对compiler的解释是这样的

Compiler

  Compiler is an Angular service which traverses the DOM looking for attributes. The compilation process happens in two phases.
  Compile: traverse the DOM and collect all of the directives. The result is a linking function.
  Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. This makes the scope model the single source of truth.
  Some directives such as ng-repeat clone DOM elements once for each item in a collection. Having a compile and link phase improves performance since the cloned template only needs to be compiled once, and then linked once for each clone instance.

compiler是angular的一个(service),负责遍历dom节点和查找属性,编译分为两个阶段:

1.编译:遍历节点和收集所有的directives,返回一个链接函数linking function
2.链接:将directives绑定到一个作用域(scope)中,创建一个实况视图(live view)。在scope中的任何改变,将会在视图中得到体现(更新视图);任何用户对模版的活动(改变),将会体现在scope model中(双向绑定)。这使得scope model能够反映正确的值。
一些directives,诸如ng-repeat,会为每一个在集合(collection)中的元素复制一次特定的元素(组合)。编译和链接两个阶段,使性能得以提升。因为克隆出来的模版(template)只需要编译一次,然后为每一个集合中的元素进行一次链接(类似模版缓存)。

3.一步一步创建自己的directive

1.了解directive
首先了解,directive是按照驼峰式命名法,如ngModule,当编译的时候匹配是这样的,举例如下:

<input ng-model="foo">

  <input data-ng:model="foo">
 

directive可以使用x-或者data-作为前缀,可以使用:, -, 或者 _等分隔符来转换驼峰式命名方法,如下所示:

<span ng-bind="name"></span> <br/>

  <span ng:bind="name"></span> <br/>

  <span ng_bind="name"></span> <br/>

  <span data-ng-bind="name"></span> <br/>

  <span x-ng-bind="name"></span> <br/>

一般我们使用ng-bind对应ngBind,这种格式
$compile可以匹配directive基于元素名称,属性,类名以及注释

<my-dir></my-dir>

  <span my-dir="exp"></span>

  <!-- directive: my-dir exp -->

  <span class="my-dir: exp;"></span>

 在编译过程中,compiler通过$interpolate服务匹配文本与属性中的嵌入表达式(如{{something}})。这些表达式将会注册为watches,并且作为digest cycle的一部分,一同更新。下面是一个简单的interpolation:
<img src="img/{{username}}.jpg"/>Hello {{username}}!
  
2.编译的步骤

HTML“编译”的三个步骤:

1. 首先,通过浏览器的标准API,将HTML转换为DOM对象。这是很重要的一步。因为模版必须是可解析(符合规范)的HTML。这里可以跟大多数的模版系统做对比,它们一般是基于字符串的,而不是基于DOM元素的。
2. 对DOM的编译(compilation)是通过调用$comple()方法完成的。这个方法遍历DOM,对directive进行匹配。如果匹配成功,那么它将与对应的DOM一起,加入到directive列表中。只要所有与指定DOM关联的directive被识别出来,他们将按照优先级排序,并按照这个顺序执行他们的compile() 函数。directive的编译函数(compile function),拥有一个修改DOM结构的机会,并负责产生link() function的解析。$compile()方法返回一个组合的linking function,是所有directive自身的compile function返回的linking function的集合。
3. 通过上一步返回的linking function,将模版与scope连接起来。这反过来会调用directive自身的linking function,允许它们在元素上注册一些监听器(listener),以及与scope一起建立一些watches。这样得出的结果,是在scope与DOM之间的一个双向、即时的绑定。scope发生改变时,DOM会得到对应的响应。

var $compile = ...; // injected into your code

  var scope = ...;

  var html = '<div ng-bind='exp'></div>';

  // Step 1: parse HTML into DOM element

  var template = angular.element(html);

  // Step 2: compile the template

  var linkFn = $compile(template);

  // Step 3: link the compiled template with the scope.

  linkFn(scope);

ngAttr属性绑定

<svg>

  <circle ng-attr-cx="{{cx}}"></circle>

  </svg>

今天就写到这里,明天开始写创建directive ~~~控制篇幅不要太长,这章主要概念的多~~~

Javascript 相关文章推荐
解密效果
Jun 23 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 #Javascript
Javascript的闭包详解
Dec 26 #Javascript
jQuery中focus事件用法实例
Dec 26 #Javascript
生成二维码方法汇总
Dec 26 #Javascript
Javascript中的五种数据类型详解
Dec 26 #Javascript
javascript工厂方式定义对象
Dec 26 #Javascript
jQuery中click事件用法实例
Dec 26 #Javascript
You might like
php小技巧之过滤ascii控制字符
2014/05/14 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
js+css在交互上的应用
2010/07/18 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
js 走马灯简单实例
2013/11/21 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
validform表单验证的实现方法
2019/03/08 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python正则表达式使用范例分享
2016/12/04 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书