javascript - Cele mai bune practici AngularJS - Ghid de stil

Încerc să folosesc câteva dintre cele mai bune practici ale Angular definite pe site-ul google-styleguide: https://google-styleguide.googlecode.com/svn/trunk/angularjs-google-style.html

Dar în acest moment mă confrunt cu câteva probleme. Înainte să folosesc acest ghid de stil, aveam variabila $scope disponibilă pentru a face de exemplu un $watch pe o variabilă.

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

Acum, cu noua mea abordare, nu știu cum să fac față acesteia? Ar trebui să injectez încă $scope? Pentru că nu trebuie să injectez $scope atunci când nu folosesc $watch.

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]);

Ghidul de stil recomandă, de asemenea, să se facă uz de prototipuri. Dar ce se întâmplă dacă trebuie să injectez un serviciu? Care este cea mai bună abordare pentru a folosi un serviciu în interiorul prototipului tău?

function myController(MyService) {
   var vm = this;

   vm.myService = MyService;
}

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

   vm.myService.doSomething();
}

Este corect asta? Sau îmi scapă ceva, există un loc unde pot găsi mai multe informații despre acest stil de programare Angular?

În opinia mea, se simte mai mult ca javascriptul natural și vreau să folosesc această modalitate de a-mi organiza aplicațiile AngularJS.

Mulțumesc anticipat

Actualizare

Pentru problema „serviciu” mă gândeam la ceva de genul următor:

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();
}

Dar asta nu se simte corect, după părerea mea..

Răspuns #1

Este perfect valid să injectezi $scope pentru a avea acces la lucruri precum $watch chiar și atunci când folosești sintaxa „controller as”. De exemplu:

JS

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

    this.someVar = 123;
}

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

HTML

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

Primul exemplu pe care l-ai dat despre injectarea unui serviciu într-un controller este bun. Pentru exemplul de moștenire, aș face ceva de genul acesta.

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);

Dacă consideri că este prea complicat să specifici toți parametrii în controllerul copil, ai putea întotdeauna să injectezi $injector și să îl transmiți mai departe către controllerul de bază.

Răspunsul #2

@rob răspunsul este corect. Există motive perfect valabile pentru a dori în continuare injectarea $scope în controllerele tale, $watch $on $emit $broadcast, ca să numim câteva. Sigur, poți evita această cerință în unele cazuri folosind directive sau servicii, dar nu merită întotdeauna timpul sau complexitatea.

Am încercat sintaxa controller as, dar am descoperit că în majoritatea cazurilor mele de utilizare încă aveam o dependență de $scope în controllerele mele. Nu mi-a plăcut acest lucru și așa că am ajuns la următoarea convenție:

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

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

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

Deci folosește abordarea „old school”, dar cu o senzație de școală nouă. Totul în vedere depinde de vm.