- PVSM.RU - https://www.pvsm.ru -
После прочтения статьи "Порог вхождения в Angular 2 — теория и практика [1]" у меня появилось желание показать, как можно пробросить все роуты Angular 2 через роутер Laravel 5.
Идея следующая
resources/views/backend
будет лежать представление, являющееся точкой входа для всех роутов Angular 2. Для каждого роута Angular 2, роутер Laravel 5 будет нас перенаправлять на это представление;@RouteConfig
нам придется создать копию в роутере Laravel;/templates/SomeComponent.main
, и будут запрашиваться роутером Laravel 5 по пути вида resources/views/frontend/SomeComponent/main.blade.php
Приступим
Чтобы не запутаться, разобьем все представления в директории resources/views
на 2 подпапки:
backend
— для представлений, которые Laravel 5 использует напрямую;frontend
(в статье будет использоваться frontend
, но кто-то пожелает переименовать, например в templates
) — для всех шаблонов, которые будут использоваться в Angular 2.1) Front-end
Допустим, у нас есть уже созданный root-компонент app.component.ts
, а так же 2 компонента: components/MainComponent.ts
, который будет загружаться по умолчанию, и components/EditComponent.ts
.
Мы хотим указать в директиве @RouteConfig
2 роута: один '/' с именем Home
, ведущий на MainComponent
, а второй '/edit' с именем Edit
, ведущий на EditComponent
.
//app.component.ts
@RouteConfig([
{
path: '/',
name: 'Home,
component: MainComponent,
useAsDefault: true
},
{
path: '/edit',
name: 'Edit',
component: EditComponent
}
])
@Component({
'directives': [ROUTER_DIRECTIVES],
'selector': 'app',
'template': '<router-outlet></router-outlet>'
})
export class AppComponent {
constructor () {}
}
Далее необходимо задать для компонентов их шаблоны:
//components/MainComponent.ts
@Component({
'selector': 'state-template',
'templateUrl': '/templates/MainComponent.main'
})
export class MainComponent {
...
}
//components/EditComponent.ts
@Component({
'selector': 'state-template',
'templateUrl': '/templates/EditComponent.main'
})
export class EditComponent {
...
}
2) Back-end
Первым делом, в роутере Laravel 5 продублируем все основные роуты Angular 2. Все подобные роуты мы будем направлять в AngularRoutesController
.
//routes.php
Route::get('/', [
'uses' => 'MyAppAngularRoutesController@index',
'as' => 'ngHome'
]);
Route::get('/edit', [
'uses' => 'MyAppAngularRoutesController@index',
'as' => 'ngEdit'
]);
В AngularRoutesController
мы будем просто рендерить представление, являющееся точкой входа, для Angular 2:
public function index()
{
return view('backend.content');
}
Представление views/backend/content.blade.php
должно содержать в себе тег, в который будет грузиться Angular 2 приложение, у нас это app
.
@extends('backend.layout')
@section('backend.content')
<app>
@include('backend.loading')
</app>
@include('backend.scripts-import')
@stop
Для роутов Angular 2, ведущих к темплейтам, создадим еще 1 Laravel 5 маршрут, который будет перенаправлять запрос на контроллер AngularTemplatesController
:
//routes.php
Route::get('/templates/{template}', [
'uses' => 'MyAppAngularTemplatesController@index',
'as' => 'ngTemplates'
]);
Внутри AngularTemplatesController
нам необходимо добавить к $template
, в котором содержится часть пути к представлению с шаблоном, имя нашей папки с шаблонами Angular 2 — frontend
.
public function index($template)
{
$templatePath = 'frontend.' . $template;
if (!view()->exists($templatePath)) {
throw new NotFoundHttpException();
}
return view($templatePath);
}
Итог
В результате, все Angular 2 шаблоны, которые будут запрашиваться по URL-адресу вида /templates/SomeComponent.main
будут браться по пути вида resources/views/frontend/SomeComponent/main.blade.php
. Мы сможем использовать шаблонизатор Blade в шаблонах Angular 2.
Нюансы
Поскольку в шаблонизаторе Blade и в шаблонах Angular 2 используется одинаковый синтаксис с двойными фигурными скобками {{ ... }}
, для корректной обработки двойных фигурных скобок, относящихся к Angular 2, необходимо будет ставить перед ними символ @
.
Этот символ позволит шаблонизатору Blade игнорировать такие конструкции, для последующего из разбора Angular 2.
<div>{{ bladeVariable }}</div>
<li *ngFor="#file of files" class="list-group-item">
@{{ file.name }}
</li>
Репозиторий [2] с примером.
Автор: sanex3339
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/angularjs/114124
Ссылки в тексте:
[1] Порог вхождения в Angular 2 — теория и практика: https://habrahabr.ru/post/278523/
[2] Репозиторий: https://github.com/sanex3339/laravel-5-angular-2-example
[3] Источник: https://habrahabr.ru/post/278599/
Нажмите здесь для печати.