Question

我正试图绕过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);
 }]);

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

我在ng-app="myApp"标记上有<body>指令。并且脚本在正文关闭标记之前以正确的顺序加载（尽可能重要）。

    <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();
    });
});

Answer 1

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

这是最重要的一行

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

此代码只是重新定义myApp模块并添加一个函数来配置该模块。

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

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

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

Answer 2

我在html标签中缺少ng-app =“myApp” - 我在阅读你的问题时意识到这一点： - ）

Answer 3

我通常会看到通过链接它们来应用路由：

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

看不清你为什么不行，但可能值得一试。

Angular模块配置未调用

更新：我的service.js

3 个答案: