AngularJS - Lost html после обновления страницы

Я столкнулся с большой проблемой с моим простым угловым приложением. После обновления страницы все html потеряны!
Моя проблема не в угловых данных и/или данных сеанса/локального хранения, а только в HTML.
Например, при доступе к домашней странице с помощью кнопки NavBar «Home» это выглядит следующим образом: AngularJS - Lost html после обновления страницы

После или выписки кнопки обновления или f5 «Домашняя страница» внутри тега h1 теряется:

Поэтому вопрос - Что не так с моей конфигурацией маршрутизации или, возможно, это ожидаемое поведение для углового? Я много искал эту проблему, но большинство тем посвящено сохранению данных в $ localStorage или $ sessionStorage. Эта проблема возникает для всех моих страниц.

EDIT Привет, ребята, спасибо за ваши комментарии.

@devqon - Я не думаю, что здесь требуется месторасположение. Я использую routeProvider. я изменил немного конфигурации битой маршрутизации: заменить «» с «» и положить в противном случае заявление в конце конфигурации:

<code> 
app.config(function($routeProvider, $httpProvider) { 
    $routeProvider.when("/", { 
     templateUrl : "src/html/home.html", 
     controller : "HeaderCtrl" 
    }) 
    .when("/home", { 
     templateUrl : "src/html/home.html", 
     controller : "HomeCtrl" 
    }) 
    .when("/flights", { 
     templateUrl : "src/html/flights.html", 
     controller : "FlightCtrl" 
    }) 
    .when("/customers", { 
     templateUrl : "src/html/customers.html", 
     controller : "CustomerCtrl" 
    }) 
    .when("/login", { 
     templateUrl : "src/html/login.html", 
     controller : "HeaderCtrl" 
    }) 
    .when("/flight_choose", { 
     templateUrl : "src/html/flight_choose.html", 
     controller : "FlightChooseCtrl" 
    }).otherwise("/home"); 

    $httpProvider.interceptors.push('airlinesRequestInterceptor'); 
}); 
</code>

Как Вы можете видеть, что я создал HomeCtrl который очень просто:

<code> 
app.controller('HomeCtrl', function() {}); 
</code>

Дом.html находится на первом скриншоте. @Gustavo Gabriel - Вы могли бы уточнить? :) Вышеупомянутых изменения не решить проблему :(

EDIT 2

@Kai - спасибо Вам за Ваш ответ После Вашей консультации я изменил конфигурацию, и теперь он выглядит следующим образом: app.config(function($routeProvider, $httpProvider) { $routeProvider.when("/", { templateUrl : "src/html/home.html", controller : "HomeCtrl" }) .when("/flights", { templateUrl : "src/html/flights.html", controller : "FlightCtrl" }) .when("/customers", { templateUrl : "src/html/customers.html", controller : "CustomerCtrl" }) .when("/login", { templateUrl : "src/html/login.html", controller : "HeaderCtrl" }) .when("/flight_choose", { templateUrl : "src/html/flight_choose.html", controller : "FlightChooseCtrl" }).otherwise("/");

 $httpProvider.interceptors.push('airlinesRequestInterceptor');

}); I. «ве также измененную ссылку NavBar для дома: проблема все еще происходит, так что, может быть, я misanderstood Вы Любые идеи

Спасибо заранее, 0123.?Michal

источник

2016-10-31 www

Вы должны включить '$ locationProvider.otherwise (.. defaultUrl ..)', чтобы угловые знали, если ничего не соответствует, перейдите к URL-адресу по умолчанию (возможно, домой) – devqon

И как выглядит ваш home.html и HeaderCtrl? – devqon

Попробуйте $ routeProvider.when ('', а затем поместите домой ... –

Похоже, я создал директивы для прикрепления частичных частей html, которые не очень хорошо работали с маршрутизацией и ng-view. Как вы видели на мой первый пост, мой index.html тело выглядело так:

<code> 
<body> 
    <div class="wrapper"> 
     <ng-header></ng-header> 
     <ng-content></ng-content> 
     <ng-footer></ng-footer> 
    </div> 
</body> 
</code>

Я просто хотел, чтобы мой index.html как можно более простым. Я создал html-файлы для заголовка, содержимого, нижнего колонтитула и директив для их инъекции. Например, директива по содержанию выглядела так:

<code> 
app.directive('ngContent', function() { 
    return { 
    restrict: 'A', 
    templateUrl: '/src/html/content.html' 
    } 
}); 
</code>

Когда я изменил выше директивы к этому, проблема с потерей HTML после освежающей страницы исчезли:

<code> 
app.directive('ngContent', function() { 
    return { 
    template: '<div id="content">'+ 
    '<div ng-view></div>'+ 
    '</div>' 
    }; 
}); 
</code>

Порывшись немного, я нашел для этого сценария была проблема для угловой команды, и для этого есть простые решения: https://github.com/angular/angular.js/issues/6812

В соответствии с тем, что @jswright и @saidimu писали:

Если функция создания ng-view задерживается (через ng-include), то также создается задержка создания маршрута $ route. Это означает, что $ route пропустит событие изменения местоположения.

Fix: Run $ функция обновления маршрута на конкретизации (а не только на события изменения местоположения)

Так что для того, чтобы решить эту проблему Вы должны только вводить $ маршрут в перспективе функции.

<code> 
app.run(['$route', function($route) { 

}]); 
</code>

Я нашел интересный пост о $ маршруту:

$route Must Be Injected In Order To Enable The $routeChangeSuccess Event In AngularJS

Еще раз, Спасибо ребята за помощь.

источник

2016-11-01 00:48:32 www

Ваше включение HeaderCtrl в ваши Маршруты вызывает проблемы, поскольку вы указываете два контроллера для одного и того же/домашнего пути. Измените controller на .when ("/" на HomeCtrl и просто укажите HeaderCtrl в своем HTML-заголовке в качестве атрибута, ng-controller="HeaderCtrl". Я сделал ту же ошибку раньше.

источник

2016-10-31 18:11:30 Kai

Привет, я добавил Edit. – www

Попробуйте изменить ваш .otherwise, чтобы выглядеть как ' .otherwise ({ \t \t \t RedirectTo: «/» \t \t}); ' – Kai

Привет Кай, я буду размещать answear в несколько минут, я нашел решение, и оно не имеет отношения с конфигурацией маршрутизации, но мое недоразумение. директив: O – www

AngularJS - Lost html после обновления страницы

ответ

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