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

Я привязываюсь, чтобы заставить эту простую маршрутизацию работать и не могу понять, в чем проблема.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, событие срабатывает, но вид не загружен.

Любые идеи?

источник

2017-01-14 user3085271

Какую версию углового используете? –

Вы загружаете эту страницу с сервера в отличие от 'file/open' в браузере? – charlietfl

Угловая версия 1.6.1. Да, страницы загружаются с сервера, на данный момент это локальный apache без изменения конфигурации, просто для обслуживания файлов. – user3085271

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

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

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

appModule.config ([ «$ locationProvider», функция ($ locationProvider) {
$ locationProvider.hashPrefix ('');}]); Source

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

1. Установить HTML5mode истинной

$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 - набор хэш-PREfix вручную

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

источник

2017-01-14 22:45:51

Я попробовал первый вариант. Проблема остается прежней. – user3085271

Так выглядит [пример в документах для $ route] (https://docs.angularjs.org/api/ngRoute/service/$route)? Кажется, он использует параметр 1, но никогда не устанавливает базовый тег. Как можно было бы выяснить какие-либо из этих вариантов, просто взглянув на эти документы? Это расстраивает, когда пример в документах не сделан правильно ... Я пошел с вариантом 2, и, похоже, это работает для меня. Благодаря! – Hintron

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

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

источник

2017-05-21 17:17:42

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

ответ

Смежные вопросы