CodeIn House

  • Laravel
  • WordPress
  • jQuery
  • Javascript
  • Contact
Home   Javascript   How to Setup AngularJS and Integrate into laravel to Create ...

How to Setup AngularJS and Integrate into laravel to Create SPA ( Single Page Application ) ?

January 23, 2017 by SNK

AngularJS is the perfect for an Single Page Application. If you want to know what type of single page application it creates, Google and its products like gmail are good example of it.

I have been using laravel for a while and it was bugging me in the installation part.

Finally fixed it and thought i should share so that you guys don’t have to face any problem on its installation part.

Lets get Started.

First thing first, to integrate laravel into angularJS we need to install few things :-

  • Fresh copy of laravel.
  • NodeJS and its package manager (NPM) [official link here].
  • Git [official link here].

Install all these programs at first. We need to have nodeJS server and its package manager to install angular & its routes.

Using Git we can fetch all package from git Repository.

Laravel by default comes with vue.js installed inside its application, to install angular, we first need to remove all the files and dependencies of the vuejs which is inside the laravel.

If you go inside laravel application folder you will get many directories. We need to remove everything that is related to vueJS or else while using gulp we will be reinstalling VueJS, and Angular will get crashed.

So, if you take a look at below image, there are these folders inside our laravel app, especially in laravel 5.3.

folders inside the laravel application

We need to remove these files and certain lines of code inside package.json & need to edit some of the lines. Check below code for more detail.

package.json
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9", --> rename this to "laravel-elixir":"*",
    "lodash": "^4.16.2",
    //"laravel-elixir-vue-2": "^0.2.0",------------|
    //"laravel-elixir-webpack-official": "^1.0.2", |==> Remove or comment these lines
    //"vue": "^2.0.1",                             |
   // "vue-resource": "^1.0.3"---------------------|
  }
}

If you have followed everything till now, now its time to open up your command-line or terminal and start to install node and its dependencies.

Open your your command prompt and navigate to your project folder.  In my case, i have kept my project under c:/xampp/htdocs/angular.

First we are going to install node modules inside our application. So use this command below to install node modules using npm (node package manager).

C:\xampp\htdocs\angular>npm install.

Wait while it install all node modules and dependencies in your laravel application.

We are going to use bower, since it automatically downloads and install all the packages that we need like angular, bootstrap jquery and all other necessary files we need. Bower is just the package manager to download packages from git repository.

If you want more information on bower you can visit this link.

Now,lets navigate to public directory of our laravel application and install bower by following the steps below :-

C:\xampp\htdocs\angular\public> npm install bower

C:\xampp\htdocs\angular\public> bower init

using bower init on command prompt

Calling bower init from the command-line creates bower.json  into your application public folder  file that helps to add dependencies and will list of it to bower.json file.

bower.json
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "public",
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

Now, again back to command prompt inside your laravel application public directory. We are going to install angular, boostrap and jquery. Using Bower we can do it very quickly. Just use the below commands one by one serially.

  1. c:\xampp\htdocs\angular\public> bower install angular
  2. c:\xampp\htdocs\angular\public> bower install angular-route –save
  3. c:\xampp\htdocs\angular\public> bower install angular-cookies –save
  4. c:\xampp\htdocs\angular\public> bower install bootstrap –save

 

With all these commands executed you will have angular its routes, cookies and bootstrap installed ready for use. Now its time to create page layout.

Go to application/resources/views and create a new file called master.blade.php

master.blade.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Welcome to Simple Laravel Application</title>
<link rel="stylesheet" type="text/css" href="{{ asset('bower_components/bootstrap/dist/css/bootstrap.min.css') }}">
</head>
<body>
<div class="container">
</div>
 
 
<script type="text/javascript" src="{{ asset('bower_components/angular/angular.min.js') }}" />
<script type="text/javascript" src="{{ asset('bower_components/angular-route/angular-route.min.js') }}" />
<script type="text/javascript" src="{{ asset('bower_components/angular-cookies/angular-cookies.min.js') }}" />
</body>
</html>

