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 файл на случай, если это может быть причиной этой проблемы.

1

Решение

Потратив слишком много времени на это, я наконец выяснил, в чем проблема. Как выясняется, когда URL-адрес имеет несколько разделов (как в моей ситуации), перед косой чертой должен быть добавлен прямой слеш. templateUrl значение. В моем случае это должно было быть примерно так: /javascripts/statistics/index.html,

Кажется, такое простое решение, но оно вызвало у меня слишком много головной боли. Я публикую это на тот случай, если кто-нибудь столкнется с подобной проблемой.

Кредит идет в этот ответ.

5

Другие решения

Других решений пока нет …

А ты уже прошел курс программирования? Супер скидка!
Прокачать скилл $$$
×