AngularJs 构建复杂应用（二）

前端代码很容易出现无法管理的状况。例如有些js嵌入到HTML里面了，有一些js文件甚至有上万行，基本无法维护，而且缺少注释，接手这样的项目简直就是噩梦。构建现代化的web程序，当然需要让前端代码的组织规范起来。还好，angular可以帮助我们解决这些问题。

关于directives

directives是angular极其强大的组件化工具。类似于reactjs的思想，directives可以让一个页面的各个部分变成模块。每个模块负责独立的业务，例如文章列表，用户信息等等。最终让整个页面变得更加容易维护，而且组件可以在不同的页面被引用，大大提高了组件的可复用性。

例如上面的一个页面就可以切割成若干个部分，每个部分都是一个directives.

(function(){
var widgets = angular.module('app.widgets');

widgets.directive('postList', directiveHandler);

directiveHandler.$inject = ['$http', '$rootScope', '$timeout', '$helper', '$compile', 'courseService', 'courseCommonModel'];

  var component = {
    templateUrl : 'course-view.html',
    replace: true,
    scope: {
        controlAdapter: '='
    },
    link : link
  }

  link.$inject = ['$scope', 'element', 'attrs'];

  function link($scope, element, attrs){
      ....
  }

}
})();

上面就是一个简单的组件编写方式。一个强大的组件会有更多可以自定义的参数，例如文章列表的每页显示的数量，来源，类型等等。

<div post-list data-item-num="5" data-type="post"></div>

一个页面就是一张拼图，把各个部分拼接起来就是一个应用了，一切看起来是那么简单。但是真正实现起来并没有那么简单，我们需要考虑组件之间的通讯，组件与controller之间的通讯。这已经是深入的问题了，需要根据业务的需求来调整。我们主要是要学习组件化思想，让程序变得可维护。

ps：如果不是使用angular，那么用AMD的模块化思想编程也是可以让代码变得整洁有道的。