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">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title> - Laravel - Angular JS</title>

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

        <!-- Fonts -->
        <link href='//,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=""></script>
                <script src=""></script>
        <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>
                    <a class="navbar-brand" href=""></a>

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


        <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">
                        <tr ng-repeat="post in posts">
        <!-- Scripts -->
        <script src="//"></script>
        <script src="//"></script>

        <script src=""></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;


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.