Laravel Angular CRUD (03) :: Retrieve data by Angular Js in Laravel 5

In this part, I’ll teach you how we can retrieve our task list from database table by angular js. Let’s see the steps.

You can read previous posts

You can find this project in my Github repository Laravel Angular CURD

First define index method in your TodoController.php file for return index.blade.php file

public function index()
    return view('todos.index');

We’ll complete our curd system by this single view file :)

create a get route in route.php file like as


Now define getTodos method in your TodoController.php file like as below.

public function getTodos()
    return $todos;

By this method we’ll get JSON object when we’ll browse in our browser.

Setup the index.blade.php view file which in your resources/views/todos directory
[NB: Don’t forget to add ng-controller directive in your view file and it’s value TodoCtrl

    <div class="container" ng-controller="TodoCtrl">
        <div class="row">
            <div class="col-md-12">
                <h3>Laravel Angular CRUD <a href="#" class="btn btn-success btn-sm">Create New Task</a></h3>
                <table class="table">

                        <tr ng-repeat="todo in todos">
                            <td>@{{todo.status==1? 'Completed':'Incomplete'}}</td>
                                <a href="#" class="btn btn-warning btn-xs">Edit</a>
                                <a href="#" class="btn btn-danger btn-xs">Delete</a>

Open your app.js file from public/scripts folder and add this code.

var myApp=angular.module('myApp',[]);

Now open your todo-controller.js file from public/scripts/controllers folder and add this code.

myApp.controller('TodoCtrl', function($scope, $http) {
    var serviceUrl = 'http://localhost/laravel-angular-crud/public/todo-list';
    $scope.init = function() {
        $http.get(serviceUrl).success(function(data) {
            $scope.todos = data;


Finished! Now browse http://localhost/laravel-angular-crud/public/todos

If  you follow this part correctly you will get a look like as below.

Todo List View

No more today,I’ll show you other steps in next tutorial.

Tags : , , , ,

Share on :

Leave a Reply

seven + 7 =