在 AngularJS 开发中,控制器是连接视图与业务逻辑的关键桥梁。掌握其依赖注入的两种常见方式,能让代码更稳健、更易维护。下面详细介绍这两种写法,帮助你优化 AngularJS 控制器的依赖注入实践。

1. 显式依赖注入:字符串数组形式
myapp.controller('myCtrl', ['$scope', function($scope) {
$scope.navs = [];
}]);
这种方法将依赖项(例如这里的 $scope)以字符串形式显式定义在数组中。其优势非常明显:依赖关系一目了然,单元测试时也易于替换为 mock 对象。AngularJS 官方推荐这种写法,因为它能有效避开作用域链带来的潜在问题,长期维护起来更为省心。
更巧妙的是,函数内部的参数名可以随意修改,只要数组中的字符串标识保持不变即可。比如下面的示例:
myapp.controller('myCtrl', ['$scope', function(myCustomScopeName) {
myCustomScopeName.navs = [];
}]);
AngularJS 会根据数组中的 '$scope' 字符串找到对应的服务实例,然后注入到 myCustomScopeName 这个参数中,参数名称完全不影响执行结果。
2. 隐式依赖注入:直接传参数名
myapp.controller('myCtrl', function($scope) {
$scope.navs = [];
});
这种方式看起来更为简洁,直接将依赖作为参数传入。但背后依赖 JavaScript 解析器去读取函数参数的名称,并与 AngularJS 内部的服务名进行匹配。在开发环境中通常没有问题,但一旦遇到代码压缩工具(如闭包编译器),参数名很可能被改为 a、b,从而导致注入失败。因此,这种写法中参数 $scope 的名称不能修改,否则 AngularJS 将无法识别。
一句话总结:显式依赖注入更安全,调试和测试都更方便;隐式写法虽然编写速度快,但在大型项目或经过打包压缩后容易出现问题。建议日常开发优先采用第一种方式。
