Integrating AngularJS into Laravel 5.1

Published Jun 26, 2015Last updated Feb 09, 2017

This is not a tutorial about why AngularJS or Laravel is the best choice for your project, but a very simple step-by-step instructions on how to get AngularJS working in the latest (at the time of this article) version of Laravel.

Step 1

Starting off with a fresh installation of Laravel 5.1, I will be working in the resources directory of our application.

Let us create another folder inside of resources called scripts to house all of our AngularJS scripts. Inside of scripts create a JavaScript file called app.js

Our folder structure now looks like:

resources
 - assets
 - lang
 - scripts
    - app.js
 - views
    - welcome.blade.php

Step 2

We are going to use Gulp to concatenate all of our AngularJS scripts into a small file (which will be minified in production) and move it into Laravel's public file.

Here is how we do that:

var elixir = require('laravel-elixir');

elixir(function(mix) {

    // Application Scripts
    mix.scripts([
        '../../../resources/scripts/app.js'
    ], 'public/js/app.js');

});

Step 3

I'm using the Material Design AngularJS library in my application and have included it into the project using bower. Here is the link for documentation on installing it: https://github.com/angular/material

Let's add app.js, created after running gulp, to our welcome.blade.php blade file located inside /resources/views/. Include it with script tags just before the closing body tag.

Register the AngularJS application by amending the opening body tag as follow <body ng-app="app">

Step 4

Because Laravel and AngularJS use the exact same data render tags, we can change the tags of AngularJS to accommodate both frameworks.

The following snippet is the content of app.js

var app = angular.module('app', ['ngMaterial']);

app.config(function ($interpolateProvider) {

    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');

});

Step 5

Laravel can now send information to the page as you would in a normal application or use AngularJS $http requests to Laravels' resources route to interact with backend services.

routes.php

Route::resources('foo', 'FooController');

Bar.js

app.factory('Bar', function ($http) {

    var getBar = function(){

        $http.post(window.location.protocol + '//' + window.location.hostname + '/foo')
            .success(function(response){
                // Do something with response
            });
            
    };

    return {
        getBar: getBar
    }

});

Conclusion

Through the use of AngularJS controllers, we can now create pages and/or modules in our application.

Discover and read more posts from Gerrit van Huyssteen
get started
Enjoy this post?

Leave a like and comment for Gerrit