Paddy O'Sullivan Paddy O'Sullivan - 1 year ago 226
PHP Question

AngularJS 2 and Laravel 5.2 - Display Different Blade Templates

Ive just managed to get Laravel and AngularJS 2 setup together.. albeit a very simple setup ie I have an main welcome.blade.php file that show as the index page, however I would like to make some kind of navigation where you can switch between pages and angular will pull the info in from various blade templates and this is where I am stuck, I understand how to generate the nav in angular etc but I am not sure what to add to the @component({template:xxxxxxxxxx}) field in order for it to pull in blade templates.. does anyone have any examples of how to render these external templates in the angular components ? below is what i have so far and it injects My First Angular 2 App into the default laravel welcome page.


///<reference path="../../../public/js/angular2/core.d.ts"/>

import {Component} from 'angular2/core';

selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
export class AppComponent { }


///<reference path="../../../public/js/angular2/typings/browser.d.ts"/>

/* the above file fixes an issue with promises etc - was getting loads of errors then found this*/

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'



<!DOCTYPE html>


<script src="{{ url('/') }}/js/es6-shim/es6-shim.min.js"></script>
<script src="{{ url('/') }}/js/systemjs/dist/system-polyfills.js"></script>
<script src="{{ url('/') }}/js/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

<script src="{{ url('/') }}/js/angular2/bundles/angular2-polyfills.js"></script>
<script src="{{ url('/') }}/js/systemjs/dist/system.src.js"></script>
<script src="{{ url('/') }}/js/rxjs/bundles/Rx.js"></script>
<script src="{{ url('/') }}/js/angular2/bundles/"></script>

<script type="text/javascript">

"baseURL": '/js',
"defaultJSExtensions": true,
"packages": {
typescript: {
format: 'register',
defaultExtension: 'js'

System.import('typescript/boot').then(null, console.error.bind(console));
<div class="container">
<div class="content">
<div class="title">Laravel 5</div>

Answer Source

Maybe I am very mistaken, but from what I understand Angular cannot render blade templates? They are first rendered by Laravel before being sent back. Then Angular is initialized and works with the HTML document. I typically like to let Angular handle all my routing and make it a SPA by just redirecting any undefined routes in routes.php to a single index page where Angular's router will render different views. Sadly, I have not made the transition yet to Angular 2 so I'm not sure how the router is setup. But this is just a route file I use that has a "catch-all" so to speak that redirects to the index page.

Route::group(["prefix" => "api"], function() {
Route::resource("users", "UsersController");
Route::group(["prefix" => "users"], function() {
    Route::get("{id}/places", "UsersController@getPlaces");
    Route::get("{id}/searches", "UsersController@getSearches");
Route::resource("places", "PlacesController");
Route::resource("searches", "SearchesController");
Route::group(["prefix" => "auth"], function() {
    Route::get("/", "AuthController@GetAuth");
    Route::get("logout", 'Auth\AuthController@logout');

Route::get('/', 'RedirectController@toAngular');

// Authentication Routes...
Route::get('login', 'RedirectController@toAngular'); // Override, let Angular handle login form
Route::post('login', 'Auth\AuthController@login');
Route::get('logout', 'Auth\AuthController@logout');

// Registration Routes...
Route::get('register', 'RedirectController@toAngular');
Route::post('register', 'Auth\AuthController@register');

// Password Reset Routes...
Route::get('password/reset/{token?}', 'Auth\PasswordController@showResetForm');
Route::post('password/email', 'Auth\PasswordController@sendResetLinkEmail');
Route::post('password/reset', 'Auth\PasswordController@reset');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download