个人AngularJS 学习之旅(二)

时间 2019-11-08

标签个人 angularjs 学习之旅栏目 AngularJS 繁體版

原文原文链接

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

废话很少说，接前一篇继续吧程序员

3.3 指令(Directives)angularjs

Angular 最强大的功能之一就是，你能够把模板编写成HTML的形式。

[备注：Angular引入了一款强大的DOM转换引擎，可用它来扩展HTML的语法]

经常使用的内置指令;设计模式

{{ greeting }} 单向数据绑定api

ng-model 双向绑定架构

3.4 过滤器(Filters)app

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

在模板中使用过滤器

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

example:函数

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

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

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

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

example:

例如，在“{{ 1234 | number:2 }}”的标记中格式化显示了数字1234为小数点后两位，使用了 number过滤器。显示的结果为"1,234.00"。

3.5 依赖注入

依赖注入（DI）是一种让代码管理其依赖关系的设计模式。

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

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 会调用这个依赖注入器去查找或是建立你所须要的依赖，而后返回来给你用）

四、Angular与其余框架的兼容性

ng-app 声明Angular边界

纯Angular应用

      <html ng-app>
      //some code here
      ….      
      </html>

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

<html>      
  <div  ng-app> 
      …      
     </div>
</html>

五、小结

咱们选择一个框架必定是看中了他的一些优点，固然没有万能的框架。和传统框架相比,Angular有本身的独特的优点:

①解决了界面展现和相关的业务混合在一块儿的问题

②Angular 中咱们能够编写包含业务逻辑的控制器,而无需引用DOM

固然,对于像我这样的初学者来讲,Angular有不太好的地方,一方面相对来讲资料比较少,另外就是调试较为复杂，可能对你来讲，不是问题的问题，定位它,都会耽误太多时间。

6.综合型的demo

和大多数程序员同样，学习一个东西，笔者很急切将他们应用到项目中去，并逐渐能使用它搭建一个比较完善的项目架构。

在客户端对JS的组织架构以下

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

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

运行起来的效果以下：

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

参考资料:

AngularJS中文社区

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

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