Angular.js为什么如此火呢？

 
 
 
 

  
  
  
  

  
  
  
  
  
  
  
  
  
Insert your name:
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
Echo: {{user.name}}
  
  
  
  
  
  
  
  
  

 
 
 
 

 
 
 
 

  
  
  
  
var app = angular.module('app', []); 
  
  
  
  

  
  
  
  
app.controller('MainCtrl', function($scope) { 
  
  
  
  

  
  
  
  
$scope.message = 'World'; 
  
  
  
  

  
  
  
  
}); 
  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  
 
  
  
  
  

  
  
  
  
Hello, {{ message }} 
  
  
  
  

  
  
  
  

 
 
 
 

 
 
 
 

  
  
  
  
var app = angular.module('app', []); 
  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  
app.controller('MainCtrl', function($scope) { 
  
  
  
  

  
  
  
  
$scope.greet = function() { 
  
  
  
  

  
  
  
  
$scope.message = "Hello, " + $scope.user.name; 
  
  
  
  

  
  
  
  
} 
  
  
  
  

  
  
  
  
}); 
  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  
What's your name?: 
  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  
Click here!
  
  
  
  

  
  
  
  
{{ message }}
  
  
  
  

  
  
  
  

 
 
 
 

 
 
 
 

  
  
  
  
$('#chart').pieChart({ ... });
 
 
 
 

 
 
 
 

  
  
  
  
Show
  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  
I am only visible when show is true. 
  
  
  
  

  
  
  
  

ng-show仅当angular其表达式值为true时，才显示该元素或子元素。

注意：在这里对于ng-click我们并不是直接在controller中创建function(此刻我们没真正的controller)，利用angular表达式作为指令的参数。在***表达式为undefined，然后我们设置为为true，在false如此交替。

angular同时也提供了ng-hide指令。

让我们看些更有趣的指令，如果有个List或者数组呢？

Edit in plunker

 
 
 
 

  
  
  
  
var app = angular.module('app', []); 
  
  
  
  

  
  
  
  
app.controller('MainCtrl', function($scope) { 
  
  
  
  

  
  
  
  
$scope.developers = [ 
  
  
  
  

  
  
  
  
{ 
  
  
  
  

  
  
  
  
name: "Jesus", country: "Spain"
  
  
  
  

  
  
  
  
}, 
  
  
  
  

  
  
  
  
{ 
  
  
  
  

  
  
  
  
name: "Dave", country: "Canada"
  
  
  
  

  
  
  
  
}, 
  
  
  
  

  
  
  
  
{ 
  
  
  
  

  
  
  
  
name: "Wesley", country: "USA"
  
  
  
  

  
  
  
  
}, 
  
  
  
  

  
  
  
  
{ 
  
  
  
  

  
  
  
  
name: "Krzysztof", country: "Poland"
  
  
  
  

  
  
  
  
} 
  
  
  
  

  
  
  
  
]; 
  
  
  
  

  
  
  
  
}); 
  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  
 
  
  
  
  

  
  
  
  
  
 
  
  
  
  

  
  
  
  
     
  
  
  
  

  
  
  
  
       {{person.name}} from {{person.country}} 
  
  
  
  

  
  
  
  
    
 
  
  
  
  

  
  
  
  
    
 
  
  
  
  

  
  
  
  

 
 
 
 

棒极了，我们在controller中定义了一个list对象，在HTML用ng-repeat就能简单的显示了。

它是如何工作的？

ng-repeat会为集合中的每一项创建一个新的模板，在示例中有四项数据，将会重复创建下面code四次，

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  
    {{person.name}} from {{person.country}} 
  
  
  
  

  
  
  
  

 
 
 
 

每次复制都会创建自己新的scope，我们没有为每项手动创建scope，我们可以把scope理解为其scope，但是在这里我们仍然能够访问父scope。

可视化的展示为：

我们能自定义directive？

当然，我们能以不同粒度方式创建angular的directive，例如modal dialogs accordions， paginators， charts，search from ...

angular指令总是与可视化有关？不，我们仍然可以创建一些非可视化的指令集。

让我们来看一个例子吧：

回到我们上面的greet示例：

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  
What's your name?: 
  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  
Click here!
  
  
  
  

  
  
  
  
{{ message }}
  
  
  
  

  
  
  
  

 
 
 
 

已经能够很好的工作了，但是我们希望能够在页面初始化的时候光标焦点聚焦在输入框input。jQuery？jQuery提供了focus函数，能够很简单的完成，但是这里是angular教程，所以我们需要以angular way，显得我们更专业些...

同时我们也希望我们的HTML能够有自描述能力(译者注：现代软件开发特别语言语义更重要，如linq，guava，restfull...) ，所以angular directive肯定是个好的选择。

 
 
 
 

  
  
  
  
app.directive('focus', function() { 
  
  
  
  

  
  
  
  
    return { 
  
  
  
  

  
  
  
  
    link: function(scope, element, attrs) { 
  
  
  
  

  
  
  
  
    element[0].focus(); 
  
  
  
  

  
  
  
  
    } 
  
  
  
  

  
  
  
  
    }; 
  
  
  
  

  
  
  
  
});
 
 
 
 

接下来，我们可以在可以HTML中标注angular directive(angular directive首字母小写驼峰命名，在前台转换为全小写-分割风格)。

