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

lhcgjxsq  于 2022-12-22  发布在  Angular
关注(0)|答案(3)|浏览(138)

我使用angular-seed模板来构建我的应用程序。最初,我将所有JavaScript代码放入一个文件main.js中。该文件包含我的模块声明、控制器、指令、过滤器和服务。应用程序的工作方式如下:但我担心随着应用程序变得越来越复杂,可伸缩性和可维护性会变得越来越差。seed模板中的每个文件都有单独的文件,因此我尝试将代码从单个main.js文件分发到本问题标题中提到的其他每个文件中,这些文件位于angular-seed模板的app/js目录中。
我的问题是:如何管理依赖关系以使应用程序正常工作?here的现有文档在这方面并不十分清楚,因为给出的每个示例都显示了一个JavaScript源文件。
我有一个例子:

应用程序. js

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

控制器. js

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

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

        // other functions...
    }
]);

过滤器. 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
                }
            }
        }
    }]
);

服务. js

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

主文件. 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
}

如何管理依赖项?

yruzcnhs

yruzcnhs1#

这个问题是由于您在所有单独的文件中“重新声明”应用程序模块而引起的。
应用模块声明(不确定声明是否正确)如下所示:

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

应用程序模块的赋值(也不确定赋值是否是正确的术语)如下所示:

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

注意没有方括号。
因此,前一个版本,一个 * 带 * 方括号的版本,应该只使用一次,通常在app.jsmain.js中。所有其他相关文件- * 控制器,指令,过滤器 *... -应该使用后一个版本,一个 * 不带 * 方括号的版本。
希望你能理解干杯!

nlejzf6q

nlejzf6q2#

如果您希望将应用程序(filters, services, controllers)的不同部分放在不同的物理文件中,则必须执行以下两项操作:
1.在app.js或每个文件中声明这些名称空间(因为没有更好的术语);
1.在每个文件中引用这些名称空间。
因此,您的app.js将如下所示:

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

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

在每个文件中:
服务. js

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

控制器. js

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

所有这些都可以合并到一个调用中:
控制器. js

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

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

gt0wga4j

gt0wga4j3#

你得到这个错误是因为你还没有定义myApp.services。到目前为止,我所做的是把所有的初始定义放在一个文件中,然后在另一个文件中使用它们。就像你的例子一样,我会放进去:

应用程序.js

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

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

这应该可以消 debugging 误,尽管我认为您应该阅读一下其中一条评论中提到的文章Eduard Gamonal

相关问题