How to serve a single page AngularJS app from Laravel views/templates directory?

Question

I am trying to combine a SPA angular app based off of Mobile Angular UI that can take advantage of Laravel's features like csrf protection. I can place the entire AngularJS app in Laravel's public/ directory, but I'm not sure if that is the right way of doing it.

What I'm looking for is guidace on how to be able to serve an index.php that can interact with Laravel from which a single page AngularJS app would take over. In my case, Laravel is an API for the single page app.

The problem:

Laravel route is defined for /app3 which returns index.php from templates/

Of course, I'd prefer to define the route for /app, however, all AngularjS assets are located in public/app/ and requesting app/ returns a default directory listing since there is no index.php/html in /app. Simply placing index.php in public/ results in a blank page since for some reason, the PHP never gets parsed by the server. Changing index.php to index.html works, but then how can I take advantage of things like Laravels csrf protection?

index.php loads all AngularJS resources correctly and without console errors.
Clicking on a sidebar link from index.php, which normally returns an AngularJS template which should be placed inside index.php, instead, loads the default directory listing shown when a directory contains no index.php/html.

Why do the AngularJS templates fail to load inside index.php?

What is the best way to combine a single page AngularJS app with Laravel?

Why can't you turn the HTML markup into a View and render it within the controller leveraged by the route? AngularJS is just HTML markup and JavaScript, you should be able to hook into your header variable and include the Angular JS, then put the Angular Markup into a view, and return the angular view from your controller when it hits the route that calls the controller, which in this case is /app3 — Ohgodwhy
– Ohgodwhy, Commented Dec 13, 2014 at 4:35
@Ohgodwhy, Please elaborate. I'm not sure I understand. Is a Laravel defined route necessary for every AngularJS templateUrl? How could this be configured specifically? — Raphael Rafatpanah
– Raphael Rafatpanah, Commented Dec 13, 2014 at 4:37
Are you saying to include all the HTML & AngularJS code into a Laravel controller? If I understand correctly, isn't that a bit ugly? — Raphael Rafatpanah
– Raphael Rafatpanah, Commented Dec 13, 2014 at 4:40
I've given an example below. For integrating your Angular Application I do not believe my method is ugly, but I have been mistaken many times before. :D — Ohgodwhy
– Ohgodwhy, Commented Dec 13, 2014 at 4:44
Here is example for new versions of Angular integrated in Laravel github.com/toni-rmc/laravel-angular-integration — toni rmc
– toni rmc, Commented Jul 12, 2017 at 5:01

Raphael Rafatpanah · Accepted Answer · 2014-12-13 05:25:48Z

Finally got it. The problem was that my AngularJS route links were wrong.

Here are my working configurations:

Laravel
routes.php

...
$router->get('/app3', function() {
    return view('app3.index');
});

AngularJS
index.php

<base href="/" />

...

<!-- Sidebars -->
<div ng-include="'/app/sidebar.html'" 
        ui-track-as-search-param='true'
        class="sidebar sidebar-left"></div>

demo.js

  app.config(function($routeProvider) {
  $routeProvider.when('/',              {templateUrl: 'app/home.html', reloadOnSearch: false});
  $routeProvider.when('/app/',              {templateUrl: 'app/home.html', reloadOnSearch: false});
  $routeProvider.when('/app/scroll',        {templateUrl: 'app/scroll.html', reloadOnSearch: false}); 
  $routeProvider.when('/app/toggle',        {templateUrl: 'app/toggle.html', reloadOnSearch: false}); 
  $routeProvider.when('/app/tabs',          {templateUrl: 'app/tabs.html', reloadOnSearch: false}); 
  $routeProvider.when('/app/accordion',     {templateUrl: 'app/accordion.html', reloadOnSearch: false}); 
  $routeProvider.when('/app/overlay',       {templateUrl: 'app/overlay.html', reloadOnSearch: false}); 
  $routeProvider.when('/app/forms',         {templateUrl: 'app/forms.html', reloadOnSearch: false});
  $routeProvider.when('/app/dropdown',      {templateUrl: 'app/dropdown.html', reloadOnSearch: false});
  $routeProvider.when('/app/drag',          {templateUrl: 'app/drag.html', reloadOnSearch: false});
  $routeProvider.when('/app/carousel',      {templateUrl: 'app/carousel.html', reloadOnSearch: false});
  $routeProvider.when('/app/toggleLegacy',  {templateUrl: 'app/toggleLegacy.html', reloadOnSearch: false});

sidebar.html

  <a class="list-group-item" href="/app3/#/app">Home <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/scroll">Scroll <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/toggle">Toggle <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/tabs">Tabs <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/accordion">Accordion <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/overlay">Overlay <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/forms">Forms <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/dropdown">Dropdown <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/test/invoice">Invoice <i class="fa fa-chevron-right pull-right"></i></a>
  <a class="list-group-item" href="/app3/#/app/test">Test <i class="fa fa-chevron-right pull-right"></i></a>

Hopefully this can help someone who wants to combine mobile-angular-ui with Laravel!

Thanks to @Ohgodwhy for clarifying that the AngularJS templates need to be in the public/ directory.

Ohgodwhy · Accepted Answer · 2014-12-13 04:40:19Z

1

So let's say you have this route:

Route::get('/app3', 'RouteController@serveAngular');

Then you have a controller

class RouteController extends BaseController{
    public function serveAngular(){
        return View::make('angular/index');
    }
}

Then you've got

-views
    -angular
        -index.blade.php

Then in your index.blade.php you just include your angular markup

<div ng-app="myApp">

You are not required to put the ng-app definition at the top of the HTML markup, just the top of the application container.

Of course, you'd also have to include your AngularJS so your primary template would contain something like:

@yield('scripts')
</head>

That way you can easily hook into it within your angular template

@section('scripts')
<script src="/path/to/my/AnguularJS.js"></script>
@stop

Hope this helps.

answered Dec 13, 2014 at 4:40

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

7 Comments

Raphael Rafatpanah Over a year ago

That is kind of what I have already except without the controller. Laravel's route definition links a closure right there and returns index.php (which could easily be index.blade.php), however, my problem with this method is that the AngularJS templates are not being included within index.php, but as a separate link.

Ohgodwhy Over a year ago

I'm not sure what you mean by AngularJS templates are not being included within index.php, but as a separate link. Can you pastebin something for me so I can see what we're talking about?

Raphael Rafatpanah Over a year ago

Please visit http://persianturtle.com/app3/ and click on a link from the sidebar. Perhaps this is the easiest way to explain what my problem is.

Ohgodwhy Over a year ago

@RaphaelRafatpanah Shouldn't those links on the left autopopulate the data on the right instead of reloading the page?

Raphael Rafatpanah Over a year ago

Yes. Unfortunately, I have not been able to figure out how to configure the SPA so that it does autopopulate inside. Do all the template files need to be located in the public/ directory? If so, what should the <base href> be set to?

|

Joel Fernandes · Accepted Answer · 2017-02-28 07:25:43Z

0

You can do something like this in the public folder

Content of each directories in the public folder:

public/app : Contains all AngularJS related JavaScript files (controllers and lib directories)
public/app/controllers: Contains all AngularJS controllers
public/app/lib : This directory will contain all AngularJS core files. You can also load AngularJS from a CDN network. 
public/css : Contains all CSS files.
public/js : Contains all regular JavaScript files for our UI.

You can have a read at a complete article at

http://deepdivetuts.com/create-laravel-and-angular-single-page-application-for-beginners-only

answered Feb 28, 2017 at 7:25

Joel Fernandes

1611 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to serve a single page AngularJS app from Laravel views/templates directory?

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related