directive是angular中最复杂的要点，这里只是最简单的directive而已，如果可能这将放在以后文章，这里并不会深入。

directive需要一个object的返回对象，我们可以定义一些需要关注的属性，在示例中我们返回了一个link的链接函数（link函数主要作为directive的行为绑定）， 我们如果需要，也可以替换HTML中模板。

Link function有3个参数（准确应该是是4个）scope，节点element，还有所有HTML attribute iAttrs。在link函数里我们可以绑定click，mouseenter等事件，注册指令行为。

在示例中我们为指令节点使用了focus操作。对element了解更多，你可以移步到这里。

我们可以很简单的使用指令如下：

 Edit in plunker

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  
What's your name?: 
  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  
Click here!
  
  
  
  

  
  
  
  
{{ message }}
  
  
  
  

  
  
  
  

 
 
 
 

目前我们看见的directive都很简单，如何利用指令渲染上面说的固定模板呢？

如下：

 
 
 
 

  
  
  
  
app.directive('hello', function() { 
  
  
  
  

  
  
  
  
    return { 
  
  
  
  

  
  
  
  
    restrict: "E", 
  
  
  
  

  
  
  
  
    replace: true, 
  
  
  
  

  
  
  
  
    template: "
Hello readers, thank you for coming
"
  
  
  
  

  
  
  
  
    } 
  
  
  
  

  
  
  
  
});
 
 
 
 

这里返回的是带有一些attribute的object。

• restrict：指令的使用方式

1. Attribute 形如:

   .

2. Element 形如：

3. Class 形如:

4. CoMment 形如:

• replace：询问是不是需要利用我们的模板替换原来的节点。

• template：我们需要append或者replace到原节点的html模板。

directive还有很多的可配置options，如编译compile，template url ...

在示例我们不需要行为的绑定，所有没有link function。其使用如下：

Edit in plunker

#p#

Filters(过滤器)

假想我们有个购物车的view显示如下：

 
 
 
 

  
  
  
  
There are 13 phones in the basket. Total: {{ 1232.12 }}
 
 
 
 

我们如何利用angular表达式显示为货币格式？形如：$1,232.12。

相当简单，angular为我们提供了叫filter得东东，过滤器其好比unix中的管道pipeline。angular同时也内置了货币currency filter.

 
 
 
 

  
  
  
  
There are 13 phones in the basket. Total: {{ 1232.12 | currency }}
 
 
 
 

如你所见，我们可以用| 使用filter，这和unix管道模型很相似。我们也可以使用|链接更多的filter。

例如我们可以对开发人员简单排序，在用ng-repeat显示出来：

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  
    
  
  
  
  

  
  
  
  
    {{ person.name }} from {{ person.country }} 
  
  
  
  

  
  
  
  
    
  
  
  
  

  
  
  
  

 
 
 
 

在这里你发现了一些很有趣的事？卫门你可以给filter传递参数!

OrderBy filter会接受一个属性名，并以它进行排序，示例中我们使用 name，如果你希望反序排列，你可以用 -name表示。

马上你可能会冒出你头脑：假想我们不止4个开发人员，有300，并且我们希望通过 name，country过滤呢？

非常简单：

Edit in plunker

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  
    Search: 
  
  
  
  

  
  
  
  
    

  
  
  
  

  
  
  
  
    
  
  
  
  

  
  
  
  
    {{ person.name }} from {{ person.country }} 
  
  
  
  

  
  
  
  
    
  
  
  
  

  
  
  
  
    
  
  
  
  

  
  
  
  

 
 
 
 

在示例中请注意我们是如何绑定search.name的,此处利用name 做filtering。filter的参数不会改变，绑定是search对象，会根据我们在input中输入改变，而filter则会找寻search对象中的name属性。

到这里我希望你也像我一样一样兴奋起来了！

下面我们来自定义filter呢？实现单词首字母大写 filter：

 
 
 
 

  
  
  
  
app.filter('capitalize', function() { 
  
  
  
  

  
  
  
  
    return function(input, param) { 
  
  
  
  

  
  
  
  
    return input.substring(0,1).toUpperCase()+input.substring(1); 
  
  
  
  

  
  
  
  
    } 
  
  
  
  

  
  
  
  
});
 
 
 
 

这里我们自定义了一个filter其接受输入参数input和过滤器参数param的一个函数。

接下来我们将在view使用它：

 
 
 
 

  
  
  
  
{{ "this is some text" | capitalize }}
 
 
 
 

#p#

Services

在文章***，我们需要再次较少下services。这是一个的维护应用程序功能逻辑部分，他是一个单间模式singleton。

为了保持应用程序的逻辑层次分明，更趋向于将其业务逻辑放到不同的services，保持controller的逻辑只有流程控制和view交互逻辑。

angular内置了很多services，如$http http请求，$q 异步promises编程模式...在这里我们不会讨论angular的内置services，由于有很多的services，并且很难一次性解释完，将在后续文章。我们将创建一个简单的自定义services。

在controller之间共享数据对我们很有用，每个controller都有自己的scope所以我们不能将其绑定到其他的controller。所以解决方案是services，可以吧数据共享到services，在需要用到的地方引用它。

首先我们来看看如果不用services，我们将会遇见什么问题：

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  
    MainCtrl: