Как настроить переход между страницами в Angular?

Question

[Max]

Здравствуйте, скажите пожалуйста как правильно настроить переходы между страницами.
Для вывода пунктов меню использую массив записей:

$scope.lists = [
		{'name': 'Home'},
		{'name': 'SERVICES'} ...

И сам вывод на странице:

<li  ng-repeat="list in lists">
   <a href="/">{{list.name}}</a>

В контроллере написано так:

$routeProvide
.when('/',{
	templateUrl:'template/home.html',
	controller:'PhoneListCtrl'
})
.when('/SERVICES',{
	templateUrl:'template/SERVICES.html',
	controller:'servCntrl'
}) ...

Но меня постоянно перебрасывает в корневой каталог где указан список всех файлов проекта
Подскажите, как исправить

Answer 1

[Максим Дунаевский]

Ссылки должны начинаться со знака # или со знаков !#, если нужна поисковая оптимизация, тогда не будет перекидывать. К тому же, используйте ng-href.
Вот тут явная ошибка:

<li  ng-repeat="list in lists">
   <a href="/">{{list.name}}</a>
</li>

У Вас ВСЕ ссылки будут вести на /. Правильно делать так:

<li ng-repeat="item in links">
    <a ng-href="#/{{ item.link }}">{{ item.title }}</a>
</li>

В свою очередь массив ссылок должен выглядеть примерно так:

links = [
    { link: 'contacts', title: 'Контакты' },
    { link: 'profile',  title: 'Профиль'  }
];

Comments

[Max]

Сейчас попробую

[Max]

Все сделал по вашему примеру, но выдает постоянно такой адрес на любой ссылке: localhost:8000/app/#/%7B%7B%20list.name
Может я что-то не так в контроллере прописал:
$routeProvide
.when('/',{
templateUrl:'template/home.html',
controller:'PhoneListCtrl'
})
.when('SERVICES',{
templateUrl:'template/SERVICES.html',
controller:'servCntrl'
}) ...

[Максим Дунаевский]

Максим Череватов: полный код контроллера и вёрстку на pastebin в студию!

[Max]

Максим Дунаевский:
Толком не знаю как пользоваться тем сервисом, но вот что вышло:
HTML pastebin.com/2KbK1Rn3
JAvaScript pastebin.com/5dpjfHj5

[Максим Дунаевский]

Максим Череватов: Инициализацию маршрутов вынесите на самый верх. Она должна выполняться на этапе инициализации приложения, а не выполнения контроллера, как у Вас сейчас.
Ещё ошибка:
$locationProvider
Использование переменной до её объявления. В общем, рефакторьте код, приведите ссылки к нижнему регистру.

[Max]

кажется все переделал, но ошибка не прошла. Думаю что она где-то здесь, но найти не могу:

var appModule = angular.module('appModule', ['ngRoute']);
appModule.controller('menuContr', function($scope){
appModule.config(['$routeProvider','$locationProvider', function($routeProvide, $locationProvider){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
})

[Максим Дунаевский]

Максим Череватов: если Вы до сих пор не поняли причины, ответьте на такой вопрос: в какой момент времени происходит вызов контроллера?

[Max]

Максим Дунаевский: Насколько я понимаю, сначала загружается файл ангуляра, потом роут, а потом controllers.js (Если говорить о HTML странице). А сам вызов необходимого контроллера из файла происходит в том месте где собственно и написан его вызов (ng-controller="menuContr" - например). Ну а возможно я не правильно понял Ваш вопрос)

[Максим Дунаевский]

Максим Череватов: Вот именно. У Вас инициализация маршрутов происходит не в момент инициализации приложения, а во время вызова контроллера, который вроде как нужен для того, чтобы обрабатывать один из маршру... WAIT, OH SHI...
Короче, уберите нахрен инициализацию маршрутов из контроллера. Это должно делаться на этапе инициализации приложения.

Answer 2

[Kano]

Вы наверно забыли включить -

$locationProvider.html5Mode({enabled:true,requireBase:false}).hashPrefix('!');

Comments

[Max]

Нет, это есть)