记得某位大神说过,"时间就像海绵里的水，挤挤总是有的."。大多时候，与其说我是很忙而没时间去做自己想做的事, 倒不如说是懒得去做罢了。

废话不多说，接前一篇继续吧

3.3 指令(Directives)

  Angular  最强大的功能之一就是，你可以把模板编写成HTML的形式。
 [备注：Angular引入了一款强大的DOM转换引擎，可用它来扩展HTML的语法]

常用的内置指令;

{{ greeting }}    单向数据绑定

ng-model          双向绑定

3.4 过滤器(Filters)

  过滤器用来格式化表达式中的值。它可以用在视图模板(templates)、控制器(controllers)或者服务(services)中。我们很容易就能自定义过滤器。

  在模板中使用过滤器

过滤器可以应用在视图模板中的表达式中，按如下的格式：{{ 表达式 | 过滤器名 }}

example:

例如，在"{{ 12 | currency }}"标记中格式化了数字12作为一种货币的形式来显示，它使用了currency过滤器。

格式化之后的结果是"$12.00"。

过滤器可以应用在另外一个过滤器的结果之上。这叫做“链式”使用，按如下格式：

{{ 表达式 | 过滤器1 | 过滤器2 | ... }}过滤器可以拥有（多个）参数，按如下格式：

{{ 表达式 | 过滤器:参数1:参数2:... }}

example:

 例如，在“{{ 1234 | number:2 }}”的标记中格式化显示了数字1234为小数点后两位，使用了number过滤器。显示的结果为"1,234.00"。
 
 3.5 依赖注入
 依赖注入（DI）是一种让代码管理其依赖关系的设计模式。
 
 DI简介

对象或函数可以通过三种方式获得所依赖的对象（简称依赖）：

1.创建依赖，通常是通过 new 操作符

2.查找依赖，在一个全局的注册表中查阅它

3.传入依赖，需要此依赖的地方等待被依赖对象注入进来

第三种方式是最理想的，因为它免除了客户代码里定位相应的依赖这个负担，反过来，依赖总是能够很简单地被注入到需要它的组件中。

这里还是以一个经典的例子来解释

example:

function SomeClass(greeter) {

    this.greeter = greeter;

  }

  SomeClass.prototype.doSomething = function(name) {

    this.greeter.greet(name);

  }

上述例子中，SomeClass 不必在意它所依赖(只要A类型中用到了B类型实例，A就依赖于B)的greeter对象是从哪里来的，只要知道一点：在运行的时候，greeter 依赖已经被传进来了，直接用就是了。

这个例子中的代码虽然理想，但是它却把获得所依赖对象的大部分责任都放在了我们创建 SomeClass 的客户代码中。

    为了分离“创建依赖”的职责，每个 Angular 应用都有一个 injector对象。这个injector 是一个服务定位器，负责创建和查找依赖。（译注：当你的app的某处声明需要用到某个依赖时，Angular 会调用这个依赖注入器去查找或是创建你所需要的依赖，然后返回来给你用）
 
4、Angular与其他框架的兼容性

 ng-app 声明Angular边界

纯Angular应用

      <html ng-app>

      //some code here

      ….

      </html>

如果是一款现有应用,该应用已经使用其他技术(如Java/Rails)来管理DOM,那么你可以让Angular只管理页面的一部分

<html>

  <div  ng-app>

      …

     </div>

</html>

5、小结

我们选择一个框架一定是看中了他的一些优势，当然没有万能的框架。和传统框架相比,Angular有自己的独特的优势:

  ①解决了界面展示和相关的业务混合在一起的问题
  ②Angular 中我们可以编写包含业务逻辑的控制器,而无需引用DOM
  当然,对于像我这样的初学者来说,Angular有不太好的地方,一方面相对来说资料比较少,另外就是调试较为复杂，可能对你来说，不是问题的问题，定位它,都会耽误太多时间。
 
6.综合型的demo
和大多数程序员一样，学习一个东西，笔者很急切将他们应用到项目中去，并逐渐能使用它搭建一个比较完善的项目架构。
在客户端对JS的组织架构如下

这里以home模块为例，分别包含homeModule主模块，homeCtrl,editCtrl,detailCtrl,lstCtrl控制器以及一个peopleservice服务

这里其实就是实现了简单的增删改查功能

运行起来的效果如下：

这里使用的是ASP.NET MVC 5 结合的angular，代码部分，笔者正在整理中。。。

