AngularJS Bootstrap 3 Laravel Laravel 5.5

Laravel 5.5 AngularJS CRUD Operations Application

Laravel 5.5 AngularJS CRUD Operations Application
Written by Yogesh Koli

Laravel 5.5 is first LTS release of Laravel Framework, Taler Otwell (Founder of Laravel) also said that the purpose of this release is going to be standards long time support and now Laravel 5.5 has a good shape things are well maintained . This is good news for us as a PHP developer we need something that is best and stable. so now if you are thinking to build a big project or you have already having a project and looking for good framework instead of saying good the best framework you can surely switch to Laravel 5.5. Laravel meant for a Big.

Okay so we can Use Laravel 5.5 on Server side or for Back end development, but how about front end?

We have number of choices among them I am picking up AngularJS front framework, yes you have choices but AngularJS fits for multiple reasons it’s incredibly faster and flexible to manage overtakes most of the front frameworks.

You can also go with Laravel 5.5 plus VueJs 2.0 it is also a perfect combination, I have posted a tutorial to learn Laravel 5.5 Crud operation using VueJS 2.0 you can read this from this Laravel 5.5 VueJs 2.0 CRUD Operations Application

Why AngularJS?

  • AngularJS handle data binding incredibly fast
  • AngularJS uses DOM directly instead of saving as a copy of HTML code
  • MVC pattern for front end developer – it enables flexibility to manage and development of the application.
  • Easy to learn and use.
  • Improvements Application performance
  • Single Page Application development

Tutorial Features & Focus:

  • Learn CRUD Implementation
  • Learn how to use Laravel Auth
  • Understanding of Laravel Routes and Resource routes
  • Handling Front end crud operation using AngularJS
  • Learn how to handle Ajax requests with AngularJS

Let’s start to build a simple but strong and effective application using Laravel 5 and AngularJs, with create, read, update and delete features.

At the begging of this tutorials you need to be ready to with few different things that is a development server along and code editor.

Laravel 5.5 Server Requirements:

  • Apache or Nginx
  • MySQL
  • PHP >= 7.0
  • OpenSSL, PDO, Mbstring, Tokenizer and XML PHP Extensions
  • Composer

Step 1: Create new Laravel Project

Create new Laravel project using following command from your terminal or you can continue with your existing Laravel 5.5 project.

Using Laravel installer:

OR using composer:

After creating project you need generate Application Key:

After setting your application quickly open you project folder into your favourite editor to do further development.

Step 2: Database Configuration and Design:

We need setup a database and required table structure, go ahead and create new database in MySQL.

I am guessing you have created a database and you have a database name, username and a database user password, next we need to configure it with our project.

Suggested Read: MySQL Database Backup and Restore from Terminal

Database connection settings:

Open .env file and update following settings:

Create new table:

We will need users and tasks table, laravel provide users and password resets table migration by default and it’s ready to use out of the box we just needs to create additional migration file to create tasks table:

It should create migration file and list out following message on command line/terminal:

Okay our migration file is ready, open up in editor from /database/migrations/ directory and update up() method according to the following script:

Run migration to create required tables:

Use following command to run the migrations:

Use can checkout our database for newly created migration tables, here is database EER diagram:

Laravel AngularJS CRUD Application Database Design

Database Design

Step 3: Define User Authentication:

As said at the beginning of the tutorials we are going to learn about Laravel Auth, you know Laravel really flexible you can generate user authentication within a second which is going to provide us a ability to register new user, login user and forgot password request handling.

Use following command to generate default AUTH:

After execution of the above command we can run our project and navigate /login and register urls to checkout the pages as showing below:

Login Screen:

User Authentication Login Screen

User Authentication Login Screen

Registration Screen:

User Authentication Registration screen

User Authentication Registration screen

You can register new user as well and make sure user auth is working, you can following screen for the active login user:

User Home Screen

User Home Screen

Step: 4: Create Model and Controller:

Here we comes into the MVC model, in this step we will see more stuff from Laravel such as Laravel Eloquent model and Laravel Controller it’s incredibly simple to create model and controller in Laravel and usability real consentient.

Open your Terminal or command line and execute following command from root directory of your application:

You should see following message, it indicates that requested Model and controller created successfully.

Local Task model at /app/Task.php open into your editor and update it according to following script to add fillable attributes and model biding.

Open User Model from /app/User.php add new method to define relations between user and tasks:



Step 5: Define application resource routes:

Open /routes/web.php file and add new route at the end of the file as showing below:

Quick note: web.php is the file where we define our application routes to handle user request and in the above script just by adding one line we did created seven different routes related to Task table.

Step 6: Configure AngularJS:

This is important step we are going to deal with npm install here, I would prefer to run npm install first to install all required non required dependencies and we will go from there.

Before running following application you need to make sure you installed npm properly:

Wait for while to get installed all required decencies, finally it should something like this:

It indicates that it did the right job, let’s install AngularJS next:

Now open /resources/assets/js/app.js file and import angular at the top after bootstrap as showing below:

Next.. we need to add ng-app directive to bootstrap the angularjs application, ng-app always needs to be an root element of the application, so go ahead and open /resources/views/layouts/app.blade.php file and add this directive under <html> element:

Step 7: Define AngularJS Module and Controller:

Now it’s time to define angularJS module and controller to handle tasks operations, open app.js file from /resources/assets/js/app.js and add following script to declare application module:

Note: AngularJs Module is an global place for creating, registering and retrieving AngularJS modules for the given application directive.

Also, if you notice carefully we are adding Laravel CSRF tokens to the http request headers and that’s required without having X-CSRF-TOKEN you won’t be able to do anything in the backend, you all requested will be validated using that token.