Go to application routes/web.php and add your new view template.

web.php
PHP
1
2
3
<?php Route::get('/', function () {
    return view('master');
});

Next step is to create app.js file under resources/views/assets/js.

app.js
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Main application controller
 
var myApp = angular.module('myApp',['ngRoute','ngCookies']);
 
myApp.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {
$routeProvider.when('/',{
templateUrl:'templates/login.html',
controller:'frontendController'
});
 
$routeProvider.when('/dashboard',{
templateUrl:'templates/dashboard.html',
controller:'frontendController'
});
 
$routeProvider.when('/logout',{
templateUrl:'templates/logout.html',
controller:'frontendController'
});
 
$routeProvider.otherwise('/');
}
]);

Next step is to create html files. I have created 3 files called login.html dashboard.html & logout.html under the public folder inside new folder called templates.

Another step is to create controller. create new js file inside resources/assets/js/controllers/ as frontendControllers.js and put below code inside it

frontendController.js
JavaScript
1
2
3
myApp.controller('frontendController', ['$scope', function($scope){
}]);

Now time to mix scripts using laravel elixir. Open gulpfile.js from app root directory and add this code.

gulfile.js
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var elixir = require('laravel-elixir'); // change const to var ! imporant
 
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
 
elixir(mix => {
    mix.sass('app.scss');
 
    mix.scripts(['app.js'],'public/js/app.js');
 
 
    mix.scripts(['controllers/frontendController.js'],'public/js/controllers.js');
});

Finally, go to command prompt and application root directory and hit gulp to mix js scripts so that your new scripts will get merged and get created inside public/js folder.

using gulp to merge scripts

Run the browser and hover over to three routes we have created inside app.js to check if the routing works. If you have any problem, list them out in the comments.

SHARE ON
Buffer

Enjoyed this article?

Like us on

Javascript jQuery Laravel angular and laravel integration angular js laravel app

Avatar for SNK

About SNK

Hello Welcome to my Blog. I develop Websites Using Laravel Framwork & WordPress. Get Latest updates on Facebook | Twitter

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Connected !! With Us

TOP POSTS

  • How to Setup Spring MVC Project From Scratch in Intellij IDEA ?
  • Spring Configuration Class in JAVA [Class VS XML Config]
  • Annotations Based Configuration in Spring Framework
  • How to Configure Spring Framework with XML Configurations?
  • How to Remove Project Name from URL in JSP Project in Intellij IDEA ?

TUTORIALS TILL DATE

  • September 2022 (6)
  • June 2021 (7)
  • October 2020 (5)
  • September 2020 (6)
  • September 2018 (14)
  • August 2018 (3)
  • July 2018 (4)
  • March 2018 (8)
  • February 2018 (5)
  • January 2018 (1)
  • December 2017 (2)
  • August 2017 (8)
  • May 2017 (1)
  • April 2017 (1)
  • March 2017 (4)
  • February 2017 (3)
  • January 2017 (4)

CATEGORIES

  • Angular (2)
  • CSS3 (3)
  • D3 (3)
  • HTML5 (7)
  • JAVA (11)
  • Javascript (20)
  • jQuery (8)
  • Laravel (35)
  • Others (3)
  • PHP (11)
  • Spring (2)
  • WordPress (10)

Top Categories

  • Angular
  • CSS3
  • D3
  • HTML5
  • JAVA
  • Javascript
  • jQuery
  • Laravel
  • Others
  • PHP
  • Spring
  • WordPress

Get in Touch

DMCA.com Protection Status

Recent Articles

  • How to Setup Spring MVC Project From Scratch in Intellij IDEA ?
  • Spring Configuration Class in JAVA [Class VS XML Config]
  • Annotations Based Configuration in Spring Framework
  • How to Configure Spring Framework with XML Configurations?
  • How to Remove Project Name from URL in JSP Project in Intellij IDEA ?

© 2012-22 CodeIn House.  •  All Rights Reserved.