Simple AngularJS routing not working properly

Question

For some reason, I can't seem to route to the add screen. What am I doing wrong? Here's my app.js

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

moviesApp.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'partials/home.html',
            controller: 'MoviesController'
        })
        .when('/add', {
            templateUrl: 'partials/add.html',
            controller: 'MoviesController'
        })
        .when('/edit', {
            templateUrl: 'partials/edit.html',
            controller: 'MoviesController'
        });
});

Here's the anchor tag:

<a href="#add">Add Movie</a>

Which is contained within my home.html template which is a part of index.html.

The app doesn't crash...it just doesn't do anything.

Any thoughts on what I'm doing wrong?

If you implemented `$locationProvider.html5Mode(true);` then you can use it like this `Add Movie` otherwise try this `Add Movie` — Debug Diva, Feb 03 '17 at 08:04

score 6 · Accepted Answer · edited May 23 '17 at 11:54

It may be because of the change in the default hash-prefix in angularjs version 1.6. What you have written works in the given context: Proof

You can confirm this is the case by changing:

<a href="#add">Add Movie</a>

to:

<a href="#!add">Add Movie</a>

If it works look at for possible solutions at:

AngularJS: ngRoute Not Working

If you want to make i behave as you expect (version 1.5) you could choose soultion 3 from the link:

3. Go back to old behaviour from 1.5 - set hash prefix manually

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

spyder1329 · Answer 2 · 2017-02-02T17:17:50.480

set up a route start event to help debug the problem

.run(function ($rootScope) {
    $rootScope.$on('$routeChangeStart', function (event, next, current) {
        console.log(event);
        console.log(current);
        console.log(next);
        console.log('$routeChangeStart: ' + next.originalPath)
    });
});

just add this to the end of your route config

Just as a side note I would use a state provider over a route provider. State providers let you define a hierarchy. It's a little harder to work with but much more flexible.

Simple AngularJS routing not working properly

2 Answers2