关于AngularJS $ RouteParams

我刚开始学习AngularJS。当我使用AngularJS的.service时，如果我注入$RouteParams，但我实际上没有使用$RouteParams，那么.service不起作用。

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

什么奇怪的是，如果我做的控制器使用$RouteParams，那么它的工作原理，为什么会在$RouteParams影响使用的.service？

来源

2016-05-29 Zhihao Zhu

问题不在于$routeParams而在于注入的依赖关系的顺序。将依赖项的顺序交换为与注释的依赖项相同。在您的代码中，您已在myService：['$scope','$log','$routeParams','myService'之前注释了$routeParams服务，但在注入的depndencies中将它们用作回调函数参数时，在myService之后使用$routeParams。当您尝试使用myService.name时，它实际上是指$routeParams，它没有名为name的属性。改变你的代码如下，它将工作

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

来源

2016-05-29 08:13:30

感谢Aditya，它的工作原理！这对我来说非常困惑，AngularJs实现了依赖注入。我会继续学习！ –

创建你的控制器这样。这种方式不易混淆，可读性更强。

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

来源

2016-05-29 08:25:33 Ozgur

这是'隐式注释'。来自[AngularJS文档]（https://docs.angularjs.org/guide/di）的引用：'小心：如果你打算缩小你的代码，你的服务名称将被重命名并破坏你的应用程序。'这没有错，但不是最佳实践。 – nilsK

是的..那是缺点。 – Ozgur

Aditya Singh已经解释得非常好。为了避免这个错误，你可以改变的代码风格以下内容：

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

这也可以防止您的垂直滚动时有你的控制器多次注射。

来源

2016-05-29 08:25:37 nilsK

关于AngularJS $ RouteParams

回答

相关问题