Integrating AngularJS into Laravel 5.1
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.
Do you have any website which has laravel as backend and angular as the front end? How you do routing in angular? We have two ways to do routing, one using laravel and another using angular which one to choose and why
Hi, thanks for this!!
I have trouble understanding why you created app.js in the first step? How did you connect that file with angular.js later?
Could you post a laravel-angular project with source code?
Cheers