Geek Answers Handbook

Embedded AngularJS Router Embed Error

I am learning AngularJS and now I am trying to use $routeProvider, but I cannot get it to work.

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){

}

Whenever I run this, an error message appears

Uncaught Error: [$injector:modulerr]

How can i solve this?

+4
source share
2 answers

Change .otherwhiseto .otherwise.

A good practice when you encounter these problems is to try a non-reduced version of Angular.

Unlimited error is much more useful:

Unprepared error: [$ injector: modulerr] Could not create module application because of: TypeError: Object # does not have the 'otherwhise' method

+12
source

. $injection : -

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"));

AngularJS routeProvider, js .

+3

More articles:


All Articles