AngularJS种子:将JavaScript放入单独的文件(app.js,controllers.js,directives.js,filters.js,services.js)

前端之家收集整理的这篇文章主要介绍了AngularJS种子:将JavaScript放入单独的文件(app.js,controllers.js,directives.js,filters.js,services.js)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用 angular-seed模板来构造我的应用程序。最初,我把所有的JavaScript代码放在一个单一的文件,main.js.此文件包含我的模块声明,控制器,指令,过滤器和服务。应用程序工作正常,像这样,但我担心可扩展性和可维护性,因为我的应用程序变得更加复杂。我注意到角种子模板有其中每个的单独的文件,所以我试图将我的代码从单个main.js文件分发到每个其他文件中提到的问题的标题,并在应用程序中找到/ js目录下的 angular-seed模板。

我的问题是:我如何管理依赖以使应用程序工作?现有的文档here在这方面不是很清楚,因为给出的每个示例显示单个JavaScript源文件

我有一个例子是:

app.js

angular.module('myApp',['myApp.filters','myApp.services','myApp.controllers']);

controllers.js

angular.module('myApp.controllers',[]).
    controller('AppCtrl',[function ($scope,$http,$filter,MyService) {

        $scope.myService = MyService; // found in services.js

        // other functions...
    }
]);

filters.js

angular.module('myApp.filters',[]).
    filter('myFilter',[function (MyService) {
        return function(value) {
            if (MyService.data) { // test to ensure service is loaded
                for (var i = 0; i < MyService.data.length; i++) {
                    // code to return appropriate value from MyService
                }
            }
        }
    }]
);

services.js

angular.module('myApp.services',[]).
    factory('MyService',function($http) {
        var MyService = {};
        $http.get('resources/data.json').success(function(response) {
            MyService.data = response;
        });
        return MyService;
    }
);

main.js

/* This is the single file I want to separate into the others */
var myApp = angular.module('myApp'),[]);

myApp.factory('MyService',function($http) {
    // same code as in services.js
}

myApp.filter('myFilter',function(MyService) {
    // same code as in filters.js
}

function AppCtrl ($scope,MyService) {
    // same code as in app.js
}

如何管理依赖关系?

提前致谢。

该问题是由您在所有单独的文件中“重新声明”应用程序模块引起的。

这是什么应用程序模块声明(不确定声明是正确的术语)看起来像:

angular.module('myApp',[]).controller( //...

这是什么分配(不确定如果分配是正确的术语)到您的应用程序模块看起来像:

angular.module('myApp').controller( //...

注意缺少方括号。

所以,前一个版本,一个带方括号,应该只使用一次,通常在你的app.js或main.js.所有其他相关文件 – 控制器,指令,过滤器… – 应使用后一版本,一个没有方括号。

我希望这是有道理的。干杯!

猜你在找的Angularjs相关文章