未调用 Angular 模块配置答案

【问题标题】：Angular module config not called未调用 Angular 模块配置
【发布时间】：2013-04-08 11:30:59
【问题描述】：

我正试图了解 AngularJS，但遇到了一个问题。

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

myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    console.log('Configuring module "myApp"');

    $routeProvider.when('/dashboard', {templateUrl: 'partial/dashboard', controller: DashboardController});
    $routeProvider.when('/menu', {templateUrl: 'partial/other', controller: OtherController});
    $routeProvider.otherwise({redirectTo: '/dashboard'});

    $locationProvider.html5Mode(true);
 }]);

据我了解，应该在加载模块时调用配置函数。 但事实并非如此！

我在<body> 标签上有ng-app="myApp" 指令。并且脚本以正确的顺序在正文结束标记之前加载（就这一点而言）。

    <script src="angular.js"></script>      
    <script src="app.js"></script>
    <script src="services.js"></script>
    <script src="controllers.js"></script>
</body>

我很确定我在这里忽略了一些微不足道的事情。应该有一条消息打印到控制台。但它仍然是空的，没有任何错误或警告。

应用程序中不依赖于路线的部分运行良好。

更新：我的 service.js 的简化版本

'use strict';

angular.module('myApp', function ($provide) {
    $provide.factory('myService', function ($http) {
        var service = function () {
            ...
            service implementation
            ...
        };

        return new service();
    });
});

【问题讨论】：

是的......它应该。您确定所有脚本都已加载吗？控制台中是否有任何错误？我刚刚将您的代码发布到Plunkr 以检查是否有任何拼写错误，它按预期工作。我只能怀疑你的myApp.services，你会发布吗？
@CaioToOn - 这确实是我的服务中的一个编码错误。谢谢指点。
我看到您在下面发布了正确答案；然而，对上面的一个微小的修正是 when config 运行。与第一次注入的服务不同，config 块在 AngularJS 引导程序中的指定点运行。换言之，config 将始终运行，并且始终在您的应用执行之前运行。
@JoshDavidMiller - 这是否适用于所有模块或仅适用于注入器实例化的模块？
模块不会被注入器实例化；服务做。 config，虽然会为您的应用程序模块和它声明为依赖项的任何模块以及它们的所有依赖项等执行。

标签： javascript angularjs

【解决方案1】：

我用来定义服务的方法似乎覆盖了我的myApp 模块。

这是最重要的线

angular.module('myApp', function ($provide) ...

这段代码只是重新定义了myApp 模块并添加了一个函数来配置它。

我将 service.js 重构为这个简化版本，它开始工作了。

var myApp = angular.module('myApp');

myApp.factory('securityService', function () {
    return SomeFancyServiceObject();
});

【讨论】：

谢谢，这真的为我节省了很多时间！
今天遇到了这个问题。我通常很小心，但我正在处理多个模块，直到我来到这里我才弄清楚......然后它是如此明显。好收获！
谢谢。在我的例子中，我为 app.js 和 MyControllers.js 使用了相同的模块名称。我在 MyControllers.js 中添加了一个空 [] 并意识到它正在覆盖主模块。诀窍是为您的模块使用不同的名称。
同样的事情。在黑客马拉松期间我太紧张了，试图理解为什么我的几乎 hello world 应用程序不起作用。
5 年后，您的问题和回答刚刚拯救了我的 ***。在这件事上，我已经把头撞在墙上大约 4 个多小时了，我自己永远也想不通。我在控制器的 .module() 声明上放置了一些空括号，我一定是心不在焉地添加了这些括号，并且完全忘记了它的存在。如果没有这个答案，我永远不会注意到。谢谢你

【解决方案2】：

我的 html 标记中缺少 ng-app="myApp" - 我在阅读您的问题时意识到了这一点 :-)

【讨论】：

叹息。一个小错误让我花了一个小时的调试时间
浪费了一段时间 - 零错误消息.. 并意识到 app.config 甚至没有被调用创建了一个新应用程序.... 都是因为我胖手指 np-app= 而不是 ng-app我正要撕掉 ngroute 并拉入 ui-router ！哎呀。我必须需要一个角码拼写检查器。谢谢你的回答

【解决方案3】：

我通常看到通过将它们链接在一起来应用路由：

$routeProvider
    .when('/dashboard', {templateUrl: 'partial/dashboard', controller: DashboardController})
    .when('/menu', {templateUrl: 'partial/other', controller: OtherController})
    .otherwise({redirectTo: '/dashboard'});

不明白为什么你的不工作，但可能值得一试。

【讨论】：

问题是 config(fn) 永远不会被调用。所以函数中的代码永远不会被执行。