注入' ui.router'时出错模块

时间:2014-10-21 16:09:26

标签: angularjs angularjs-routing

当我使用ui.router时,我收到错误消息" Error Module"它无法实例化模块xPlat。在html文件中,我使用angular-ui-router verson 0.2.11

下面是我注入的ui.route:

(function () {
    'use strict';
    angular.module('xPlat', ['ui.router'])
    .config(function ($stateProvider) {
        $stateProvider
            .state('views', {
                url: '/views',
                templateUrl: 'views/item.html'
            })
            .state('views.posItem', {
                url: '/views',
                templateUrl: 'views/posItem.html'
            })
            .otherwise('/views');
    })
})();

我不明白,为什么会出错?

这是我得到的错误:

错误:错误:modulerr 模块错误

Failed to instantiate module xPlat due to:
TypeError: undefined is not a function
    at http://localhost:4400/scripts/app.js:14:14
    at Object.d [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:30:210)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:29:58
    at Array.forEach (native)
    at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:7:261)
    at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:28:374)
    at Xb (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:32:427)
    at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:315)
    at Wb (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:18:30)
    at Oc (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:99

错误描述:

当模块由于某些异常而无法加载时会发生此错误。上面的错误消息应提供其他上下文。

4 个答案:

答案 0 :(得分:2)

不然的话( '/视图');用于$ urlRouterProvider而不是$ stateProvider

(function () {
'use strict';
angular.module('xPlat', ['ui.router'])
.config(function ($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/views');
    $stateProvider
        .state('views', {
            url: '/views',
            templateUrl: 'views/item.html'
        })
        .state('views.posItem', {
            url: '/views',
            templateUrl: 'views/posItem.html'
        })            
})
})();

答案 1 :(得分:0)

你必须注入$ stateProvider

(function () {
    'use strict';
    angular.module('xPlat', ['ui.router'])
    .config(['$stateProvider', function ($stateProvider) {
        $stateProvider
            .state('views', {
                url: '/views',
                templateUrl: 'views/item.html'
            })
            .state('views.posItem', {
                url: '/views',
                templateUrl: 'views/posItem.html'
            })
            .otherwise('/views');
    }])
})();

答案 2 :(得分:0)

我得到同样的错误,直到我将index.html中的引用从 angular-ui-router.min.js 更改为 angular-ui-router.js

我知道它可能不是理想的解决方案,但对我来说,缩小的库只是不起作用。

如果你使用npm,你的引用应该是这样的:

<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>

答案 3 :(得分:0)

加载UI路由器的方式已更改。根据文档(https://docs.angularjs.org/api/ngRoute),它需要像这样完成:

angular.module('app', ['ngRoute']);

这解决了我的问题。