鍍金池/ 教程/ HTML/ 控制器
過濾器
模塊
其他
控制器
服務(wù)
路由
模板
優(yōu)化 digest cycle
目錄結(jié)構(gòu)
指令

控制器

  • 不要在控制器里操作 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è)依賴。

  • 盡可能的精簡控制器。將通用函數(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>