返回首页 AngularJS 风格指南

概览

控制器

  • 不要在控制器里操作 DOM。通过指令完成。
  • 通过控制器完成的功能命名控制器 (如:购物卡,主页,控制板),并以字符串Ctrl结尾。控制器采用驼峰命名法 (HomePageCtrl, ShoppingCartCtrl, AdminPanelCtrl, etc.).
  • 控制器不应该在全局中定义 (尽管 AngularJS 允许,但污染全局空间是个糟糕的实践)。
  • 使用一下语法定义控制器:
function MyCtrl(dependency1, dependency2, ..., dependencyn) {
  // ...
}
module.controller('MyCtrl', MyCtrl);

使用这种定义方式可以最大的避免问题。你可以使用工具自动生成数组定义,如:ng-annotate (and grunt task grunt-ng-annotate).

  • 使用控制器依赖的原名。这将提高代码的可读性:
function MyCtrl(s) {
  // ...
}

module.controller('MyCtrl', ['$scope', MyCtrl]);

下面的代码更易理解

function MyCtrl($scope) {
  // ...
}
module.controller('MyCtrl', ['$scope', MyCtrl]);

对于包含大量代码的需要上下滚动的文件尤其适用。这可能使你忘记某一变量是对应哪一个依赖。

  • 尽可能的精简控制器。将通用函数抽象为独立的服务。
  • 通过方法引用进行跨控制器通讯 (通常是子控制器与父控制器通讯) 或者 $emit, $broadcast$on 方法。发送或广播的消息应该限定在最小的作用域。
  • 制定一个通过 $emit, $broadcast 发送的消息列表并且仔细的管理以防命名冲突和bug。
  • 在需要格式化数据时将格式化逻辑封装成 过滤器 并将其声明为依赖:
function myFormat() {
  return function () {
    // ...
  };
}
module.filter('myFormat', myFormat);

function MyCtrl($scope, myFormatFilter) {
  // ...
}

module.controller('MyCtrl', MyCtrl);
  • 当内嵌的控制器 使用 "内嵌 scoping" ( controllerAs 语法):

--app.js--

module.config(function ($routeProvider) {
  $routeProvider
    .when('/route', {
      templateUrl: 'partials/template.html',
      controller: 'HomeCtrl',
      controllerAs: 'home'
    });
});

--HomeCtrl--

function HomeCtrl() {
  this.bindingValue = 42;
}

--template.html--

<div ng-bind="home.bindingValue"></div>
上一篇: 模块 下一篇: 指令