In this example, we will create a simple login example with AngularJS, Laravel and MySQL.
I will use Laravel 5.2 and Angular 1.5 in this example.

Let’s get started, here are the steps:

  1. First make sure that MySQL, PHP etc. are setup. The best way is to use XAMPP or LAMPP.
  2. Create a new database named employeedb in MySQL and create a new user named dbuser and password dbpassword.
  3. Install composer on your system. It helps in managing dependencies in our PHP projects.
    Download composer from here:

    https://getcomposer.org/download
  4. We will create our Laravel project in the web directory of apache which is commonly:
    Windows => c:\xampp\htdocs
    Linux => /var/www/html
  5. To download Laravel on your system, you can follow this link:
    https://laravel.com/docs/5.3/installation

    Execute the following command on your command prompt:

    composer global require "laravel/installer"
  6. Next exeucte the following command to create a new project in the apache web direcotry:
    laravel new loginproject
  7. We will put our angular code in public directory of our project. So, let’s create a new directory named angular under public.
  8. Since, we are going to use MVC model of Angular, create two more directories named controllers and services under public\angular directory.
    Next, create two folders named public\js and public\lib that will contain our custom JavaScript files and other library files.
    The resultant structure will be:

    loginproject
        public
           js
           lib  
           angular
              controllers
              services
  9. First we will remove /public from the website URL. Do the following:
    Copy .htaccess and index.php from public to root directory.
    

    In index.php, change the line:

    require __DIR__.'/../bootstrap/autoload.php';

    To:

    require __DIR__.'/bootstrap/autoload.php';

    And change the line:

    $app = require_once __DIR__.'/../bootstrap/app.php';

    To:

    $app = require_once __DIR__.'/bootstrap/app.php';
  10. Next, we will create following files in our project for this example:

    View For Login

    ——————–
    loginproject\resources\views\login.blade.php

    Controller For Login

    ————————–
    loginproject\app\Http\Controllers\LoginController.phpModel For Employee
    ————————–
    loginproject\app\Models\Employee.php

    Login Controller For Angular
    ————————————
    loginproject\public\angular\controllers\login-ctrl.js

    Login Service For Angular
    ——————————–
    loginproject\public\angular\services\login-serv.js

  11. OK, let’s get started. Here are the files:Models\Employee.php
    <?php
    namespace App\Models;
    
    use Illuminate\Database\Eloquent\Model;
    
    class Employee extends Model
    {
    }

    Controllers\LoginController.php

    <?php
    namespace App\Http\Controllers;
    
    use Illuminate\Http\Request;
    use App\Models\Employee;
    
    class LoginController extends Controller
    {
       public function login(){
          return view('login');
       }
    
       public function checkLogin(Request $request){
          $email = $request->get('email');
          $password = $request->get('password');
    
          $employee = Employee::where(array(
            'email' => $email, 
            'password' => $password
          ))->first();
    
          if(isset($employee))
             return json_encode(array('message' => 'correct', 'id' => $employee->id)); 
          else
             return json_encode(array('message' => 'wrong'));
       }
    }
    

    app\Http\routes.php

    Route::get('/', 'LoginController@login');
    Route::post('/check-login', 'LoginController@checkLogin');
    

    app\Providers\AppServiceProvider.php

    public function boot(){
        view()->share('root', URL::to('/'));
    }

    This will allow us to use $root variable anywhere in our views. Also add following line at the top:

    use Illuminate\Support\Facades\URL;

    app\Http\Middleware\VerifyCsrfToken.php

    protected $except = [
     '/*'
    ];

    For now, we don’t want Laravel to check CSRF tokens in request.

    public\angular\controllers\login-ctrl.js

    app.controller('LoginCtrl', ['$scope', 'LoginService', function($scope, LoginService) {
       $scope.checkLogin = function() {
          var data = {
            email: $scope.email,
            password: $scope.password
          };
    
          LoginService.checkLogin(data).then(function(result){
             if (result.data.message == 'correct') 
                $scope.message = result.data.message;
             else
                $scope.message = "Wrong Login"; 
          });
       }
    }]);

    public\angular\services\login-serv.js

    app.factory('LoginService', ['$http', function($http) {
    
        return {
           checkLogin: function(data) {
               return $http.post(root + '/check-login', data)
               .then(handleSuccess, handleError);
           }
        };
    
       function handleSuccess(response){
          return {
            success: true,
            data: response.data
          }
       }
    
       function handleError(error){
          return {
             success: false,
             error: error
          }
       }
    }]);

    resources\views\login.blade.php

    <html>
       <head>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
         <script type="text/javascript">
             var app = angular.module('app', []);
             var root = "{{$root}}";
         </script>
         <script type="text/javascript" src="{{$root}}/public/angular/controllers/login-ctrl.js"></script>
         <script type="text/javascript" src="{{$root}}/public/angular/services/login-serv.js"></script>
       </head>
    
       <body>
         <div ng-app="app">
           <form ng-controller="LoginCtrl">
              <div>
                 <input type="email" name="email" placeholder="Email" ng-model="email">
              </div>
              <div>
                 <input type="password" name="password" placeholder="Password" ng-model="password">
              </div>
              <div>
                 <button type="button" ng-click="checkLogin()">Submit</button><br/>
                 <span ng-bind="message"></span>
              </div>
           </form>
         </div>
       </body>
    </html>
  12. Change database settings according to you in config/database.php
  13. Execute composer install on command line from the project root folder.
  14. Our project is ready at this stage. Open your browser and visit the URL:
    http://localhost/loginproject