Angular 2 and Laravel 5.2 - Display Different Blade Templates

Question

I've just managed to get Laravel and AngularJS 2 setup together.. albeit a very simple setup ie I have a main welcome.blade.php file that shows 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.

app.components.ts

///<reference path="../../../public/js/angular2/core.d.ts"/> 
import {Component} from 'angular2/core';
@Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

boot.ts

///<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 http://stackoverflow.com/questions/35382157/typescript-build-getting-errors-from-node-modules-folder*/

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

bootstrap(AppComponent);

welcome.blade.php

 <!DOCTYPE html>
 <html>
     <head>
       <title>Laravel</title>
        <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/angular2.dev.js"></script>



        <script type="text/javascript">

            System.config({
              "baseURL": '/js',
              "defaultJSExtensions": true,
              "packages": {
                typescript: {
                  format: 'register',
                  defaultExtension: 'js'
                }
              }
            });

            System.import('typescript/boot').then(null, console.error.bind(console));
          </script>
            </head>
            <body>
                <div class="container">
                    <div class="content">
                        <div class="title">Laravel 5</div>
                        <my-app>Loading...</my-app>
                    </div>
                </div>
            </body>
        </html>

Jordan · Accepted Answer · 2016-04-27T16:06:35.797

Maybe I am very mistaken, but from what I understand Angular cannot render blade templates? They are first rendered by Laravel before being sent as regular HTML with whatever was filled in on the template. 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');

Thanks Jordan, the laravel routing should be no problem its trying to find any documentation on how to serve it with angular 2 thats the problem, I cant seem to find anything. Angular 1 didnt sit well with me so I never really got into it but Angular 2 makes more sense at least from a syntax point of view so Im trying to get my head around making it work with laravel routing somehow.. — , Apr 27 '16 at 10:41

Angular 2 and Laravel 5.2 - Display Different Blade Templates

1 Answers1