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.
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.
|
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
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.
|
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.
c:\xampp\htdocs\angular\public>bower install angularc:\xampp\htdocs\angular\public>bower install angular-route –savec:\xampp\htdocs\angular\public>bower install angular-cookies –savec:\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
|
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.
|
1 2 3 |
<?php Route::get('/', function () { return view('master'); }); |
Next step is to create app.js file under resources/views/assets/js.
|
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
|
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.
|
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.
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.
Leave a Reply