Question

我有一个Angular应用程序。它的工作正常，但随着我的应用程序越来越大，我担心每个控制器都需要注入大量的依赖项。

例如

app.controller('viewapps',[
    '$scope','Appfactory','Menu','$timeout','filterFilter','Notice', '$routeParams', 
    function($scope,Appfactory,Menu,$timeout,filterFilter,Notice,$routeParams) {
        //controller code..    
}])

我确信将来的依赖列表会增加。我在这里做错了吗？这是正确的方法吗？有效处理这个问题的最佳方法是什么？

Answer 1

如果没有确切的用例，或者在控制器中看到确切的代码，很难具体说明，但看起来你的控制器可能做得太多了（或者当你添加东西时可能会做太多的事情后来）。你可以做的3件事：

将更多逻辑委托给注入的服务。
分成不同的控制器，因此每个控制器只有（几乎）1个责任。
分离成指令，每个指令都有自己的控制器和模板，并允许通过属性和指令的scope选项传入和输出选项。这通常是我的首选，因为您最终会构建一套可重用的组件，每个组件都带有一个mini-API。

至少在我看来，这样使用指令是好的。它们不仅仅用于处理原始Javascript事件或直接访问DOM。

Answer 2

我一直在玩基于控制器捆绑服务的想法。

所以在你的例子中，你会重构你的; AppFactory，Menu，filterFilter和Notice服务到单个服务中，例如ViewAppsServices。

然后您将使用ViewAppsServices.AppFactory.yourFunction（）等服务。

正如我所看到的那样，你至少可以将注射转移到另一个文件中清理控制器。

我认为可读性会受到影响，因为另一个开发人员必须查看捆绑包而不是控制器本身。

这是一个JSFiddle我放在一起来展示它是如何工作的;这就是我想象你的工作方式。

.service('ViewAppsServices', ['AppFactory', 'Menu', 'filterFilter', 'Notice', 
function (AppFactory, Menu, filterFilter, Notice) {
    return {
        AppFactory: AppFactory,
        Menu: Menu,
        filterFilter: filterFilter,
        Notice: Notice
    };
} ])

Answer 3

尝试尽可能多地将逻辑移动到服务，甚至只需使控制器方法充当“路由 - 传递”方法。如果你想在其他控制器/指令中使用类似的方法，你会发现它非常有用。无论如何，在我看来，7次注射并不多：）

（编辑：见下面Matt Way的评论）另外，提示 - 在较新版本的Angular中，您不必编写此数组，只需：

app.controller('viewapps', function($scope,Appfactory,Menu, $timeout,filterFilter,Notice,$routeParams){
   //controller code..    
}])

Answer 4

我的方法是在有很多依赖项时使用$injector：

app.controller('viewapps', ['$scope','$injector',function($scope,$injector){                               
    var Appfactory = $injector.get('Appfactory');
    var Menu = $injector.get('Menu'); 
    //etc...
}]);

优点：

可以对代码进行缩小和安全模糊处理
当您将依赖项声明为函数的参数时，您不需要计算依赖项的索引

如何避免Angularjs中的大量依赖项

4 个答案: