Question

我正在学习AngularJS，我现在正在尝试$routeProvider，但我无法让它工作。

index.html：

<!DOCTYPE html>

<html ng-app="App">
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-route.min.js"></script>
        <script type="text/javascript" src="scripts/controllers.js"></script>
    </head>
    <body>
        <div ng-view></div>
    </body>
</html>

view.html：

<p>Hello World!</p>

controllers.js：

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

app.config(
    function($routeProvider){
        $routeProvider.when("/something",{
            templateUrl: "view.html",
            controller: "MyController"
        })
        .otherwhise({
            redirectTo: "/"
        });
    }
);

function MyController($scope){

}

每当我运行它时，都会收到一条错误消息

Uncaught Error: [$injector:modulerr]

我该如何解决这个问题？

Answer 1

将.otherwhise更改为.otherwise。

遇到这些问题时的一个好习惯是尝试Angular的非缩小版本。

未缩小的错误更有帮助：

未捕获错误：[$ injector：modulerr]无法实例化模块App 由于：TypeError：对象＃没有方法'otherwhise'

Answer 2

解决方案：在路由配置上创建$ inject属性，如下所示： -

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

(function (app) {
    var routeConfig = function($routeProvider){
        $routeProvider.when("/something",{
            templateUrl: "view.html",
            controller: "MyController"
        })
        .otherwhise({
            redirectTo: "/"
        });
    };
    routeConfig.$inject = ['$routeProvider'];
    app.config(routeConfig);
})(angular.module("App"));

当js缩小时，AngularJS现在可以成功注入$ routeProvider。

AngularJS routeprovider注入错误

2 个答案: