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/7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
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/GTND423WCVSICKQJCVYLYKQWCE7D5KJWCW7ITZ3JCEBD627MFTYDP23KC6BDVKJUCVADEK3EHJNCLSIZ7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
3/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
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/scotchdevelopment7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
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
(https://scotch.io/tuto
build-a-wordpress-plu
Build an
A Lightw
to Angul
(https://scotch.io/tuto
app-with-vue-js-a-ligh
alternative-to-angular
Building
Node.js
Super Po
(https://scotch.io/tuto
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-47/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
5/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application
Build an
Angular
(Part 1)
(https://scotch.io/tuto
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-17/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
6/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application 6
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/1FxJ3TI7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
7/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application 7
(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/1PY0ujh7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
8/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
(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
(https://cask.scotch.io/2014/
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/1QJLLK57/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
9/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application 9
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 .
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
10/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
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.
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
11/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 1
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
12/57
9/20/2015 Create a Laravel and Angular SinglePage Comment Application | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 12
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.jpg7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
13/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application 1
(https://cask.scotch.io/2014/
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.jpg7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
14/57
9/20/2015 Create a Laravel and Angular SinglePage Comment Application | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 14
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.jpg7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
15/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application 1
(https://cask.scotch.io/2014/
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.jpg7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
16/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 16
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
17/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 17
{
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-controllers7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
18/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 18
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
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
19/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 19
URL:
http://example.com/api/com
ments . This just makes sense
moving forward and is some
basic API creation goodtactics.
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
20/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 20
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
21/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 2
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-methods7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
22/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 22
(https://cask.scotch.io/2014/
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.jpg7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
23/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 23
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-angularjs7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
24/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 24
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
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
25/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 25
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,
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
26/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 26
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-templating7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
27/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 27
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://-/?-7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
28/57
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
29/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 29
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.$http7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
30/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 30
// 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
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
31/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 3
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
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
32/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 32
will create functions to
handle the submit forms
and deleting on our view.
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
33/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 33
// 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() {
$scope.loading = true;
// save the comment. pass in comme
// use the function we created inComment.save($scope.commentData)
.success(function(data) {
// if successful, we'll ne
Comment.get()
.success(function(getD
$scope.comments =
sco e.loadin = f
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
34/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 34
});
})
.error(function(data) {
console.log(data);
});
};
// function to handle deleting a comme
// DELETE A COMMENT ==================
$scope.deleteComment = function(id) {
$scope.loading = true;
// use the function we created inComment.destroy(id)
.success(function(data) {
// 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 .
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
35/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 35
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.
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
36/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 36
// 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'); .
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
37/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 37
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
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
38/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 38
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.
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
39/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 39
body { paddingtop:30px; }
form { paddingbottom:20px;
.comment { paddingbottom:20px;
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
40/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 40
7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
41/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 4
(https://cask.scotch.io/2014/
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.jpg7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
42/57
9/20/2015 Create a Laravel and Angular Single Page Comment Application | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 42
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-app7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
43/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 43
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-templating7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
44/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 44
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-app7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
45/57
9/20/2015 Create a Laravel and Angular Single Page Comment Application | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 45
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-structure7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
46/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application 4
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-structure7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
47/57
9/20/2015 Create a Laravel and Angular Single Page Comment Application | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 47
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/feed7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
48/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 48
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/7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
49/57
9/20/2015 Createa Laravel and Angular Single Page Comment Application | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 49
.
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/7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
50/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application 50
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-18246685697/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
51/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 5
" 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/7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
52/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 52
.
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/7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
53/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutorials/create-a-laravel-and-angular-single-page-comment-application 53
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/7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
54/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 54
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/7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
55/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 55
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/7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
56/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
https://scotch.io/tutor ials/create-a-lar avel-and-angular -single-page-com ment-application 56
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/7/24/2019 Create a Laravel and Angular Single Page Comment Application _ Scotch
57/57
9/20/2015 C reate a Lar avel and Angular Single Page C om ment Appl ication | Scotch
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