Простая угловая маршрутизация не работает должным образом

Question

По какой-то причине я не могу перейти на экран add. Что я делаю не так? Вот мой 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' 
     }); 
}); 

Вот якорь тег:

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

который содержится в моем home.html шаблон, который является частью index.html.

Приложение не разбивается ... это просто ничего не делает.

Любые мысли о том, что я делаю неправильно?

Answer 1

Возможно, это связано с изменением префикса по умолчанию в angularjs версии 1.6. То, что вы написали работу в данном контексте: Proof

Вы можете подтвердить это случай путем изменения:

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

к:

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

Если это работает взгляд на возможные решения в :

AngularJS: ngRoute Not Working

Если Вы хотите, чтобы я себя так, как вы ожидаете (версия 1.5) вы можете выбрать soultion 3 по ссылке:

3. Вернитесь к старому поведению от 1,5 - набор хэш-PREfix вручную

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

Answer 2

Измените a тег, как это <a href="#/add">Add Movie</a> (обратите внимание / добавил перед добавить слово)

... или удалить косую черту (/) перед каждым маршрутом в системе маршрутизации, что-то как

.when('add', { 
      templateUrl: 'partials/add.html', 
      controller: 'MoviesController' 
}) 

Answer 3

создать событие начала маршрута, чтобы помочь отладить проблему

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

просто добавьте в конце вашего маршрута конфигурации

Так же, как примечание стороны, я использовал бы государственный провайдер через провайдера маршрута. Государственные поставщики позволяют определить иерархию. С этим немного сложнее работать, но гораздо более гибким.