Angular优化：the view（part 1）

翻译，原文：http://www.ng-newsletter.com/advent2013/#!/day/7

我们可以很简单地构建一个angular应用的原型，但是在实际生产开发的时候我们是怎么做的呢？我们的app可以hold住么？当我们需要处理大量数据的时候，怎么样确保我们的应用依然保持着很好的性能。

在angular优化的part 1 里面，我们一步步通过几个方法来优化应用的view和介绍为什么他们是比较重要的。

‍Limiting the filter（不要过多地使用过滤器）‍

过滤器对页面的数据进行分类和管理是非常强大的，他们可以帮我们格式化数据，对数据进行即时搜索等等。

Filter	Input	Output
uppercase	{{ msg | uppercase }}	HELLO FROM ARI
currency	{{ 123.45 | currency }}	$123.45
date	{{ today | date:'longDate' }}	August 16, 2014
custom pig-latin filter	{{ msg | piglatin }}	elloHay omfray Ariway

piglatin是一个自定义的过滤器，它的实现如下所示：

angular.module('myApp')
.filter('piglatin', function() {
  return function(text) {
    text = text || '';
    text = text
      .replace(/\b([aeiou][a-z]*)\b/gi, "$1way");
    text = text
      .replace(/\b([bcdfghjklmnpqrstvwxy]+)([a-z]*)\b/gi, "$2$1ay");    return text;
  }
});

虽然在应用原型里面使用过滤器非常地方便，但是过滤器的使用也是页面视图变慢原因之一。每次触发$digest事件的时候这些过滤器就会为每个值运行一次。可想而知，当我们使用ng-repeat的时候就更糟糕了！

那么我们应该使用什么方式让过滤器的功能从view里面移除，让他只运行一次而不是每次都运行呢？Use the controller!

我们可以修改上面的视图去传递已经被过滤数据，这样就不需要在view里面做任何的分析过滤了。

在controller里面使用filters

为了在controller里面得到一个过滤器，需要将要使用的过滤器注入到controller里面；For instance：

angular.module('myApp')
.controller('HomeCtrl', function($scope, $filter) {
  // We now have access to the $filter service});

With the $filter service，我们可以得到我们感兴趣的过滤器并将它应用到我们的数据里面。

上面的date例子是一个很好的在controller格式化日期的选择，或许我们可以使用formatted_date来替代原始视图里面的date过滤器：

angular.module('myApp')
.controller('HomeCtrl', function($scope, $filter) {
  $scope.today = new Date();  var dateFilter = $filter('date');
  $scope.formatted_today = dateFilter($scope.today, 'mediumDate');
})

Instead of showing the today scope property in our view, we can simply show the formatted_today value and have the filter run in the background.