AngularJS best practices - Styleguide

Question

I am trying to use some of the best methods defined on google-styleguide: https://google-styleguide.googlecode.com/svn/trunk/angularjs-google-style.html

But at the moment I'm struggling with some problems. Before I used this style, I had a $scope variable available for $watch for a variable, for example.

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

Now, with my new approach, I don’t know how to handle this? Should I still enter $scope ? Because I do not need to enter $scope when I do not use $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]); 

Prototype is also recommended for styleoid. But what if I had to introduce a service? What is the best approach to using the service inside your prototype?

 function myController(MyService) { var vm = this; vm.myService = MyService; } myController.prototype.callService = function() { var vm = this; vm.myService.doSomething(); } 

It is right? Or am I missing something, is there a place where I can find more information about this angular programming style?

In my opinion, this is more like natural javascript, and I want to use this way of organizing my AngularJS applications.

Thank you in advance

Update

For the “service” problem, I thought of something like the following:

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

But that does not seem right imo ..

Answer 1

It is perfectly acceptable to enter $ scope to access things like $ watch even when using the controller-like syntax. For instance:

Js

 var MyController = function($scope) { $scope.$watch('ctrl.someVar' function() { ... }); this.someVar = 123; } MyController.$inject = ['$scope']; 

HTML

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

The first example you gave to enter the service into the controller is good. For an example of inheritance, I would do something like this.

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

If you find it too cumbersome to specify all the parameters in the child controller, you can always simply enter $injector and pass this to your base controller.

Answer 2

@rob answer is correct. There are well-founded reasons why you need $scope to inject $watch $on $emit $broadcast into your controllers, to name a few. Of course, you can avoid this requirement in some cases using directives or services, but it is not always worth the time or complexity.

I gave the controller as go syntax, but found that in most use cases, I still had a $scope dependency in my controllers. I did not like this, and so I got the following agreement:

 var MyController = function($scope) { $scope.vm = {}; var vm = $scope.vm; vm.propA = 1; vm.propB = 2; vm.funcA = function(){}; $scope.$watch('vm.propA' function() { }); } 

Thus, he takes the “old school” approach, but with a new school feel. Everything in the view hangs vm .