Question

我遇到了一个问题，即将我的AngularJS应用程序的逻辑分成多个文件，这给我带来了一个问题，即只有最后一个可以工作，而之前的可能会被跳过。

这里是index.html包含：

<script src="js/app.js"></script>
<script src="js/app.config.js"></script>
<script src="js/controllers/HomeController.js"></script>

每个文件包含非常少量的逻辑：

初始化：

angular.module('sportcial', ['ionic'])
.run(function run($ionicPlatform) {
    alert(2);
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }

        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
    });
});

配置：

angular.module('sportcial', ['ionic']).config(function configApp($ionicConfigProvider) {
    alert(1);
    $ionicConfigProvider.tabs.position('bottom');
});

HomeController中：

angular.module('sportcial', ['ionic'])
    .config(function config($stateProvider, $urlRouterProvider) {
        alert(3)
    })
    .controller('HomeController', ['$scope', function HomeController($scope) {
        var home = this;
    }]
);

只有最后一个触发警报（3）......

我在这里想念的是什么？：）

Answer 1

您正在覆盖每个文件中的sportcial模块。

使用setter语法

angular.module("moduleName", [moduleDependencies, ..])

创建模块。

如果要向现有模块添加内容，则需要调用getter：

angular.module("moduleName")

例如，您需要将配置文件更新为：

angular.module('sportcial').config(function configApp($ionicConfigProvider) {
    alert(1);
    $ionicConfigProvider.tabs.position('bottom');
});

Answer 2

任何angular module只应定义一次及其依赖项：

angular.module('sportcial', ['ionic'])

但是可以根据需要通过调用没有依赖项的module来多次检索：

angular.module('sportcial').config(....
angular.module('sportcial').controller(....

您必须确保在前包含依赖项的模块定义，包括同一模块的所有其他文件。

另见'Creation versus Retrieval'：

请注意使用angular.module('myModule', [])将创建模块myModule并覆盖任何名为myModule的现有模块。使用 angular.module('myModule')检索现有模块

Answer 3

您在每个文件中声明一个新模块。

设置模块的角度语法为：

angular.module('moduleName', dependenciesArray);

获取模块并随后定义模块的语法如下：

angular.module('moduleName');

从配置文件和控制器文件中删除具有离子依赖性的数组。

AngularJS分成多个文件 - 只有最后一个文件有效

3 个答案: