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

  显示原文与译文双语对照的内容
0 0

我正在使用 angular-seed 模板来构造我的应用程序。 最初我把所有的JavaScript代码放到一个单独的文件中,main.js 。 这里文件包含我的模块声明,控制器,指令,筛选器和服务。 应用程序工作正常,但我担心的是可伸缩性和可维护性,因为我的应用程序变得更加复杂。 我注意到angular-seed模板每个都有单独的文件,所以我尝试将我的代码从一个 main.js 文件分发到这个问题中的每个其他文件,并在 angular-seed 模板的app/js 目录中找到。

我的问题是:如何管理依赖关系使应用程序能够工作? 存在的文档在这里找到了 ,在这里没有很清楚,因为给出的每个示例都显示了一个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, $http, $filter, MyService) {
//same code as in app.js
}

如何管理依赖关系?

先谢谢了。

时间: 原作者:

0 0

问题是由你在所有单独的文件中"索引文件"的应用程序模块引起的。

这就是应用程序模块声明( 不确定声明是否正确)的样子:


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

这就是( 不确定赋值是否正确) 到应用程序模块的工作分配:


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

注意缺少方括号。

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

我希望这有意义。 cheers!

0 0

你得到了错误,因为你还没有定义 myApp.services 。 我现在做的是把所有的初始定义放在一个文件中,然后在另一个文件中使用它们。 例如我将放入以下示例:

app.js


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

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

这将消除错误,尽管我认为你应该对本文中提到的文章 Eduard Gamonal 有一个阅读。

0 0

如果你想将你的应用程序的不同部分( filters, services, controllers ) 在不同的物理文件中,有两件事要做:

  1. 这些名称空间声明( 因为缺少一个更好的术语) app.js 或在每个文件中;
  2. 在每个文件中引用这些名称空间。

因此,你的app.js 将如下所示:


angular.module('myApp', ['external-dependency-1', 'myApp.services', 'myApp.controllers'])
.run(function() {
//...

})
.config(function() {
//...
});

在每个单独的file: 中

services.js


angular.module('myApp.services', []);//instantiates
angular.module('myApp.services')//gets
.factory('MyService', function() { 
 return {};
}

controllers.js


angular.module('myApp.controllers', []);//instantiates
angular.module('myApp.controllers')//gets
.controller('MyCtrl', function($scope) {
//snip...
})
.controller('AccountCtrl', function($scope) {
//snip...
});

所有这些都可以合并到一个调用中:

controllers.js

angular.module('myApp.controllers', []) 
.controller('MyCtrl', function($scope) {
//snip...
}); 

重要的部分是你不应该重新定义 angular.module('myApp') ;这将导致在实例化控制器时覆盖它,可能不是你想要的内容。

原作者:
...