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, событие запускается, но представление не является нагруженный.

Есть идеи?

2 3
angularjs ngroute

2 ответа:

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

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

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

Модуль.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('');
}]);
17

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

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

2