Posted by Arjun on Friday 5th June 2015

AngularJS and Laravel5: Retrieve data from the database

Today I would will like to show you how to use Angular JS in Laravel5 and I will show you how to get data from the database in Laravel5 using Angular JS.

Here my table structure:

CREATE TABLE  `posts` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;  

Model : app/post.php

<?php namespace App;
 
use Illuminate\Database\Eloquent\Model;
 
class Post extends Model {
    protected $table = 'posts';
    protected $fillable = ['title','text']; 

}
 

Controller :app/http/controllers/PostController.php

<?php namespace App\Http\Controllers;
 
 use App\Http\Controllers\Controller;
 use App\Post;

 
 
class PostController extends Controller {
 
    public function posts()
    {
            return Post::all();
    }
    
    public function index() {
        return view('angualr_demo');
    }

}

View : resources/views/angualr_demo.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>arjunphp.com - Laravel - Angular JS</title>

        <link href="<< asset('/css/app.css') >>" rel="stylesheet">

        <!-- Fonts -->
        <link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
                <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
                <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="https://arjunphp.com">arjunphp.com</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="<< url('/') >>">Home</a></li>
                    </ul>


                </div>
            </div>
        </nav>

        <div ng-app="myApp" class="container">

               <div class="col-lg-12 col-md-12">
                <table ng-controller="postController" class="table table-bordered table-condensed table-responsive">
                    <thead>
                        <tr>
                            <td>S.no.</td>
                            <td>Name</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="post in posts">
                            
                             <td>{{post.id}}</td>
                            <td>{{post.name}}</td>
                       
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- Scripts -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

        <script type="text/javascript">
                                var app = angular.module('myApp', []);
                                app.controller('postController', function ($scope, $http) {
                                    $scope.posts = [];
                                            $http.get('<< url('post/get_list') >>').success(function ($data) {
                                    $scope.posts = $data;
                                });
                                });

        </script>
    </body>
</html>
     

Laravel’s Blade templating engine and Angular use the same markup when displaying variables.Both Laravel and Angular use the double curly brackets {{ name }}. we can fix this by changing laravel blade tags by using Blade::setContentTags(),Blade::setEscapedContentTags().

    Blade::setContentTags('<<', '>>');        // for variables
    Blade::setEscapedContentTags('<<<', '>>>');   // for escaped variables data

I usually place this in my routes.php file.

Routes : app/Http/routes.php

Blade::setContentTags('<<', '>>');        
Blade::setEscapedContentTags('<<<', '>>>');   
Route::get('/', '[email protected]');
Route::get('post/get_list', '[email protected]');

That's it.