参考资料:

AngularJS中文社区

《用AngularJS 开发下一代Web应用》

深度理解依赖注入（Dependence Injection）

我的AngularJS 学习之旅(二)的更多相关文章

  1. 我的AngularJS 学习之旅

    我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例   很早之前就 ...

  2. AngularJS学习之旅—AngularJS 模块(十五)

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  3. AngularJS学习之旅

    开篇 最近由于项目上可能需要用到AngularJS,公司将技术学习.调研的任务安排了下来,因此开始了我的AngularJS学习之路. 在这之前没写过技术博客,主要是由于太懒,另外自愧文笔不好,因此一直 ...

  4. 滴滴Booster移动APP质量优化框架 学习之旅 二

    推荐阅读: 滴滴Booster移动App质量优化框架-学习之旅 一 Android 模块Api化演练 不一样视角的Glide剖析(一) 续写滴滴Booster移动APP质量优化框架学习之旅,上篇文章分 ...

  5. Hadoop学习之旅二：HDFS

    本文基于Hadoop1.X 概述 分布式文件系统主要用来解决如下几个问题: 读写大文件 加速运算 对于某些体积巨大的文件,比如其大小超过了计算机文件系统所能存放的最大限制或者是其大小甚至超过了计算机整 ...

  6. AngularJS学习之旅—AngularJS SQL(十二)

    一.使用 PHP 从 MySQL 中获取数据 <div ng-app="myApp" ng-controller="customersCtrl"> ...

  7. AngularJS学习之旅—AngularJS 表达式(二)

    1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...

  8. Angularjs学习笔记（二）----模块

    一.定义 如何将全局定义的控制器模块化 先看下全局定义的控制器 var HelloCtrl=function($scope){ $scope.name='World'; } 模块化后代码 angula ...

  9. AngularJS学习之旅—AngularJS 简介(一)

    一.AngularJS 简介 1.AngularJS 是一个 JavaScript 框架. AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.Angu ...

随机推荐

  1. [题解+总结]NOI2015

    // 此博文为迁移而来,写于2015年7月20日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102w6u7.html 1.总 ...

  2. 20161007 NOIP 模拟赛 T1 解题报告

    排序 3.1 题意描述 众所周知,熟练掌握至少一种排序算法是参加NOIP的必备技能.常见的排序算法有冒泡 排序.归并排序.快速排序.奇偶排序.猴子排序.梳排序.鸡尾酒排序.臭皮匠排序等. 在这里,介绍 ...

  3. js中操作数组的一些方法【转】

    增 push   在数组的末尾添加一个或多个元素,并返回新的长度.  array.push(1,2,3.........) unshift  在数组的开头添加一个或多个元素,并返回新的长度. arra ...

  4. cocos2dx中设置横竖版

    IOS目录中RootViewController.mm//显示竖屏- (BOOL) shouldAutorotate { return NO;} //显示横屏- (BOOL) shouldAutoro ...

  5. 常用SQL语句(工作)

    1. 经销商 按店铺交易量汇总 ) from bp_shop_info i left join ( select t.shop_id,sum(t.shop_cost) as summary from ...

  6. ubuntu 安装 wkhtmltopdf 的方法

    参考自:http://vivianyw.blog.163.com/blog/static/1345474222014334256367/ wkhtmltopdf有编译好的Linux版本,找到http: ...

  7. 读《深入php面向对象、模式与实践》有感（二）

    书中关于设计模式的介绍很详细. 一.单例模式 作者建了一个preferences类来解释什么是单例模式.这个preferences类并非我第一次见到,在android中也有这个类,不过以前都是只管用即 ...

  8. AspCms标签手册

    网站通用标签 基本标签 {aspcms:sitepath} 网站终极目录(可放在二级目录,其它语言则在三级目录) {aspcms:languagepath} 语言目录 {aspcms:siteurl} ...

  9. CSS3初学篇章_6(自定义动画)

    自定义动画 由于有一部分低版本的浏览器并不支持的问题,所以这个样式要多做兼容,各大浏览器兼容前缀如下: 前缀 浏览器  -webkit  chrome和safari  -moz  firefox  - ...

  10. Android SDK 镜像站

    Android SDK镜像的介绍使用  http://www.androiddevtools.cn 镜像站地址   由于一些原因,Google相关很多服务都无法访问,所以在很多时候我们SDK也无法升级 ...