Simple AngularJS routing not working

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>

Lee Brindley · Accepted Answer · 2015-04-05 18:31:43Z

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: '/'})
});

Thanks Lee!! Yea that syntax is gone but still have Error: $injector:modulerr Module Error".

Matias Fernandez Martinez · Accepted Answer · 2015-04-05 18:37:47Z

0

Also, you should use $urlRouterProvider

$urlRouterProvider.otherwise('/');

answered Apr 5, 2015 at 18:37

Matias Fernandez Martinez

1,88513 silver badges15 bronze badges

3 Comments

Learner Over a year ago

this is also not working!! :( I am new to AngularJS so don't know what exactly wrong is with code.

Matias Fernandez Martinez Over a year ago

If your application only contains the code that you showed in your first post, the issue could be that you haven't installed the node package of ng-route. Did you use yeoman to generate the project? In order to help you i need you to update a plnkr. I recommend you to use ui-router instead of ngRoute here is an simple example using ui-router

Learner Over a year ago

Thanks Matho!! I was running my code just locally on a browser when i tried with local host, it worked. :)

Collectives™ on Stack Overflow

Simple AngularJS routing not working

2 Answers 2

1 Comment

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Related