AngularJS模块设置

AngularJS Modular Set up

本文关键字:设置 模块 AngularJS      更新时间:2023-09-26

直到最近,我一直将所有函数放入一个大JS文件中。我现在正试图将它们分解成小模块,以使我的应用程序更具可移植性。

我有我的核心js文件(main.js)与以下代码:

var App = angular.module("app", ['ui.bootstrap',  'angularMoment', 'chieffancypants.loadingBar', 'ngAnimate', 'ui.sortable', 'ngSanitize'], function ($interpolateProvider, $httpProvider) {
        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
        $httpProvider.defaults.transformRequest = function (data) {
            if (data === undefined) {
                return data;
            }
            return $.param(data);
        };
        $httpProvider.defaults.headers.post['Content-Type'] = ''
        + 'application/x-www-form-urlencoded; charset=UTF-8';
        $httpProvider.defaults.headers.post['X-Requested-With'] = ''
        + 'XMLHttpRequest';
    });

在另一个文件(即blog.module.js)中,我有以下内容:

        (function(window, angular, undefined) {
        'use strict';
        angular.module("app", [])
        .controller('Blog', ['$scope', function ($scope) {
            alert('test');
        }]);
    });

当main.js文件连同它的所有依赖项一起加载时,第二个文件没有被加载。基本找不到控制器。谁能告诉我哪里可能做错了?

谢谢

在blog.module.js中的sintax看起来像你试图创建两个同名的'app'模块。像这样修改你的控制器模块

(function(window, angular, undefined) {
'use strict';
angular.module("app")
.controller('Blog', ['$scope', function ($scope) {
    alert('test');
}]);
});

我引用你的话:

App = angular.module("app", ['ui.bootstrap', 
...
 angular.module("app", [])

不能重新声明一个模块,你可以重新打开

App = angular.module("app", ['ui.bootstrap', 
...
 angular.module("app")

创建另一个

App = angular.module("app", ['ui.bootstrap', 'app.controller'
...
angular.module("app.controller")