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

AngularJS split into multiple files - only the last one works

本文关键字:文件 -只 最后一个 有效 AngularJS      更新时间:2023-09-26

我遇到了一个问题,将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');
});

家庭控制器:

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

只有最后一个发出警报(3)。。。

我在这里错过了什么,伙计们?:)

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

使用setter语法

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

创建模块。

如果你想向现有的模块添加一些东西,你需要调用getter:

angular.module("moduleName")

例如,您需要将配置文件更新为:

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

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

设置模块的角度语法为:

angular.module('moduleName', dependenciesArray);

为了获得模块并随后定义其模块,语法如下:

angular.module('moduleName');

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

任何角度模块只能定义一次及其依赖项:

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

但通过调用CCD_ 2可以根据需要多次检索,而不需要依赖项:

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

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

另请参阅"创建与检索":

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