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)