我的AngularJS 学习之旅(二)

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

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

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的组织架构如下
我的AngularJS 学习之旅(二)

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

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

运行起来的效果如下:

我的AngularJS 学习之旅(二)

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

参考资料:

AngularJS中文社区

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

深度理解依赖注入(Dependence Injection)

上一篇:[web 前端] web本地存储(localStorage、sessionStorage)


下一篇:Mybatis批量更新数据