Laravel Angular CRUD (04) :: Insert data by Angular Js in Laravel 5

Today I’ll show you how to insert data by Angular Js in Laravel 5. So let’s see and follow the steps attentively.

You can read previous posts

Our route already been set up for insert, update, delete by the resource route. You can see how many routes in your application and their action, method by executing this command.

php artisan route:list

First we have to define our store method and then we’ll send POST request to store method’s route which is http://localhost/laravel-angular-crud/public/todos. Before defining store method please add two line at the beginning of class.

use Input;
use Response;
public function store()
    $data = ['success' => false, 'msg' => 'Delete fail'];
    return Response::json($data, 200);

Now setup the index.blade.php view. In our view I’ll add a bootstrap modal for inserting data.

add this model in your index.blade.php view

<a href="#modal-id" data-toggle="modal" class="btn btn-success btn-sm">Create New Task</a>

{{-- insert modal --}}
    <div class="modal fade" id="modal-id">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Add a task</h4>
                <div class="modal-body">
                        <label for="name">Enter a task name</label>
                        <input class="form-control" type="text" name="name" ng-model="">
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" ng-click="create(">Add</button>
{{-- end insert modal --}}

In this view i have called create method by ng-click directive which we have to define in our controller js file.I have change some position for easier understanding. Here i have define a constant for our service URL and inject it into our controller.

Open your todo-controller.js file and define create method

myApp.constant('SERVICEURL', 'http://localhost/laravel-angular-crud/public');
myApp.controller('TodoCtrl', function($scope, $http, SERVICEURL) {
    // for fetch all data
    $scope.init = function() {
        $http.get(SERVICEURL + '/todo-list').success(function(data) {
            $scope.todos = data;

    // for create a task
    $scope.create = function(name) {
        $ + '/todos', {
            name: name
        }).success(function(data) {


Finished our purpose for insert data! Now try to insert data.

insert data

Insert data

Share on :

Leave a Reply

seven + 2 =