Step 8: Read Operation:

Read operation basically is basically get’s the records from the server with GET request and list those records on User interface.

Open app.js file from the /resources/assets/js/app.js and add following methods and javascript objects to the TaskController:

Update Laravel TaskController to handle read request:

/app/Http/Controllers/TaskController.php:

Also make sure to add a constructer to have auth middleware to make it only accessible to the active users.

Now will have to update the User View to be able to list out those records, open resources/views/home.blade.php file and update according to the following script:

Step 9: Create Operation:

Keep in mind for each operation we needs to do three updates, that is to add a angularjs controller function, update TaskController methods according to the operations and Update the User view:

Add AngularJS Controller Function:

Update TaskController.php:

If you get Auth not found execution then make sure to add Auth Class to your controller:

Update User View:

Add following model popup in home.blade.php file within container class:

Execute Create Operation:

Go ahead and execute following command to compile the script and test our create operation:

Click Add Task button, will get you to the Create New Task model window:

Create new task Model

Create New task Window

Click Submit button without filling input fields to test validations:

Create New Task Validations

Create New Task Validations

Fill Input field and click submit to create new task:

Listing Recently Created Task

Listing Recently Created Task



Step 10: Update Given Task:

Add new angularjs controller functions:

Update User View:

Update TaskController.php: 

Test Update feature:

Go ahead and run the $ npm run dev command again from you terminal to compile resent changes and test your application:

Click Edit button from the task list to open Edit model window:

Update Task Window

Update Task Window

Make change to task and click submit:

Updating the Task

Updating the Task

Quickly list recently updated task:

Listing recently updated Task

Listing recently updated Task

We have done with the important operations now it’s time to deal with delete action.

Step 11: Delete given Task:

Update AngularJS Controller:

Change TaskController method definition:

Now you can again compile your script and test the delete action, it should work however if you get any issues while learning this tutorials let me know using comments box below.

Conclusion:

Let’s conclude what you have learned from this tutorial:

  1. How to install new Laravel application and database configuration
  2. Creating Database migrations file and running the migrations to create new database tables
  3. How to deal with Laravel Eloquent model data binding and handling Model CRUD operations from Controller
  4. How to install and configure AngularJS using npm with Laravel 5.5
  5. AngularJS module settings, creating controller and handling front operations with secure Ajax requests.
  6. Using bootstrap models popup inside AngularJS controllers
  7. Validating the requests and list-out the errors

Thanks for being a part of iTech Empires, please don’t forgot to subscribe for our news letter to get reset updates directly into your inbox and also make sure to share this tutorial on social media to support.

Thank you, happy coding!

About the author

Yogesh Koli

Yogesh Koli is a software engineer & a Blogger lives in India. He's driven by an addiction to learning and a love for adventure. he has 5+ years of experience working with the front-end, back-end, web application development, and system design.

avatar
8 Comment threads
7 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
13 Comment authors
Yogesh Kolishafiakshay bhardwajIsaac OsunaAshish gupta Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
shafi
Guest
shafi

in my project i couldnt find /resources/assets/js/app.js this. i.e inside resourses no assets folder

Ashish gupta
Guest
Ashish gupta

Hello Sir,
List of data in angular js is not working because in controller file , view is missing in the function of view .
So please tell me ,
how to be show data table using angular js in laravel 5.5 ?

ghanshyam saini
Guest
ghanshyam saini

awesome bro ………… 🙂

could you please give me more link to learn more about angular and laravel

MaryE
Guest
MaryE

Hi, i am using laravel 5.6 and i’m trying to follow your tuto, but only recieve “ReferenceError: index is not defined at mn.eval (eval at Ea (app.js:1), :3:572)” at console.
Somebody can help me?

Sameer Sood
Guest
Sameer Sood

the blocked content is not visible even after clicking on like button…
what is the issue??

alamin
Guest
alamin

Its Work File, Thanks

Deltatech kapil
Guest
Deltatech kapil

hello when i run the code… http://localhost/laravel-angular/public/home it vahish after 1 second and on console i get “Uncaught Error: [$injector:modulerr] Failed to instantiate module LaravelCRUD due to:
Error: [$injector:nomod] Module ‘LaravelCRUD’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.”
pleasee help me

Manste Akai
Guest
Manste Akai

Create a Module with the name LaravelCRUD

angular.module(‘LaravelCRUD’, []).controller(“TaskController”, function ($scope,$http) {

//rest of the code in the app.js goes here

});

akshay bhardwaj
Guest

I am getting issue while adding task task not submitted even required error not working

Believe Lody
Guest
Believe Lody

Hello guy, great tutorial. I have some issues with @symbol mixing laravel and angular bracket {{ }}. In my home.blade.php file, despite the ng-controller in my div tag, it shows me a blank screen when I put @{{ }} in tag where ng-repeat is. If I remove @{{}}, everything works correctly (but I haven’t values from angular controller).However, I tried to do the same in welcome.blade.php file and it doesn’t show me a blank screen but brackets and variable name inside, not value. Look so weird, I have no clue why it doesn’t work. See screenshots here. Thanks https://uploads.disquscdn.com/images/bff826e7d28baab7002983a46d73bc56c7bf67154a06cb1c6c79e6fce3de7abe.png https://uploads.disquscdn.com/images/16737f13532cd23e0d8da3776353d5416d2d84c6fefdb07b5b42a9a75edefad7.png… Read more »

urvashiurvi
Guest
urvashiurvi

Hi,

I am unable to open the block content..Please help