Series: Build an app with Laravel5 (backend) and Angularjs (frontend) – Part 2

In the Previous part of this series, we have seen how we can use Laravel5 to create an full fledged API and we checked the API response with the chrome extension called Postman. And in this second part of the two part series, we will see how we can interact with or use this API to make requests from the client side with Angularjs and make a simple jokes app.

So without further due, let’s jump right into the frontend part.

Installing Angular Seed

Let’s start by creating skeleton for the client side work, we will use angular seed for this.

First you need to clone the angular seed project from the git.

Next step is to install the dependencies for the angular seed project. So we will run following command.

This will fetch the dependencies for the angular seed project. Now you can see two new folders created in the directory structure named node_modules & app/bower_components.

Both Laravel 5 and Angularjs by default use port 8000 so we need to use other port for one of these. Let’s change port for angular seed project.

Open package.json file and update start property as,

Now you can run the project by running the following command.

Now browse to the app at

Install ui-router

Angular Seed project by defaults ships with angular’s default router. But i prefer ui-router (A third party router for angular). So we will modify our project to include the ui-router instead of default angular router.

We will use bower for downloaing ui-router to our project as

Include angular-ui-router.js  in your index.html

Now add ui-router  to list of dependenices in the app.js 

Creating New Routes

Now we will create two routes, one for the auth and other for the jokes. Let’s start by creating two new directories in the app directory named view_auth & view_jokes.  Your directory structure will look something like this.

2015-11-13_22-02-40

Now open view_auth/auth.js, and update the code as follows:

Now open view_jokes/jokes.js, and update the code as follows:

Open view_auth/auth.html & view_jokes/jokes.html and add some content. These are view specific files.

Now include these view specific script files in the index.html as

Now update the list of dependencies in the app.js file as

Now you can view these routes in the browser as.

and

Client Side Auth

Open the view_auth/auth.html and add the following code.

The output will look similar to this.

2015-11-13_22-24-06

Using Satellizer

Now for client side authentication, we will use a token based authentication moude for angular called satellizerlet’s first start by including satellizer to our project by running,

Add satellizer.js to index.html as,

Add satellizer to list of dependencies in the app.js,

Now add the login end point in the app.js from the api by updating the config block,

Satellizer gives us access to the $authProvider, which we used to specify the login url. The benefit of Satellizer is that when the user is logged in, a token is saved to the local storage. We know that to make request to our laravel api we need token every time, Satellizer makes sure to send the token with each request. So we don’t have to send the token manually.

Now open the view_auth/auth.js and update the controller code as follows:

Now after starting the laravel server, hit the auth route and enter the correct credentials and hit submit. If everything works, you will be redirected to the jokes route and you will see following items added to the local storage.

2015-11-13_22-39-14

This satellizer_token will be sent with the each request that we will make from the client side from now on.

GET all Jokes

Open view_jokes/jokes.html and update the code as follows,

Now open view_jokes/jokes.js and update the controller code as follows:

I know, i can move most of the code to the factory or service, but for the sake of simplicity, i am not going to do this.

Now Open the jokes route, you will see a output similar to this,

2015-11-13_22-50-04

Prettify App & Logout Part

Let’s start by adding nav to the app, open index.html and update the container code as follows:

Now open app.js and add the logout code in the run function as,

Now the app will look similar to this and logout will work.2015-11-13_23-00-01

Securing Routes

At that point, we are authenticating the user from the server and fetching and showing the jokes from the server. But we can see that, if the user is not authenticated, he/she can still go to jokes route and if the user is authenticated, he/she can still go to the auth route. We don’t want this to happen in our app. So we need to secure our routes.

For securing routes we will use a angular package called angular-permission, so let’s start by installing the package.

Include the package to the app.js list of dependencies,

Now first open the view_auth/auth.js and update the config block as,

Here you can see we are using the new field data, where we have defined permissions, it is available by the angular-permission package. Here we have defined permission role (isloggedin) as, this route is available all the users who are not logged in.

So now we need to define that role in the app.js run funciton,

Here we are checking if the user is authenticated, then he will not be allowed to enter this route.

Similarly update the view_jokes/jokes.js config function as,

Now we need to define the anonymous role in the app.js run function, so the complete permission block will look like this.

Now Try going to the jokes route without login, you will be redirected to the auth route also login and then try to open the auth route you will be redirected to the jokes route.

Post, Update, Delete Request

For using Post, Update and Delete Request. Update the view_jokes/jokes.html code as follows.

Now open the view_jokes/jokes.js and update the controller code as follows:

Add Joke

2015-11-13_23-21-35

Update Joke

2015-11-13_23-22-35

Delete Joke

2015-11-13_23-23-08

 

Tackling Pagination

Now the last step before completing our app is to add the pagination. We will use a load more button. When we click this button, It will load more jokes. First start by adding the load more button in the view_jokes/jokes.html as,

Now open the view_jokes/jokes.js and add the following code in the controller,

Now open the jokes routes and click load more button, you can see the new data jokes loaded in the view.

