javascript — Angular отображает основной вид дважды вместо загрузки правильного шаблона.
У меня проблема с шаблонами Angular — вместо включения правильного шаблона основной вид (вид, который изначально загружается) визуализируется дважды. Потратив большую часть последних 2 дней, пытаясь решить эту проблему, я все равно ничего не получаю.
Более подробное описание:
Я использую Angular для разработки одностраничного приложения для управления контентом сайта. Остальная часть этого сайта построена с помощью Laravel. Angular используется только для системы управления контентом, которая представляет собой отдельное приложение, защищенное HTTP-фильтрами и системой аутентификации Laravel.
Проблема возникает, когда приложение Angular не находится в корневом URL-адресе (например, http://application.dev работает, пока http://application.dev/admin не делает).
Основной код (сокращен до самого необходимого в попытке найти проблему):
/*global angular*/
var App = angular.module('Dashboard', ['ui.router']);
App.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
'use strict';
$locationProvider.html5Mode(true).hashPrefix('!');
$stateProvider.state('statistics', {
url: '/statistics',
templateUrl: 'statistics/index.html'
});
$stateProvider.state('notifications', {
url: '/notifications',
templateUrl: 'notifications/index.html'
});
$urlRouterProvider.when('/', '/statistics');
});
Вид приложения:
<!DOCTYPE html>
<html lang="en" ng-app="Dashboard">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/admin/">
</head>
<body>
<div id="container" class="full">
<header>
<nav>
<ul>
<li><a ui-sref="statistics">Statistics</a></li>
<li><a ui-sref="notifications">Notifications</a></li>
</ul>
</nav>
</header>
<div id="content" ui-view></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<?php echo HTML::script(asset('javascripts/main.js')) ?>
</body>
</html>
Образец шаблона, который по какой-то причине не включен:
<section id="statistics">
<h3>Statistics</h3>
</section>
Файл маршрутизации Laravel:
Route::group(
[
'namespace' => 'Admin',
'prefix' => 'admin'
],
function () {
Route::group(
[
'namespace' => 'Account'
],
function () {
Route::group(
[
'prefix' => 'login'
],
function () {
Route::get('/', [
'as' => 'admin.login',
'uses' => 'LoginController@showLogin'
]);
Route::post('/', [
'uses' => 'LoginController@attemptLogin'
]);
}
);
Route::get('logout', [
'as' => 'admin.logout',
'uses' => 'LogoutController@attemptLogout'
]);
}
);
Route::get('/', [
'as' => 'admin.dashboard',
'before' => 'auth',
'uses' => 'DashboardController@start'
]);
}
);
Каждый раз, когда я использую templateUrl вариант (template очевидно, работает, так как файл не включен), он не включает в себя правильный шаблон. Вместо этого другой запрос отправляется http://application.dev/admin URL, и он по сути дублирует весь вид после получения 200 OK код состояния. Я попытался сузить проблему с помощью инструментов разработчика Chrome — единственное, что необычно, было то, что инициатор запросов — это шаблон (или URL), который должен быть включен нормально. К сожалению, это не очень помогает.
Я немного подозреваю, что проблема может быть вызвана маршрутизацией Laravel или перезаписью URL, но у меня пока не было возможности проверить это. Есть идеи, что может быть причиной такого поведения?
Редактировать:
Добавил routes.php файл на случай, если это может быть причиной этой проблемы.
Решение
Потратив слишком много времени на это, я наконец выяснил, в чем проблема. Как выясняется, когда URL-адрес имеет несколько разделов (как в моей ситуации), перед косой чертой должен быть добавлен прямой слеш. templateUrl значение. В моем случае это должно было быть примерно так: /javascripts/statistics/index.html,
Кажется, такое простое решение, но оно вызвало у меня слишком много головной боли. Я публикую это на тот случай, если кто-нибудь столкнется с подобной проблемой.
Кредит идет в этот ответ.
Другие решения
Других решений пока нет …