AngularJS 控制器

控制器

• 不要在控制器里操作 DOM。通過指令完成。
• 通過控制器完成的功能命名控制器 (如：購物卡，主頁，控制板)，并以字符串Ctrl結(jié)尾?？刂破鞑捎民劮迕?(HomePageCtrl, ShoppingCartCtrl, AdminPanelCtrl, etc.).
• 控制器不應(yīng)該在全局中定義 (盡管 AngularJS 允許，但污染全局空間是個(gè)糟糕的實(shí)踐)。
• 使用一下語法定義控制器：

function MyCtrl(dependency1, dependency2, ..., dependencyn) {
  // ...
}
module.controller('MyCtrl', MyCtrl);

使用這種定義方式可以最大的避免問題。你可以使用工具自動(dòng)生成數(shù)組定義，如：ng-annotate (and grunt task grunt-ng-annotate).

• 使用控制器依賴的原名。這將提高代碼的可讀性：

function MyCtrl(s) {
  // ...
}

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

下面的代碼更易理解

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

對(duì)于包含大量代碼的需要上下滾動(dòng)的文件尤其適用。這可能使你忘記某一變量是對(duì)應(yīng)哪一個(gè)依賴。

• 盡可能的精簡(jiǎn)控制器。將通用函數(shù)抽象為獨(dú)立的服務(wù)。
• 通過方法引用進(jìn)行跨控制器通訊 (通常是子控制器與父控制器通訊) 或者 $emit, $broadcast 及 $on 方法。發(fā)送或廣播的消息應(yīng)該限定在最小的作用域。
• 制定一個(gè)通過 $emit, $broadcast 發(fā)送的消息列表并且仔細(xì)的管理以防命名沖突和bug。
• 在需要格式化數(shù)據(jù)時(shí)將格式化邏輯封裝成 過濾器 并將其聲明為依賴：

function myFormat() {
  return function () {
    // ...
  };
}
module.filter('myFormat', myFormat);

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

module.controller('MyCtrl', MyCtrl);

• 當(dāng)內(nèi)嵌的控制器 使用 "內(nèi)嵌 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>