关于 AngularJS $RouteParams

Question

I just started to learn AngularJS. When I use the .service of AngularJS, if I inject $RouteParams , but I don't actually use $RouteParams , then the .service doesn't work.

myApp.service('myService', function() {
    this.name = 'myServiceName';
    var self = this;
    this.nameLength = function () {
        return self.name.length;
    };  
});
myApp.controller('mainController', ['$scope','$log','$routeParams','myService',function($scope, $log,myService,$routeParams) {
    $scope.handle = myService.name;
}]);

What's weird is that if I do use $RouteParams in the controller, then it works, why would the $RouteParams influence the use of .service ?

Answer 1

The problem is not with $routeParams but the order of dependencies injected. Interchange the order of dependencies to be same as the annotated dependencies. In your code you have annotated the $routeParams service before myService : ['$scope','$log','$routeParams','myService' but while using them in injected depndencies as callback function parameters you are using $routeParams after myService . When you try to use the myService.name , it actually refers to $routeParams which does not have a property named name . Change your code as below and it will work

myApp.service('myService',function(){
      this.name='myServiceName';
      var self=this;
      this.nameLength=function(){
            return self.name.length;
        };  
});

myApp.controller('mainController',  ['$scope','$log','$routeParams','myService',function($scope, $log,$routeParams, myService) {
   $scope.handle = myService.name;
}]);

Answer 2

Create your controllers like this. This way is less confusing and more readable.

myApp.controller('mainController', function($scope, $log,myService,$routeParams) {
    $scope.handle = myService.name;
});

Answer 3

Aditya Singh already explained this pretty well. To prevent this mistake, you could change code style to the following:

myApp.controller('mainController',
['$scope', '$log', '$routeParams', 'myService',
function($scope, $log, $routeParams, myService) {
    $scope.handle = myService.name;
}]);

This also prevents you from vertical scrolling when there are many injections in your controller.