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

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()等服务.

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

我认为可读性会受到一些影响,因为另一个开发人员必须查看bundle而不是控制器本身.

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

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