2015-11-13_23-27-37

Wrapping Up Part 2

I hope at the end of this part, you have successfully created you angular app that interact with the Laravel API that we have created in the Part 1 of the series.

If there are any doubts, you can ask in the comments section.

See Part 1 of this series, where we have created the API with Laravel5.

Thanks.

Please Consider Donating (Click Here)

  • Pablo Weinx

    Completely neat and awesome! You saved my life with permissions and the JP styleguide. Thanks, master! Following you, full support.

  • Blaž Urankar

    Hello, I’m a beginner web developer and I’ve been learning angular and laravel documentation for a month now. I didn’t know how to put it all together and I really needed a practical example, a simple project. I loved your two part series and I feel it was just what I needed, something to start a bigger project with, so thank you very much for your effort! 🙂

    I did have some issues though, but I managed to fix them all and it works now.

    1. It took quite a while and some googling to realize that should be changed to . You do have it in your code but it is not mentioned at the beginning.

    2. I was getting the “vm.init is not a function” error when first trying to get jokes from server. I removed “vm.init()” from jokes controller then it worked. I don’t know if this is a big deal or not. I guess it’s okay without the init.

    3. Logging out
    – “bower install angular-permission –save” and adding ‘permission’ to dependencies should probably be mentioned at the beginning of the “Prettify App & Logout Part” chapter, because “Permission” parameter is already being used in .run function.

    – When adding logout code to app.js, “$rootScope.currentUser = JSON.parse(localStorage.getItem(‘user’));” is outside the .run function and should be inside.

    – In index.html, the “My Profile” anchor element has href=”#” in it which gets redirected to “/auth” by ui-router because of the .otherwise function. I don’t know how to fix this so I removed this element and just used the “Logout” anchorelement and it logs out okay by calling logout() function.

    Thanks again!

    • Hi, Glad you liked the tutorial.

      issues,
      2. vm.init is not a big deal, you can cut the code from the init function and write it outside the function and it’s ok.
      3. Also Permission parameter is not required before securing routes section, so i removed it where it is used before the securing routes section.
      – yes “$rootScope.currentUser = JSON.parse(localStorage.getItem(‘user’));” should be inside the .run function.
      -For My Profile link, You can remove the href=”#” completely from the view and everything will work fine.
      Thanks.

  • Milic

    Im stuck at part 2.1/3.. I can’t see the views using the ui-router. I followed your steps exactly and repeated it in a new project, same problem.. The routes work before changing the router. Did you perhaps miss some part? Could you share a zip file of the project or something? Thanks

    • Blaž Urankar

      Hey, read my comment, I wrote some issues I found and how to fix them.

      As for your current problem, in “index.html” you should change to . Check “jokes.js” and you should see why (we create a view named “jokesContent”).

    • Milic

      I tried changing ng-view to ui-view but I still get the same problem. Any ideas what it might be?

  • Emil Reña Enriquez

    @mbaljeetsingh:disqus Hi I’ve been following this tutorial, hmm it seems I cannot get the views to show when accessing /app/#/auth

    • Ganbaatar Arslanbaatar

      same in here. I cannot get the views to show when accessing /app/#/auth and /app/#/jokes

  • Emil Reña Enriquez

    how do you hide the “auth ” on the navigation menu if the user has already logged in?

    • Add ng-hide=”currentUser != null” in the Auth li in the nav (index.html). This will work.

  • Basanta Dhakal

    Is it possible to use the server only at the server side .Will angular js run without nodejs server or without the php server in the client side from the file system of my computer?

    • Angular doesn’t need node js server to run, you can include angular script in any html file and then run it. It will work just fine. I am using Angular-Seed project, it uses node server in the development. Thanks.

  • Basanta Dhakal

    npm command not found.Will i need to install nodejs first?

  • estimate, the code is on github, because I followed the tutorial as it is and is not working. Index.html Part of me does not work 🙁

    • Hi Gudu, What error are you getting in the console.

      I didn’t put the code in the github. But if you are really stuck. You can contact me through https://baljeetsingh.in/contact/. I will send the code. Thanks.

  • Jose

    Awesome tutorial!

    I’d like to ask you questions, How does the method ‘$auth.isAuthenticated()’ work? and How did you use that controller ($auth) into of app.js?

    • $auth is provided by the satellizer itself and $auth.isAuthenticated() just works, it checks the authentication status of the user by using the token from the local storage. Thanks.

  • James Jayceon

    Hy baljeet i need source code i tried to do it 4 times but unable to do let me know if you can provide source code. i am done with part1 one. working fine and this one is the best tutorial for my next project.

    • Hi @jamesjayceon:disqus, no problem, you can have it, contact me through any of my social media profile with your email, i will send it to you. By the way, what issue are you facing when following the tutorial, because it can help others. Thanks.

      • James Jayceon

        here is issue..

        Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:

        Error: [$injector:unpr] Unknown provider: $routeProvider

        • The error is due to you haven’t included angular-route.js, it must be added before using angular routing, not included by default in angular script.

      • James Jayceon

        check your facebook inbox/other or filter messages.

  • Ganbaatar Arslanbaatar

    I got this Error: [$injector:modulerr] Failed to instantiate module permission due to: Error: [$injector:nomod] Module ‘permission’ is not available. how to fix it please

    • I guess you first need to install the module by “bower install angular-permission –save” and then add ‘permission’ as a dependency in the app.js like,

      angular.module(‘myApp’, [‘ui.router’,’permission’])

  • Bryan Rojas

    Great tutorials just what I was looking for.
    Thank you so much.
    A updated some code and you can check it here:
    https://github.com/brojask/laravel-angular-api-rest

  • Dev IT

    If authorization pass but then you’ve got 400 error and browser can’t get you to /jokes page – add next rows to your .htaccess file in backend part, helps me a lot:
    RewriteCond %{HTTP:Authorization} ^(.*)
    RewriteRule .* – [e=HTTP_AUTHORIZATION:%1]

  • medraouf moussa

    XMLHttpRequest cannot load http://localhost:8000/api/v1/authenticate. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access.
    i have got this error any one can help ?

    • make sure, you have added CORS plugin in the Laravel api.

      • medraouf moussa

        Thank you Master for this great tutorial! Sorry we have no Paypal in tunisia or i would donate <3 ! Guys do that in my place please !

  • Michel Bos

    Absolutely great tutorial. Please be aware that the Angular-Permission package has been updated and the Permission function doesn’t accept the .defineRole argument anymore. Replace Permission with RoleStore and add an empty array after the rolename in defineRole. Eg: RoleStore.defineRole(‘anonymous’, [], function (stateParams) {…..

  • ricky spires

    Hello.
    I have got as far as viewing the http://localhost:8080/app/#/auth at the start of the tutorial but angular is not working.
    this is the error i am getting in the console.

    Error: [$injector:modulerr] Failed to instantiate module myApp due to:
    [$injector:modulerr]
    Failed to instantiate module myApp.view2 due to:
    [$injector:unpr]
    Unknown provider: $routeProvideretc…

    I tried changing to like Blaz suggested but i still get the error ?

    any idea. thanks.
    —————————–
    I managed to get this working after a lot of messing around with it 🙂

  • ricky spires

    Uncaught TypeError: Permission.defineRole is not a function

    if have installed permission – bower install angular-permission –save

    • ricky spires

      ok.
      I think it might be the versions being pulled in by bower.

      If i do a new install it pulls in: “angular-permission”: “^2.1.3”
      and i get the error: Uncaught TypeError: Permission.defineRole is not a function

      If i use the version from your github repo that has : “angular-permission”: “~1.1.0”
      it works. but then there are other factors so that might not be the only reason.

      I am going to continue the course using you git repo because the bower work. but i will strip out all the js and html from jokes and auth and build that side from the tutorial.

      • ricky spires

        That did the trick. Now everything works.

        so there is something not working right with the new “angular-permission”: “^2.1.3”

        Any thoughts ??

        • ricky spires

          Ok. In the next tutorial there is a solution. use

          RoleStore

          https://www.npmjs.com/package/angular-permission

          .run(function(PermissionStore, RoleStore, ……

          RoleStore
          .defineRole(‘anonymous’, [], function (stateParams) {

  • ricky spires

    Fantastic tutorial. finished 🙂 Thanks !!

  • Jorge Luis Veliz

    So really really thank you for this serie!!

  • isbands

    Thanks man… it’s great tutorial.

  • Charles Vlug

    npm install on Windows gives me errors.
    i get: npm ERR! Error: No compatible version found: karma-chrome-launcher@’^0.1.12′
    If i remove the ‘^’, i get error: npm ERR! Error: No compatible version found: karma@’>=0.12.0- <0.13.0-'
    Does anyone please knows a sollution?
    Thanks in advance
    I succesfully finished pat 1 of this tutorial, it would be a pitty if can't get part 2 working.
    I want to publisch a live demo of this on http://www.restfulapi.nl
    Please help!

  • Eissa Soubhi

    great tutorial (y) , it gonna be muche better if u put a demo link.

  • nasir

    EXCELLENT tutorial.

  • Mamah Patrick

    Still having trouble with the angular permission after pulling in the latest dependency and trying @michel_bos:disqus Solution route doesnt change after and before logout

  • Krzysztof Koroscik

    I’m getting error “Unknow provider : permissionprovider”. Tried @michel_bos:disqus solution but that results in “”Unknow provider : RoleStoreprovider”

  • Junaid Zaki

    @mbaljeetsingh:disqus nice tutorial sir.. I’m actually creating a Progressive web app using the angular material as frontend and want to use laravel as backend.. I’ve already created the UI using the angular material.. but I don’t know how to integrate Laravel in it.. bit confused here.. Hope you’ll help

  • Great article! Truly amazing.. But I’m wondering, You’re hardcoding the /api url everywhere
    $http.get(‘http://localhost:8000/api/v1/jokes’).success(function(jokes){

    Can this be done using a “soft”coded backend api url?