We send Angular 2 routs through Laravel 5 router

After reading the article " Threshold of entry into Angular 2 - theory and practice " I had a desire to show how you can forward all Angular 2 routs through the Laravel 5 router.

Next idea

• in the resources/views/backend directory there will be a view, which is the entry point for all Angular 2 routes. For each Angular 2 route, the Laravel 5 router will redirect us to this view;
• under each Angular 2 route in the @RouteConfig directive @RouteConfig we will have to create a copy in the Laravel router;
• All Angular 2 routes, which pull templates, will look like /templates/SomeComponent.main , and will be requested by Laravel 5 router along the way resources/views/frontend/SomeComponent/main.blade.php

Let's get started
')
Not to get confused, we divide all the views in the resources/views directory into 2 subfolders:

• backend - for views that Laravel 5 uses directly;
• frontend (the article will use the frontend , but someone wants to rename, for example, templates ) - for all the templates that will be used in Angular 2.

1) Front-end

Suppose we have the app.component.ts root component already created, as well as 2 components: components/MainComponent.ts , which will be loaded by default, and components/EditComponent.ts .

We want to specify 2 routes in the @RouteConfig directive: one '/' with the name Home , leading to the MainComponent , and the second '/ edit' with the name Edit , leading to the 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 () {} } 

Next, you need to set their components for the components:

 //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

First of all, in the Laravel 5 router, we will duplicate all the main routes of Angular 2. We will direct all such routes to the AngularRoutesController .

 //routes.php Route::get('/', [ 'uses' => 'MyApp\AngularRoutesController@index', 'as' => 'ngHome' ]); Route::get('/edit', [ 'uses' => 'MyApp\AngularRoutesController@index', 'as' => 'ngEdit' ]); 

In AngularRoutesController we will simply render the view that is the entry point for Angular 2:

 public function index() { return view('backend.content'); } 

The views/backend/content.blade.php should contain a tag into which the Angular 2 application will be loaded, we have this app .

 @extends('backend.layout') @section('backend.content') <app> @include('backend.loading') </app> @include('backend.scripts-import') @stop 

For Angular 2 routes leading to templates, create another 1 Laravel 5 route that will redirect the request to the AngularTemplatesController controller:

 //routes.php Route::get('/templates/{template}', [ 'uses' => 'MyApp\AngularTemplatesController@index', 'as' => 'ngTemplates' ]); 

Inside AngularTemplatesController we need to add to $template , which contains part of the path to the template view, the name of our Angular 2 template folder is frontend .

 public function index($template) { $templatePath = 'frontend.' . $template; if (!view()->exists($templatePath)) { throw new NotFoundHttpException(); } return view($templatePath); } 

Total

As a result, all Angular 2 templates that will be requested by the URL of the form /templates/SomeComponent.main will be taken along the path of the form resources/views/frontend/SomeComponent/main.blade.php . We can use Blade's template engine in Angular 2 templates.

Nuances

Since the Blade template and Angular 2 templates use the same syntax with double curly braces {{ ... }} , for correct processing of double curly braces related to Angular 2, it will be necessary to put the @ symbol in front of them.
This symbol will allow the Blade template engine to ignore such constructions, for subsequent analysis of Angular 2.

 <div>{{ bladeVariable }}</div> <li *ngFor="#file of files" class="list-group-item"> @{{ file.name }} </li> 

Repository with an example.