AngularJS: ngRoute не работает

Я пытаюсь заставить эту простую маршрутизацию работать и не могу понять, в чем проблема.

Это HTML:

<html lang="en" ng-app="app">
     .
     .
     .  
     <a href="#voip">
       <div class="col-lg-3 service">
        <img src="assets/img/voip.svg"/>
        <h4 ng-bind-html="content.home.voip_header"></h4>
        <p ng-bind-html="content.home.voip_txt"></p>
      </div>
    </a>

    <section id="view">
      <div ng-view></div>
    </section>

Это маршрутизация:

var app = angular.module('app',[
  'ngRoute',
  'ngSanitize'
]);
    app.config(['$routeProvider',function($routeProvider){
      $routeProvider
      .when('/voip',{
        templateUrl:'assets/templates/voip.html'
      });
    }]);

Шаблон загружается, если я укажу «иначе», как показано ниже. Я подумал, может быть, я использую неправильный синтаксис в своем атрибуте href, но я посмотрел везде и кажется, что так и должно быть.

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

Другое дело, если я слушаю $routeChangeSuccess, событие срабатывает, но представление не загружается.

Любые идеи?


angularjs ngroute
person user3085271    schedule 14.01.2017    source источник
comment
Какую версию углового вы используете?   -  person Anders Vestergaard    schedule 15.01.2017
comment
Вы загружаете эту страницу с сервера, а не file/open в браузере?   -  person charlietfl    schedule 15.01.2017
comment
Угловая версия 1.6.1. Да, страницы загружаются с сервера, на данный момент это локальный апач без изменения конфигурации, только для обслуживания файлов.   -  person user3085271    schedule 15.01.2017
comment
Я просто хочу заявить, что показанный вами код не содержит ошибок в предоставленном контексте вопроса.   -  person Anders Vestergaard    schedule 15.01.2017

Ответы (3)


arrow_upward
19
arrow_downward

Это правильно, потому что вы используете angular 1.6, и хэш-префикс по умолчанию был изменен:

Из-за aa077e8 префикс хеш-функции по умолчанию, используемый для URL-адресов хэш-банга $location, был изменен с пустой строки ('') на челку ('!'). Если ваше приложение не использует режим HTML5 или запускается в браузерах, не поддерживающих режим HTML5, и вы не указали свой собственный хеш-префикс, тогда URL-адреса на стороне клиента теперь будут содержать ! префикс. Например, вместо mydomain.com/#/a/b/c URL будет выглядеть как mydomain.com/#!/a/b/c.

Если вы действительно не хотите иметь хеш-префикс, вы можете восстановить предыдущее поведение, добавив блок конфигурации в свое приложение:

appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix(''); }]); Источник

Итак, у вас есть несколько вариантов:

<сильный>1. Установите HTML5mode в true

$locationProvider.html5Mode(true);

и в html установить базу в заголовке html:

<base href="/">

Наконец, измените <a ng-href="#voip"> на 

<a ng-href="voip">

<сильный>2. Используйте способ 1.6
Замените
<a ng-href="#voip">
на
<a ng-href="#!voip">

<сильный>3. Вернитесь к старому поведению из версии 1.5 — установите префикс хеша вручную

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);
person Anders Vestergaard    schedule 14.01.2017
comment
Итак, не работает ли пример в документации для $route? Кажется, используется вариант 1, но никогда не устанавливается базовый тег. Как можно понять любой из этих вариантов, просто взглянув на эти документы? Это расстраивает, когда пример в документации сделан неправильно... Я выбрал вариант 2, и, похоже, он работает для меня. Спасибо! - person Hintron; 16.06.2017

arrow_upward
3
arrow_downward

попробуйте использовать восклицательные знаки в html5+ajs 1.6.

например, вместо href="#home"..... напишите href="#!home". Это сработало для меня после 4 часов царапанья головы.

person MUSHRAFUL ISLAM    schedule 21.05.2017

arrow_upward
0
arrow_downward

5 и я понял, почему это не работало раньше

Я пропустил, чтобы включить следующее в index.html

 <div ng-view></div>
person spacedev    schedule 17.04.2019