Laravel 6 installation with Angular

  • 18-03-2022
  • 1434
  • Angular JS
  • Haresh Chauhan

My subscribers told me how to install laravel and angular so I am writing this post.

A lot of packages are available in the market for install laravel and also for angular , but that is not working properly.

After a few days of research, I am telling you how to install laravel and angular.

If you start this post from the middle, then you will not understand how to install laravel or angular. So I request you to start from begin to end.

Laravel 6 installation with Angular

Now, We start installation laravel and angular. before that, I would like to let we know basic requirements of the angular and laravel.

Requirements :
  • PHP 7.2 or above
  • Laravel 6
  • Node JS

We need to right now fresh laravel 6.0 application install.

After download laravel 6.0 application open your project directory in your command prompt and follow these steps.

Step 1 : Here we need to install bower and initialize

-> npm install bower -g-> bower init

Step 2 : In this step we install gulp

-> npm install gulp-cli -g
-> npm install gulp -D
-> npx -p touch nodetouch gulpfile.js
-> npm install --global gulp            (Using this command you can gulp set globally)
-> npm install                          
-> npm install laravel-elixir --save-dev           (Using This command install laravel-elixir)

Note : When you get error from gulp version you can use this command and solve it.

-> npm install --save-dev gulp@3.9.1

After gulp installation we need to install angular.

Before the install angular move main directory to public directory follow this command.

cd public

Step 3 : Install Angular

-> bower install angular
-> bower install angular-route --save
-> bower install angular-cookies --save
-> npm install -g angular-cli

Step 4 : Create Route

In this step we have to create route.

routes/web.php

Route::get('/', function () {
    return view('master-page');
});

Create two file in public/js directory.

1) app.js

2) controllers.js

Here we must need to create master page follow resources/views/ directory.

master-page.blade.php

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script> var baseUrl = "{{ url('/') }}/";</script>
</head>
    <body ng-controller="userController">
        <div ng-view></div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="{{ asset('bower_components/angular/angular.min.js') }}"></script>
        <script src="{{ asset('bower_components/angular-route/angular-route.min.js') }}"></script>
        <script src="{{ asset('bower_components/angular-cookies/angular-cookies.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
        <script type="text/javascript" src="{{ asset('js/controllers.js') }}"></script>
    </body>
</html>

Step 5 : Create Angular directory

Now we must need to create manual directory resources/assets/js/controllers

In this controller directory we have to create usercontroller.js

userController.js

myApp.controller('userController',['$scope','$location','$cookies',function($scope,$location,$cookies){
    // code
      }
]);

Step 6 : Create gulpfile.js

This 6th step we must need to create gulpfile.js on main directory.

gulpfile.js

var  elixir = require('laravel-elixir');
/*
    |--------------------------------------------------------------------------
    | 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(function(mix){

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

    mix.scripts([
        'controllers/userController.js',
    ],'public/js/controllers.js');

    mix.version([
        'js/app.js',
        'js/controllers.js',
    ]);
});

Note : Copy This file and change for your requirements.

Step 7 : Copy app.js and paste it.

Already created app.js in 4th step now we can copy below code and paste it.

public/js/app.js

/* This is the main file where angular is definded */
var myApp = angular.module('myApp',['ngRoute','ngCookies']);

myApp.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){

        $routeProvider.when('/',{
            title: 'Home',
            templateUrl:'/theme/home.html',
            controller : 'userController',
        });

        $routeProvider.when('/gallery',{
            title: 'Gallery',
            templateUrl:'/theme/gallery.html',
            controller : 'userController',
        });

        $routeProvider.when('/aboutus',{
            title: 'About US',
            templateUrl:'/theme/about.html',
            controller : 'userController',
        });

        $routeProvider.when('/contactus',{
            title: 'Contact US',
            templateUrl:'/theme/contactus.html',
            controller : 'userController',
        });
    }
]);

Step 8 : Create Angular Pages.

In 8th step create angular html file.

Theme folder create manually into public/theme directory.

After create theme folder we must need to create 4 file like.

home.html

<h1>Navigation Menu</h1>
<ul><li><a>href="/#!/">Home</a></li></ul>
<ul><li><a>href="/#!/gallery">Gallery</a></li></ul>
<ul><li><a>href="/#!/aboutus">About US</a></li></ul>
<ul><li><a>href="/#!/contactus">Contact US</a></li></ul>

gallery.html

<h1>It's gallery page now working angular with laravel.</h1>

contactus.html

<h1>Contact US</h1>
<ul>
    <li><a>href="mailto:contact@webappfix.com"> Email Address :  contact@webappfix.com </a></li>
    <li><a>href="https://dharmeshchauhan.com" target="_blank"> Website :   https://dharmeshchauhan.com </a></li>
    <li><a>href="https://www.facebook.com/webappfix">Facebook</a></li>
    <li><a>href="https://twitter.com/StackWho">Twitter</a></li>
    <li><a>href="https://github.com/webappfix">Github</a></li>
</ul>

about.html

<h2>About Me</h2>
<p>I am Dharmesh Chauhan love website as this is the only profession,</p>
<p>I'm involved from last 4 years.</p>
<p>I have strong knowledge in web development and design.</p>
<p>I have use photohsop, css3, html5, xhtml, cross browser compiled layout.</p>
<p>As well as programming php, mysql, ajax, jquery, symfony, wordpress. I tried to attached post example of this website.</p>
<p>I can do website design, logo design, banner design, web site development, wordpress website, ecommerce website, real estate website, travel web development and much more>
About The Blog</p>
<p>webappfix is one of the biggest tutorial platform for beginners and developers. We are providing best programming language tutorials like PHP, Laravel, Bootstrap, CSS3, HTML5, MYSQL, Codeigniter, Ajax, Jquery, AngularJS, and many more with examples. We have very smart team for research and develop. also we make our own examples. We are expert in error solutions and bug fixing.</p>
<p>If you have any query and have any suggestions for us, Then you can contact us from our "contact us" page. and also you can join us on facebook and twitter. we are regularly update on there.</p>

fire this command on your terminal.

-> gulp
-> php artisan serve

Now we are ready to run.

Angular with laravel installation here complete.

Now open your browser and type in url localhost:8000 and enjoy it.

If you have read the post properly and still not working properly with Angular and laravel,you can download it from here. click on Download

Soon its video will also be available on our Youtube channel.

I hope this article very helpful for you.

Thanks...

We always thanks to you for reading our blogs.

dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)
We Are Also Recommending You :