Create a Laravel and Angular Single Page Comment Application _ Scotch

7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch

1/57

9/20/2015 Create a Laravel and Angular Single Page Comment Application | Scotch

https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application

(/)

Create a Laravel andAngular Single Page

Comment ApplicationChris Sevilleja ((https://scotch.io/author/chris)@sevilayha(https://twitter.com/sevilayha))

February 4, 2014 158 Tutorials(https://scotch.io/category/tutorials) laravel

(https://scotch.io/tag/laravel), SPA(https://scotch.io/tag/spa)

FAWPFPACTION=A

61shares

30 31
https://github.com/scotch-io/laravel-angular-comment-apphttps://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application?wpfpaction=add&postid=1049https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application?wpfpaction=add&postid=1049https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application?wpfpaction=add&postid=1049https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application?wpfpaction=add&postid=1049https://github.com/scotch-io/laravel-angular-comment-apphttps://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application?wpfpaction=add&postid=1049https://scotch.io/tag/spahttps://scotch.io/tag/laravelhttps://scotch.io/category/tutorialshttp://-/?-https://twitter.com/sevilayhahttps://scotch.io/author/chrishttps://scotch.io/


2/57

9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch

https://scotch.io/tutorials/cr eate-a-laravel-and-angular- single-page-comment-application 2

//srv.bu sellad s.com /

//srv.bu sellad s.com /

(//srv.buysellads.c

VIEW CODE

(HTTPS://GITHUB.COM/SCOT

IO/LARAVEL-ANGULAR-

COMMENT-APP)

Laravel and Angular have

both become very wellrenowned tools in the web

development world lately.

Laravel for the great things

it brings to the PHP

community and Angular for

the amazing frontend toolsand its simplicity. Combining

these two great frameworks

only seems like the logical

next step.

30

31

VIEW CODE

(HTTPS://GITHUB.COM/SCOTCH-

IO/LARAVEL-ANGULAR-

COMMENT-APP)

OUTLINE

What Well Be Building

Advertise Here (http://buysellads.com/buy/detail/219041/zone/1300582?utm_source=site_219041&utm_medium=website&utm_campaign=imagetext&utm_content=zone_1300582)

AngularJS expertsUK based AngularJS developers Call us for a free consultation

AD
https://github.com/scotch-io/laravel-angular-comment-apphttp://googleads.g.doubleclick.net/aclk?sa=L&ai=ClQnTdE3-VcPFFsPPbfm5tLgOxJeF9QWs58SI_wHAjbcBEAEg_N_oGWCRdsgBAakCFOJXze8Luj7gAgCoAwHIA5sEqgTCAU_QS2d1D2UmnYg09WiWH5eT8quBJ2Z_P6L7FKvmmGN9ANrHW3lxeiGk6oI8j9x5r517WHsdRTNSar2YGg6e6rnZUegdixYQQEJp3arJZN_4Z5eWszUT1bSfn8CVxoxBPjFwjAHc3pa7JXtUcebo1SJda_eIAsYn-DNdLmLojVLDIQG_emjrGHhmnULXWF5DNilGwX-ncVnqVbpPpzlwzSREhPKRptfSv0Or0j719tIsPAyQVude6K7I6ihXnzMnAEB64AQBgAe8mb4nqAemvhuoB7XBG9gHAQ&num=1&sig=AOD64_2-1iBW65acotVCMWIxoBCA1u-GCg&client=ca-pub-2049948180079264&adurl=http://www.byng.cohttp://googleads.g.doubleclick.net/aclk?sa=L&ai=ClQnTdE3-VcPFFsPPbfm5tLgOxJeF9QWs58SI_wHAjbcBEAEg_N_oGWCRdsgBAakCFOJXze8Luj7gAgCoAwHIA5sEqgTCAU_QS2d1D2UmnYg09WiWH5eT8quBJ2Z_P6L7FKvmmGN9ANrHW3lxeiGk6oI8j9x5r517WHsdRTNSar2YGg6e6rnZUegdixYQQEJp3arJZN_4Z5eWszUT1bSfn8CVxoxBPjFwjAHc3pa7JXtUcebo1SJda_eIAsYn-DNdLmLojVLDIQG_emjrGHhmnULXWF5DNilGwX-ncVnqVbpPpzlwzSREhPKRptfSv0Or0j719tIsPAyQVude6K7I6ihXnzMnAEB64AQBgAe8mb4nqAemvhuoB7XBG9gHAQ&num=1&sig=AOD64_2-1iBW65acotVCMWIxoBCA1u-GCg&client=ca-pub-2049948180079264&adurl=http://www.byng.cohttp://buysellads.com/buy/detail/219041/zone/1300582?utm_source=site_219041&utm_medium=website&utm_campaign=imagetext&utm_content=zone_1300582https://github.com/scotch-io/laravel-angular-comment-apphttps://github.com/scotch-io/laravel-angular-comment-apphttps://srv.buysellads.com/ads/click/x/GTND423WCVSICKQUFTA4YKQWCE7D52J7F6YDCZ3JCEBD6277CVBI6K3KC6BDVKJUCVADEK3EHJNCLSIZhttps://srv.buysellads.com/ads/click/x/GTND423WCVSICKQJCVYLYKQWCE7D52J7C6SIVZ3JCEBD6277CASD6KQKC6BDVKJUCVADEK3EHJNCLSIZhttps://srv.buysellads.com/ads/click/x/GTND423WCVSICKQJCVYLYKQWCE7D5KJJCK7DCZ3JCEBD627NCEAIL27KC6BDVKJUCVADEK3EHJNCLSIZhttps://srv.buysellads.com/ads/click/x/GTND423WCVSICKQJCVYLYKQWCE7D52JNCE7DTZ3JCEBD627MFTYDL2QKC6BDVKJUCVADEK3EHJNCLSIZhttps://srv.buysellads.com/ads/click/x/GTND423WCVSICKQJCVYLYKQWCE7D5KJWCW7ITZ3JCEBD627MFTYDP23KC6BDVKJUCVADEK3EHJNCLSIZ


3/57


https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application 3

(https://ww

(https:(

(https://scotch.i

your-first-no

Subscribe and get o

Build Your First

(https://scotch.io

your-first-no

Email Address

Subscr

POPULAR ON

Whats N

For our use cases, we will be

using Laravel as the

RESTful API backendand

Angular as the frontendto

create a very simple singlepage comment application.

This will be a simple

example to show off how to

get started using these two

technologies so dont hope

for any extra database stuff

on how to handle sub-

comments or anything like

that.

This will be a simple single

page comment application:

RESTful Laravel API to

handle getting, creating,

and deleting comments

Angular frontend to

Scroll to Top

What Well BeBuilding
http://-/?-https://scotch.io/bar-talk/whats-new-in-bootstrap-4https://scotch.io/books/build-your-first-node-js-apphttps://scotch.io/books/build-your-first-node-js-apphttps://plus.google.com/+ScotchIo/postshttps://twitter.com/scotch_iohttps://www.facebook.com/scotchdevelopment


4/57

9/20/2015 Create a Laravel and Angular SinglePage Comment Application | Scotch

https://scotch.io/tutorials/cr eate-a-laravel-and-angular- single-page-comment-application 4

(https://

talk/wha

bootstrap-4)

Getting S

An Intera

(https://scotch.io/tuto

started-with-vim-an-in

Announc

2.0 Ou

Vagrant

Improve

(https://scotch.io/bar-

scotch-box-2-0-our-de

vagrant-lamp-stack-im

How to B

Plugin (p


build-a-wordpress-plu

Build an

A Lightw

to Angul


app-with-vue-js-a-ligh

alternative-to-angular

Building

Node.js

Super Po


slack-bot-with-node-js

norris-super-powers)

handle showing our

creation form and the

comments

Ability to create a

comment and see itadded to our list w/o

page refresh

Ability to delete a

comment and see it

removed from our list

w/o page refresh

Overall, these are very

simple concepts. Our focus

will be to see the

intricacies of how Laravel

and Angular can work

together.
https://cask.scotch.io/2014/02/laravel-angular-single-page-application1.jpghttps://scotch.io/bar-talk/whats-new-in-bootstrap-4https://cask.scotch.io/2014/02/laravel-angular-single-page-application1.jpghttps://scotch.io/tutorials/build-an-etsy-clone-with-angular-and-stamplay-part-1https://scotch.io/tutorials/building-a-slack-bot-with-node-js-and-chuck-norris-super-powershttps://scotch.io/tutorials/build-an-app-with-vue-js-a-lightweight-alternative-to-angularjshttps://scotch.io/tutorials/how-to-build-a-wordpress-plugin-part-1https://scotch.io/bar-talk/announcing-scotch-box-2-0-our-dead-simple-vagrant-lamp-stack-improvedhttps://scotch.io/tutorials/getting-started-with-vim-an-interactive-guidehttps://scotch.io/bar-talk/whats-new-in-bootstrap-4


5/57


https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application

Build an

Angular

(Part 1)


etsy-clone-with-angul

part-1)

//srv.bu sellads .com/ads/cAdvertise

(https://cask.scotch.io/2014/

02/laravel-angular-single-

page-application1.jpg)

Setting Up Laravel

Go ahead and get your

Laravel setup ready. Well be

doing some basic things to

get our backend to do CRUD

on comments:

Create a databasemigration

Seed our database with

sample comments

Create our routes for

our API

Creating a catch-all

route to let Angular

handle routing

Creating a resource

controller for comments

The LaravelBackend
https://cask.scotch.io/2014/02/laravel-angular-single-page-application1.jpghttps://scotch.io/tutorials/build-an-etsy-clone-with-angular-and-stamplay-part-1http://-/?-https://cask.scotch.io/2014/02/laravel-angular-single-page-application1.jpghttp://buysellads.com/buy/detail/219041/zone/1300589?utm_source=site_219041&utm_medium=website&utm_campaign=imagetext&utm_content=zone_1300589https://srv.buysellads.com/ads/click/x/GTND423WCVSICKQJCVS4YKQWCE7D5KJWCKSDTZ3JCEBD627NCYAICK3KC6BDVKJUCVADEK3EHJNCLSIZhttps://scotch.io/tutorials/build-an-etsy-clone-with-angular-and-stamplay-part-1


6/57



LEARN NODE ANWITH OUR

(http://bit.ly

A VAGRANT LATHAT JUST

Getting our DatabaseReady Migrations

We will need a simple

structure for our comments.We just need textand

author. Lets create our

Laravel migration to create

our comments.

Lets run the artisan

command that will create

our comments migration so

that we can create the table

in our database:

php artisan migrate:make

create_comments_table

create=comments

Well use the Laravel

Schema Builder(http://laravel.com/docs/sch

ema) to create the textand

authorfields that we need.

Laravel will also create the

idcolumn and the
http://bit.ly/1PY0ujhhttp://laravel.com/docs/schemahttp://bit.ly/1PY0ujhhttp://bit.ly/1FxJ3TI


7/57



(http://bit.ly/

DEAD SIOFF-CANVAS

timestampsso that we

know how long ago the

comment was made. Here is

the code for the comments

table:

// app/database/migrations/####_##_##_####

...

/**

* Run the migrations.

*

* @return void

*/

public function up()

{

Schema::create('comments', functio

{

$table>increments('id');

$table>string('text');

$table>string('author');

$table>timestamps();

});

}

...

15

16
http://bit.ly/1QJLLK5http://bit.ly/1QJLLK5http://bit.ly/1PY0ujh


8/57


https://scotch.io/tutorials/cr eate-a-laravel-and-angular- single-page-comment-application

(http://bit.ly/

SCOTCH.IO S

(http://shop.

Make sure you go adjust

your database settingsin

app/config/database.php

with the right credentials.

Now we will run themigration so that we create

this table with the columns

that we need:

php artisan migrate


02/laravel-angular-

migrate.jpg)

With our table made, lets

create an Eloquent model so

that we can interact with it.

Comment Model

ngularJS

ng
http://bit.ly/1QJLLK5http://googleads.g.doubleclick.net/aclk?sa=L&ai=C3FqDc03-VcjTONeabr2eqaAJxJeF9QWs58SI_wHAjbcBEAEgw7LSImCRdsgBCakCFOJXze8Luj6oAwHIAwiqBKgBT9AB1G2EqcR2nTtguRKZk0jIQMGIrFHxh2_lP2FRJLuljCdFmyL3CGwor0ghyC7422JRjG7nuo2508ykLdkOpeF5W9OR7bVv9vRWMx8jGG8hdA63KFKAs5mMh2VkaJ5gL6gmOFEkehO9sSVb6CAWI9nwcwIOUbalOoo-J_s-o44CKHYU7rtnz6P91nxPhuXQ1BNi_ATipc7VL0HNnlFtQnunxnfiFbKfoAYugAe8mb4nqAemvhuoB7XBG9gHAA&num=1&sig=AOD64_2tpgS9JeClICuesaN9K8zYwlEumQ&client=ca-pub-4625466825098355&adurl=http://www.byng.cohttps://cask.scotch.io/2014/02/laravel-angular-migrate.jpghttp://shop.scotch.io/http://bit.ly/1QJLLK5


9/57



AUTOMATED ONL

(https://invoicebu

aff=8hlimbxx)

(https://www.face

(https://twitt

(https:/

We will be using Laravel

Eloquent

(http://laravel.com/docs/elo

quent) models to interact

with our database. This willbe very easy to do. Lets

create a model:

app/models/Comment.php .


10/57


https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 10

We will need a few

comments so that we can

test a few things. Lets create

a seed file and fill our

database with 3 samplecomments.

Create a file:

app/database/seeds/Comment

TableSeeder.php and fill it

with this code.


11/57




12/57



Now lets run our seeders

using artisan.

php artisan db:seed

// app/database/seeds/DatabaseSeeder.php

...

/** * Run the database seeds.

*

* @return void

*/

public function run()

{

Eloquent::unguard();

$this>call('CommentTableSeeder');

$this>command>info('Comment tabl

}

...

13
https://cask.scotch.io/2014/02/laravel-angular-database-seed.jpghttps://cask.scotch.io/2014/02/laravel-angular-database-seed.jpg


13/57




02/laravel-angular-database-

seed.jpg)

Now we have a database

with a comment table, an

Eloquent model, and

samples in our database.

Not bad for a days work

but were not even close to

done yet.

Comment ResourceControllerapp/controllers/CommentController.php

We will use Laravels

resource controllers

(http://laravel.com/docs/con

trollers) to handle our API

functions for comments.

Since well be using Angularto display a resource and

show create and update

forms, well create a
https://cask.scotch.io/2014/02/laravel-angular-database-seed.jpghttp://laravel.com/docs/controllershttps://cask.scotch.io/2014/02/laravel-angular-database-seed.jpg


14/57



resource controller with

artisan without the create

or editfunctions.

Lets create our controller

using artisan.

php artisan

controller:make

CommentController

only=index,store,destroy

For our demo app, well only

be using these three

functions in our resource

controller. To expand on thisyoud want to include all the

functions like update, show,

updatefor a more fully

fledged app.
https://cask.scotch.io/2014/02/laravel-angular-create-controller.jpghttps://cask.scotch.io/2014/02/laravel-angular-create-controller.jpghttps://cask.scotch.io/2014/02/laravel-angular-create-controller.jpg


15/57




02/laravel-angular-create-

controller.jpg)

Now weve created our

controller. We dont need

the create and edit

functions because Angular

will be handling showing

those forms, not Laravel.

Laravel is just responsible

for sending data back to our

frontend. We also took out

the update function for this

demo just because we want

to keep things simple. Wellhandle creating, showing,

and deleting comments.

To send data back, we will

want to send all our data

back as JSON. Lets go

through our newly created

controller and fill out our

functions accordingly.
https://cask.scotch.io/2014/02/laravel-angular-create-controller.jpghttps://cask.scotch.io/2014/02/laravel-angular-create-controller.jpg


16/57




17/57



{

Comment::destroy($id);

return Response::json(array('succe

}

}

You can see how easy it is to

handle CRUD with Laravel

and Eloquent. Its incredibly

simple to handle all the

functions that we need.

With our controller ready to

go, the last thing we need to

do for our backend is

routing.

Extra Reading: Simple

Laravel CRUD with Resource

Controllers

(https://scotch.io/tutorials/si

mple-laravel-crud-with-

resource-controllers)

Our Routes app/routes.php
https://scotch.io/tutorials/simple-laravel-crud-with-resource-controllers


18/57



With our database ready to

rock and roll, lets handle

the routes of our Laravel

application. We will need

routes to send users to theAngular frontend since that

will have its own routing. We

will also need routes for our

backend API so people can

access our comment data.

Lets create the Angular

pointing routes. We will

need one for the home

pageand a catch-all route

to send users to Angular.This ensures that any way a

user accesses our site, they

will be routed to the Angular

frontend.

Well be prefixing our API

routes with (drumroll

please) api . This way, if

somebody wants to get all

comments, they will use the


19/57



URL:

http://example.com/api/com

ments . This just makes sense

moving forward and is some

basic API creation goodtactics.


20/57




21/57



Handling Catch-All

Routes: In Laravel, you

can do this a few ways.

Usually it isnt ideal to do

the above code and havea catch-all for your entire

application. The

alternative is that you

can use Laravel

Controller Missing

Methods(http://laravel.com/docs/controllers#handling-

missing-methods)to

catch routes.

Testing All Our Routes

Lets make sure we have all

the routes we need. Well

use artisan and see all our

routes:

php artisan routes

This command will let us see

our routes and sort of a top-

down view of our

application.
http://laravel.com/docs/controllers#handling-missing-methods


22/57




02/laravel-angular-artisan-

routes.jpg)

We can see the HTTP verb

and the route used to get all

comments, get a singlecomment, create a

comment, and destroy a

comment. On top of those

API routes, we can also see

how a user get routed to our

Angular application by the

home page route.

Backend Done

Finally! Our Laravel API

backend is done. We have

done so much and yet,

theres still so much to do.

We have set up our

database and seeded it,
https://cask.scotch.io/2014/02/laravel-angular-artisan-routes.jpg


23/57



created our models and

controllers, and created

our routes. Lets move onto

the frontend Angular work.

Ive seen this question asked

a lot. Where exactly should Ibe putting Angular files and

how does Laravel and

Angular work together. We

did an article on getting

Laravel Blade and Angular to

work together

(https://scotch.io/bar-

talk/quick-tip-using-laravel-

blade-with-angularjs). This

article works under the

assumption that we arent

even going to use Blade.

To let Angular handle the

frontend, we will need

Laravel to pass our user to

Where to PlaceAngular Files
https://scotch.io/bar-talk/quick-tip-using-laravel-blade-with-angularjs


24/57



our index.php file. We can

place this in a few different

places. By default, when you

use:

// app/routes.php

Route::get('/', function() {

return View::make('index');

});

This will return

app/views/index.php .

Laravel will by default look

in the app/views folder.

Some people may want to

keep Angular files

completely separate from

Laravel files. They will want

their entire application to be

housed inside of the public

folder. To do this is simple:

just change the default View


25/57



location to the public folder.

This can be done in the

app/config/view.php file.

// app/config/view.php

...

// make laravel look in public/views f

'paths' => array(__DIR__.'/../../publi

...

Now return

View::make('index') will

look for

public/views/index.php . It

is all preference on how

youd like to structure your

app. Some people see it as a

benefit to have the entire

Angular application in the

public folder so that it is

easier to handle routing and

if it is needed in the future,


26/57



to completely separate the

backend RESTful API and the

Angular frontend.

For Angular routing, then

your partial files will be

placed in the public folder,

but thats out of the scope of

this article. For more

information on that kind of

single page Angular routing,

check out Single Page

Angular Application Routing

(https://scotch.io/tutorials/ja

vascript/single-page-apps-

with-angularjs-routing-and-templating).

Lets assume we left

everything default and our

main view file is in our

app/views folder and move

forward.

Routing with Laravel

and AngularThere are a
https://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating


27/57



lot of questions about

having routing with

Laravel and Angular and

if they conflict. Laravel

will handle the mainrouting for your

application. Angular

routing will only happen

when Laravel routes our

user to the main Angular

route ( index.php ) in thiscase. This is why we use

a Laravel catch-allroute.

Laravel will handle the

API routes and anything

it doesnt know how to

route will be sent toAngular. You can then

set up all the routing for

your Angular application

to handle showing

different views.

The AngularFrontend
http://-/?-


28/57


29/57



public/

js/

controllers/ // where we will p

mainCtrl.js

services/ // angular services commentService.js

app.js

Angular Servicepublic/js/services/commentService.js

Our Angular service is going

to be the primary place

where we will have our HTTP

calls to the Laravel API. It is

pretty straightforward andwe use the Angular $http

(http://docs.angularjs.org/ap

i/ng.$http) service.
http://docs.angularjs.org/api/ng.$http


30/57



// public/js/services/commentService.js

angular.module('commentService', [])

.factory('Comment', function($http) {

return {

// get all the comments

get : function() {

return $http.get('/api/comment

},

// save a comment (pass in comment

save : function(commentData) {

return $http({

method: 'POST',

url: '/api/comments',

headers: { 'ContentType'

data: $.param(commentData)

}); },

// destroy a comment

destroy : function(id) {

return $http.delete('/api/comm

}

}

});

This is our Angular service

with 3 different functions.

These are the only functions


31/57



we need since they will

correspond to the api routes

we made in our Laravel

routes.

We will be returning the

promise object from our

service. These will be dealt

with in our controllers. The

naming convention here

also stays the same as the

Laravel controller that we

have.

With our Angular Service

done, lets go into ourcontroller and use it.

Angular Controllerpublic/js/controllers/mainCtrl.js

The controller is where we

will have most of the

functionality for our

application. This is where we


32/57



will create functions to

handle the submit forms

and deleting on our view.


33/57



// public/js/controllers/mainCtrl.js

angular.module('mainCtrl', [])

// inject the Comment service into our con.controller('mainController', function($sc

// object to hold all the data for the

$scope.commentData = {};

// loading variable to show the spinni

$scope.loading = true;

// get all the comments first and bind

// use the function we created in our

// GET ALL COMMENTS ==============

Comment.get()

.success(function(data) {

$scope.comments = data;

$scope.loading = false;

});

// function to handle submitting the f

// SAVE A COMMENT ================

$scope.submitComment = function() {


// save the comment. pass in comme

// use the function we created inComment.save($scope.commentData)


// if successful, we'll ne

Comment.get()

.success(function(getD

$scope.comments =

sco e.loadin = f


34/57



});

})

.error(function(data) {

console.log(data);

});

};

// function to handle deleting a comme

// DELETE A COMMENT ==================

$scope.deleteComment = function(id) {


// use the function we created inComment.destroy(id)


// if successful, we'll ne

Comment.get()

.success(function(getD

$scope.comments =

$scope.loading = f });

});

};

});

As you can see in our

controller, we have injected

our Comment service and use

it for the main functions:

get , save , and delete .


35/57



Using a service like this

helps to not pollute our

controller with $http gets

and puts.

Connecting OurApplication public/js/app.js

On the Angular side of

things, we have created our

serviceand our controller.

Now lets link everything

together so that we can

apply it to our application

using ngapp and ng

controller .

This will be the code to

create our Angular

application. We will inject

the service and controller

into. This is best practices

since it keeps our

application modular and

each different part can be

testable and extendable.


36/57



// public/js/app.js

var commentApp = angular.module('commentAp

Thats it! Not much to it.

Now well actually get to our

view where we can see how

all these Angular parts work

together.

Our Main Viewapp/views/index.php

So far, after everythingweve done up to this point,

we still wont be able to see

anything in our browser. We

will need to define our view

file since Laravel in our

home route and our catch-

all route returns return

View::make('index'); .


37/57



Lets go ahead and create

that view now. We will be

using all the Angular parts

that weve created. The main

parts that weve created

from Angular that well use

in index.php are:

ng-app and ng-

controller: Well apply

these to our application

by attaching them to

our body tag

ng-repeat: Well loop

over the comments and

display them in our

template

submitComment():

Well attach this

function to our form

using ngsubmit

Loading Icons: Wellcreate a variable called

loading . If it is set to

true, well show a

loading icon and hide

the comments


38/57



deleteComment():

Well attach this

function to a delete link

so that we can remove

the comment

Now lets get to the actual

code for our view. Well

comment out the main

important parts so we can

see how everything works

together.


39/57



body { paddingtop:30px; }

form { paddingbottom:20px;

.comment { paddingbottom:20px;


40/57




41/57




02/laravel-angular-single-

page-application1.jpg)

Now we finally have our

view that brings all of the

parts we created together.

You can go ahead and playaround with the application.

All the parts should fit

together nicely and creating

and deleting comments

should be done without a

page refresh.

Testing theApplication
http://-/?-https://cask.scotch.io/2014/02/laravel-angular-single-page-application1.jpg


42/57



Make sure you take a look at

the Github repo

(https://github.com/scotch-

io/laravel-angular-comment-

app) to test the application.

Here are some quick

instructions to get you

going.

1. Clone the repo: git

clone

[email protected]:scotch

io/laravelangular

commentapp

2. Install Laravel: composer

install preferdist

3. Change your database

settings in

app/config/database.ph

p

4. Migrate your database:

php artisan migrate

5. Seed your database:

php artisan db:seed

6. View your application in

the browser!
http://-/?-http://-/?-https://github.com/scotch-io/laravel-angular-comment-app


43/57



Hopefully this tutorial gives

a good overview of how to

start an application using

Laravel and Angular. You

can bring this farther and

create a full application that

can handle multiple API calls

on the Laravel side, and

even create your own

Angular routing

(https://scotch.io/tutorials/ja

vascript/single-page-apps-

with-angularjs-routing-and-

templating) for multiplepages.

Sound off in the comments

if you have any questions or

would like to see a specific

use case. We can also

expand on this demo and

start adding different things

like editing a comment, user

profiles, whatever.

Conclusion
http://-/?-https://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating


44/57



VIEW CODE

(HTTPS://GITHUB.COM/SCOTCH-

IO/LARAVEL-ANGULAR-COMMENT-APP)

(https://scotch.io/author/chris)

CHRIS SEVILLEJA(HTTPS://SCOTCH.IO/AUTHOR/CHRIS)

(@SEVILAYHA(HTTPS://TWITTER.COM/SEVILAYHA))
https://twitter.com/sevilayhahttps://scotch.io/author/chrishttps://scotch.io/author/chrishttps://github.com/scotch-io/laravel-angular-comment-app


45/57



Design, development, and

anything in between that I find

interesting.

View My Articles (https://scotch.io/author/chris)

READ NEXT

(https://scotch

up-a-mean-

stack-single-

page-

SETTING UP

A MEAN

STACK

SINGLE PAGE

APPLICATION

(HTTPS://SCOTCH.IO/TUTORIALS/SETTING-

UP-A-MEAN-

STACK-

SINGLE-PAGE-

APPLICATION)

(https://scotch

a-single-page-

todo-app-

with-node-

-

CREATING A

SINGLE PAGE

TODO APP

WITH NODE

AND

ANGULAR

(HTTPS://SCOTCH.IO/TUTORIALS/CREATING-

A-SINGLE-

PAGE-TODO-APP-WITH-

NODE-AND-

ANGULAR)

(https://scotch

- -

(https://scotch
https://scotch.io/tutorials/node-and-angular-to-do-app-application-organization-and-structurehttps://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templatinghttps://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templatinghttps://scotch.io/tutorials/node-and-angular-to-do-app-application-organization-and-structurehttps://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angularhttps://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angularhttps://scotch.io/tutorials/setting-up-a-mean-stack-single-page-applicationhttps://scotch.io/tutorials/setting-up-a-mean-stack-single-page-applicationhttps://scotch.io/author/chrishttps://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templatinghttps://scotch.io/tutorials/node-and-angular-to-do-app-application-organization-and-structure


46/57



to-do-app-

application-

-

NODE AND

ANGULARTO-DO APP:

APPLICATION

ORGANIZATION

AND

STRUCTURE

(HTTPS://SCOTCH.IO/TUTORIALS/NODE-

AND-

ANGULAR-

TO-DO-APP-

APPLICATION-ORGANIZATION-

AND-

STRUCTURE)

page-apps-

with-

angularjs-

SINGLE PAGE

APPS WITHANGULARJS

ROUTING

AND

TEMPLATING

(HTTPS://SCOTCH.IO/TUTORIALS/SINGLE-

PAGE-APPS-

WITH-

ANGULARJS-

ROUTING-

AND-TEMPLATING)

(https://scotch

laravel-route-

parameters)

UNDERSTANDING

LARAVEL

ROUTEPARAMETERS

(HTTPS://SCOTCH.IO/TUTORIALS/UNDERSTANDING-

LARAVEL-

ROUTE-

PARAMETERS)

(https://scotch

and-easy-

laravel-login-

authenticatio

SIMPLE AND

EASY

LARAVELLOGIN

AUTHENTICATION

(HTTPS://SCOTCH.IO/TUTORIALS/SIMPLE-

AND-EASY-

LARAVEL-

LOGIN-

AUTHENTICATION)
https://scotch.io/tutorials/node-and-angular-to-do-app-application-organization-and-structurehttps://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templatinghttps://scotch.io/tutorials/simple-and-easy-laravel-login-authenticationhttps://scotch.io/tutorials/simple-and-easy-laravel-login-authenticationhttps://scotch.io/tutorials/understanding-laravel-route-parametershttps://scotch.io/tutorials/understanding-laravel-route-parametershttps://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templatinghttps://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templatinghttps://scotch.io/tutorials/node-and-angular-to-do-app-application-organization-and-structurehttps://scotch.io/tutorials/node-and-angular-to-do-app-application-organization-and-structure


47/57



SUBSCRIBE

(HTTPS://SCOTCH.IO/FEED)

FOLLOW

(HTTP://TWITTER.COM/SCOTCH_IO)

LIKE

(HTTP://WWW.FACEBOOK.COM/SCOTCHDEVE

+1

(HTTP://PLUS.GOOGLE.COM/B/1138

Get valuable tips, articles, and

resources straight to your inbox. Every

Tuesday.

Email Address

Subscribe

Comments 1
https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1236219820https://disqus.com/by/twlizard/https://disqus.com/by/twlizard/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1236219820https://disqus.com/by/twlizard/https://disqus.com/home/inbox/https://disqus.com/home/forums/scotchwebdevelopment/http://plus.google.com/b/113854128330570384219/+ScotchIo/postshttp://www.facebook.com/scotchdevelopmenthttp://twitter.com/scotch_iohttps://scotch.io/feed


48/57



great tutorial so far! just one question, I used

your code for the routes but when I check my

routes from the command line I don't have a

row for api.comments.show. I wasn't expecting

to have that route since we didn't create a

show controller but you have that route

available in your screenshot. Should there be ashow controller? Is there something I'm

missing?

David Knight

On submit and destroy success, you don't

need to refresh the comment list using .get(),

you should simply $scope.comments.push(

$scope.commentData ) and$scope.comments.splice( index, 1 ) where

index ispassed into the destroy function as a

parameter. This would save you two additional

XHR requests and unnecessary wait and load

time.

Hasan

No, you cannot do that, becoz it has tocommunicate with rest api all the time. If

you push it, it'll push comment without

commentID, so the delete function

would not work without comment id.

And I'm not sure why splice is not

working :/

Guest

I'm a noob in AngularJS, and I

ust started to learn this fw, but I

think that you are not right here.

I think you easily can

add\remove a comment without

using extra call of

`Comment.get()` just because
https://disqus.com/by/disqus_0Rub2rHQhG/https://disqus.com/by/davidnknight/https://disqus.com/by/davidnknight/https://disqus.com/by/davidnknight/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1305987497https://disqus.com/by/twlizard/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1236219820https://disqus.com/by/disqus_0Rub2rHQhG/https://disqus.com/by/davidnknight/https://disqus.com/by/twlizard/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1391655212https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1457704002https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1305987497https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1391655212https://disqus.com/by/disqus_0Rub2rHQhG/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1305987497https://disqus.com/by/davidnknight/http://api.comments.show/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1236219820https://disqus.com/by/twlizard/


49/57

9/20/2015 Createa Laravel and Angular Single Page Comment Application | Scotch


.

know, a good API all the time

must to return all needed info

about new created record, like a

response, and exactly this info

we can use to `push` the new

record in our `commentData`.

Sorry for my english!

Cheers!

Jaimin

This is the best tutorial for angularjs and

laravel. I want edit comment link so that you

can edit comment and update it in database.

Has anyone used or implemented update codefor this one?

Kevin

Thank you for the Great Tutorial! One question

is how I can inject the CSRF token in Angular

and handles it by Laravel?

Chris Sevilleja

Bartender

Hey sorry for the late response. Laravel

keeps a token in Session that you can

grab with Session::token(). You could

use Angular to request a token when

creating a form and then bind that to a

variable for when you send the POST.

The csrf token would treat that the

same as a normal POST.

Jaimin

Has anyone added pagination in comments to

paginate using this tutorial?

Nick Salloum
https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1824668569https://disqus.com/by/callmenick1/https://disqus.com/by/disqus_J43a1Dq61t/https://disqus.com/by/sevilayha/https://disqus.com/by/disqus_J43a1Dq61t/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1626855956https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1824668569https://disqus.com/by/callmenick1/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1626855956https://disqus.com/by/disqus_J43a1Dq61t/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1380784596https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1421931943https://disqus.com/by/sevilayha/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1380784596https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1624803588https://disqus.com/by/disqus_J43a1Dq61t/


50/57



Haven't done so, but laravel does make

pagination easy. Here's the docs for it -

http://laravel.com/docs/4.2/pa...- might

be an easy implementation?

Alex Thanks for that nice little tutorial. It all worked

straight away ( very rare with me ) and i am

now inspired to continue digging in that

direction. Cheers and keep up the good work.

waseemmachloy

what is benefit for using angular,js in this

comment system. :) just curious aboutangula.js benefit

Chris Sevilleja

Bartender

This example doesn't fully show the

power that Angular can provide in this

setup. Handling the AJAX calls in an

Angular service and having separated

code out into controllers lets us expand

our app easier than if we were creating

this with just jQuery.

Since the service and controller are

separate and modular, we can run unit

tests on our app to make sure that

everything works according to plan.

While this doesn't show too much of the

benefits, when you want to build a largerapplication, it can help greatly for

testability, scalability of code, and

handling the front-end data is so much

easier.

Jeroen Knockaert

I have followed every single step in this tutorial

'
https://disqus.com/by/callmenick1/https://disqus.com/by/jeroenknockaert/https://disqus.com/by/sevilayha/https://disqus.com/by/waseemmachloy/https://disqus.com/by/callmenick1/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-2195626477https://disqus.com/by/jeroenknockaert/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1251144989https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1251597691https://disqus.com/by/sevilayha/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1251144989https://disqus.com/by/waseemmachloy/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1287507007http://laravel.com/docs/4.2/paginationhttps://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1824668569


51/57



" Use of undefined constant comment -

assumed 'comment' "

How can I fix this?

Sam

I have the same problem. Did you figure

out what it is?

Jeroen Knockaert

I'm not sure if my solution was

the right way to solve this, I

typed '@' before every variable.

For example: @{{ comment.id}}instead of {{ comment.id}}

This solved the problem for me

Sam

Thanks! That worked.

Florian Zemke

I created a Laravel 5 and AngularJS starter

boilerplate project getting you started with the

new Laravel 5 and AngularJS with automated

routing and many features that will get you

started quickly.

https://github.com/Zemke/start...

Florian Zemke

Authentication has been added.

Guest

well, i got this error
https://disqus.com/by/florianzemke/https://disqus.com/by/florianzemke/https://disqus.com/by/disqus_3M8AsssKLP/https://disqus.com/by/jeroenknockaert/https://disqus.com/by/disqus_3M8AsssKLP/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1880491346https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1893713307https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1880491346https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1959759027https://disqus.com/by/florianzemke/https://github.com/Zemke/starter-laravel-angularhttps://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1880491346https://disqus.com/by/florianzemke/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-2227979727https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-2236347381https://disqus.com/by/disqus_3M8AsssKLP/http://comment.id/http://comment.id/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-2222969809https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-2227979727https://disqus.com/by/jeroenknockaert/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-2195626477https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-2222969809https://disqus.com/by/disqus_3M8AsssKLP/


52/57



.

619:file_get_contents(/home/chabib/Cod

laravel-angular/public/build/rev-

manifest.json): failed to open stream:

No such file or directory (View:

/home/chabib/Code/starter-laravel-

angular/resources/views/layout.blade.p

Florian Zemke

Hey, thank you for trying out the

project! Please follow the

installation instructions in the

readme. Running the commands

will fix your problem. Running

`gulp` should fix your problem.

Have fun!

https://github.com/Zemke/start...

Guest

sweet, this is what i am looking for

thanks

Florian Zemke

Happy to hear this! If you have

any suggestions, questions or

something, please reach out to

me or open an issue. Have fun!

Sam from btheeuwes.com

Please note to make the delete function work,

in the HTML code, use:

Delete

Note 'data-ng-click'. Thanks for the tutorial!

DaveRev

Hi! Great app, it's also very useful to
https://disqus.com/by/DaveRev/https://disqus.com/by/florianzemke/https://disqus.com/by/florianzemke/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1486675084https://disqus.com/by/DaveRev/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1655866078https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1893681860https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1893817741https://disqus.com/by/florianzemke/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1880491346https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1893681860https://github.com/Zemke/starter-laravel-angular#installationhttps://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1893713307https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1893833464https://disqus.com/by/florianzemke/


53/57



un ers an an es angu ar w arave

I'm trying to implement also the update method,

in laravel and in angular service, but I can't get

it working! Can you help me please? I also

have a bitbucket repo with all my tests.

Thanks!

* Edit: i solved! :)

Ruben Kuipers

Can you tell me how you did it? I'm

currently trying to implement that update

feature myself, but I can't really get my

head around it.

Eric Leroy

Great tutorial but I always get the same issue :

GET http://localhost:8888/api/comments 404

(Not Found)

Unable to view existing comments. The same

when trying to save a comment

Any idea ?

Chris Sevilleja

Bartender

From your command line, when you

type php artisan routeswhat routes do

you see?

Eric Leroy

The same as you :

+--------+------------------------------

--+----------------------+--------------

-------------+----------------+---------

------+

| Domain | URI | Name | Action |
https://disqus.com/by/DaveRev/https://disqus.com/by/ericleroy/https://disqus.com/by/sevilayha/https://disqus.com/by/ericleroy/https://disqus.com/by/ruben_kuipers/https://disqus.com/by/DaveRev/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1242739178https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1242757013https://disqus.com/by/ericleroy/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1242729051https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1242739178https://disqus.com/by/sevilayha/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1242729051https://disqus.com/by/ericleroy/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1486675084https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1879410309https://disqus.com/by/ruben_kuipers/


54/57



e ore ers er ers

+--------+------------------------------

--+----------------------+--------------

-------------+----------------+---------

------+

| | GET / | | Closure | | |

| | GET api/comments |

api.comments.index |

CommentController@index | | |

| | POST api/comments |

api.comments.store |

CommentController@store | | |

| | GET

api/comments/{comments} |

api.comments.show|

CommentController@show | | |

| | DELETE

api/comments/{comments} |

api.comments.destroy |

CommentController@destroy | |

|

Please note that I'm using

MAMP and that the root folder is

localhost:8888/myapp/public (as

for all Laravel apps).

+--------+------------------------------

--+----------------------+--------------

-------------+----------------+---------

------+

Chris Sevilleja

Bartender

When you do

Comment.get(), add an

error in there so you can

see if an error comes

back in the console.
https://disqus.com/by/sevilayha/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1242757013https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1242777200https://disqus.com/by/sevilayha/http://api.comments.show/


55/57



Comment.get()

.error(function(data)

console.log(data);});

Also, can you go to the

route directly in the

browser?

http://localhost:8888/mya

Eric Leroy

Trapping error : nothing

in the console.

With :

http://localhost:8888/lara

I get the json :

[{"id":"1","text":"Look I ama test

comment.","author":"Chri

Sevilleja","created_at":"2

02-12

22:40:17","updated_at":"2

02-12 22:40:17"},

{"id":"2","text":"This is

going to be super

crazy.","author":"NickCerminara","created_at":"

02-12

22:40:17","updated_at":"2

02-12 22:40:17"},

{"id":"3","text":"I am a

master of Laravel and

Angular.","author":"Holly

Lloyd","created_at":"2014

02-12
https://disqus.com/by/ericleroy/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1242777200https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1242804861https://disqus.com/by/ericleroy/


56/57



22:40:17","updated_at":"2

02-12 22:40:17"}]

It is as if

CommentService.js was

not called or did not call

routes.php

Chris Sevilleja

Bartender

If that is the URL you

see data at, then use that

URL in your

CommentService. Since

there are no consoleerrors then there aren't

any errors loading up the

CommentService.

Try using the

/larang/public/api/comme

as the URL.

(https://www.facebook.com/scotchdevelopment)

(https://twitter.com/scotch_io)

(https://plus.google.com/+ScotchIo/posts)

(http://feeds.feedblitz.com/scotch_io)

License(/license)

Advertise with Us(/advertise)

About(/about)

Join Us on Slack(https://scotch-slack.herokuapp.com/)

Store(http://shop.scotch.io)
http://shop.scotch.io/https://scotch-slack.herokuapp.com/https://scotch.io/abouthttps://scotch.io/advertisehttps://scotch.io/licensehttp://feeds.feedblitz.com/scotch_iohttps://plus.google.com/+ScotchIo/postshttps://twitter.com/scotch_iohttps://www.facebook.com/scotchdevelopmenthttps://disqus.com/by/sevilayha/https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1242804861https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application#comment-1242821178https://disqus.com/by/sevilayha/


57/57


Web design and development tutorials for the masses.

Scotch.io | Proudly hosted by Digital Ocean(https://www.digitalocean.com/?

refcode=eaf67777e85b)

Write for Us(/write-for-us)

Contact Us(/contact-us)

JOIN THE NEWSLETTER

Web design/development tutorials and news from around the web.

Email Address

Subscribe

Hire Us (http://bit.ly/18ib8jR)

(https://leanpub.com/mean-machine)

LEARN NODE AND ANGULAR

Scotch's new JavaScript eBook. Learn the full JavaScript stack.

Get the Book(https://leanpub.com/mean-machine)
https://leanpub.com/mean-machinehttps://leanpub.com/mean-machinehttp://bit.ly/18ib8jRhttps://scotch.io/contact-ushttps://scotch.io/write-for-ushttps://www.digitalocean.com/?refcode=eaf67777e85b

Documents

Create a Laravel and Angular Single Page Comment Application _ Scotch