简单的AngularJS路由无法正常工作

Question

Home and About page have simple heading content which is not showing when running the page. Instead it is showing:

Error: $injector:modulerr
Module Error".

How do I fix this?

 var app = angular.module('myApp', ['ngRoute']); app.config(function ($routeProvider) { $routeProvider. .when('/', { templateUrl : 'partial/home.html', }) .when('/about', { templateUrl: 'partial/about.html', }) otherwise({ redirectTo: '/'}) }); 

 <div class="container"> <div> <nav> <a href="#/">Home</a> <a href="#/about">About</a> </nav> </div> </div> 

Answer 1

Although I haven't run your code, I can see a syntax error.

EDIT: Actually you have two syntax errors, rather than missing out a '.', you've added two after $routeProvider.

app.config(function ($routeProvider) {
$routeProvider. //Two '.'s 
    .when('/', {
        templateUrl : 'partial/home.html',

    })
    .when('/about', {
        templateUrl: 'partial/about.html',

    })
    //No '.' here
    otherwise({ redirectTo: '/'})
});

So replace the above with the '.', so the function chaining doesn't break.

app.config(function ($routeProvider) {
$routeProvider
    .when('/', {
        templateUrl : 'partial/home.html',

    })
    .when('/about', {
        templateUrl: 'partial/about.html',

    })

    .otherwise({ redirectTo: '/'})
});

Answer 2

此外，您应该使用$urlRouterProvider

$urlRouterProvider.otherwise('/');