AngularJS最佳實踐 - 風格指南

Question

我正在嘗試使用google-styleguide網站上定義的一些角度最佳做法： https ：//google-styleguide.googlecode.com/svn/trunk/angularjs-google-style.html

但目前我正在努力解決一些問題。 在我使用這個樣式指南之前，我有$scope變量可用於對變量進行$watch 。

app.controller('myController',['$scope', function($scope) {
    $scope.$watch('myVariable', function(val) {
       alert("I'm changed");
    });
}]);

現在用我的新方法我不知道如何處理這個問題？ 我還應該注入$scope嗎？ 因為當我不使用$watch時，我不必注入$scope 。

function myController($scope) {
   var vm = this;

   vm.myVariable = "aVariable";
   vm.$watch('vm.myVariable', function(val) {
      // error because $watch is undefined
   });

   //$scope.$watch - works
}

app.controller('myController',['$scope', myController]);

風格指南還建議使用原型。 但是，如果我必須注入服務怎么辦？ 在原型中使用服務的最佳方法是什么？

function myController(MyService) {
   var vm = this;

   vm.myService = MyService;
}

myController.prototype.callService = function() {
   var vm = this;

   vm.myService.doSomething();
}

這個對嗎？ 或者我錯過了什么，是否有一個地方可以找到關於這種角度編程風格的更多信息？

在我看來，感覺更像是自然的javascript，我想用這種方式來組織我的AngularJS應用程序。

提前致謝

更新

對於“服務”問題，我想到的事情如下：

function MyBaseController(AService, BService, CService) {
   this.aService = AService;
   this.bService = BService;
   this.cService = CService;
}

function myController() {
   var vm = this;
   MyBaseController.apply(vm, arguments);
}

myController.prototype.doSomething() {
   var vm = this;
   this.aService.somethingElse();
}

但這感覺不對..

Answer 1

即使你使用“控制器為”語法，注入$ scope來訪問諸如$ watch之類的東西也是完全有效的。 例如：

JS

var MyController = function($scope) {
    $scope.$watch('ctrl.someVar' function() {
        ...
    });

    this.someVar = 123;
}

MyController.$inject = ['$scope'];

HTML

<div ng-controller="MyController as ctrl">
    ....
</div>

您給控制器注入服務的第一個例子很好。 對於繼承示例，我會做這樣的事情。

var BaseController = function(AService, BService) {
    this.aService = AService;
    this.bService = BService;
}

BaseController.prototype.doSomethingWithAAndB = function() {
    ...
}

var MyController = function(AService, BService, CService) {
    BaseController.call(this, AService, BService);

    this.cService = CService;
}

MyController.$inject = ['AService', 'BService', 'CService'];

//Note: you'll need to add a polyfill for Object.create if you want to support ES3.
MyController.prototype = Object.create(BaseController.prototype);

如果您發現在子控制器中指定所有參數太麻煩，您可以隨時注入$injector並將其傳遞給您的基本控制器。

Answer 2

@rob答案是對的。 有充分合理的理由仍然希望在您的控制器中注入$scope ， $watch $on $emit $broadcast僅舉幾例。 當然，在某些情況下，您可以使用指令或服務來逃避此要求，但並不總是值得花時間或復雜性。

我已經將controller as語法轉發，但發現在我的大多數用例中，我仍然依賴於控制器中的$scope 。 我不喜歡這個，所以我最終得到了以下約定：

var MyController = function($scope) {
  $scope.vm = {};
  var vm = $scope.vm;

  vm.propA = 1;
  vm.propB = 2;
  vm.funcA = function(){};

  $scope.$watch('vm.propA' function() {
  });
}

所以它使用了“舊學校”的方法，但有了新的學校感覺。 在視圖中任何事情都關閉vm 。