Building SPA using AngularJS – Part 3

This is the third part of Building SPA using AngularJS Series. The topics we’ll cover are:

• Building SPA using AngularJS – Part 1
• Building SPA using AngularJS – Part 2
• Building SPA using AngularJS – Part 3 (This Post)

Update (2014-May-5) New post which covers adding GulpJS as Task Runner for our AngularJS application:

• AngularJS with touch of GulpJS

Update (2014-June-1) New post which covers Implementing AngularJS Token Authentication using ASP.NET Web API 2 and Owin middleware:

• Token Based Authentication using ASP.NET Web API 2, Owin, and Identity

Building SPA using AngularJS – Part 3

In this post we’ll implement the last feature in our application where we’ll allow end users to bookmark their favorite places for future visits, so we need permanent repository to save this information. We’ll build our RESTful data service using Asp.Net Web API (any back end technology can be used to create this service, so if you are not familiar with Web API you can use another technology to build a service layer). To keep things simple we’ll save the bookmarked places information along with the username, so we’ll have single database table as the image below:

The end user will be asked to enter username in order to start bookmarking places, if there is available user in the context she can bookmark as many favorite places as she wants without asking for username. Username modal view will look like the below:

To view the saved bookmarked places which user has added, she can click on My Places menu on “index.html” page and a new view will be displayed containing list of all bookmarked places. View will be as the below:

So let’s start implementing those features.

Step 1: Building the RESTful service layer:

We’ll be using Entity Framework “Code First approach” to build our database, all this code is implemented in separate data access layer named “FoursquareAngularJS.Data”, I won’t dig into how to create the database model or use the factory pattern as I’ve blogged about them earlier, you can check this post for building the database model, and this post for creating the repository pattern. All you need to run this application locally is to have instance of SQLExpress or LocalDB, just configure the connection string and the database will be created automatically.

Our “FoursquareAngularJS.Web” project is configured to use Web API, we need to create two Web API Controllers one for Saving/Retrieving bookmarked places, and the other for checking if the username already exists in the database, I’ll not cover how we can configure Web API routes, you can check my previous post to follow along. You can view source code of “PlacesController” here, for “UsersController” here, and “WebApiConfig” class here.

To check the JSON response format for the the method responsible to return bookmarked places for user, we can issue HTTP Get request to the URL: http://explore4sq.azurewebsites.net/api/places/taiseerj note that “taiseerj” will be replaced by the username in our app.

Step 2: Adding service to communicate with our RESTful service:

Now we need to add new Angular service which is responsible to communicate with our RESTful service, so let’s add new file named “placesDataService.js” under “app–>services”, Now open the file and paste the code below :

So basically what we’ve implemented in this factory is the below:

• We’ve used the built-in Angular service $http instead of $resource, we can use the $resource as well, but I prefer to use $http to show you how we can implement both, there is no dependencies once you inject $http, so we can inject on any service directly.
• We’ve injected toaster third party service which is JavaScript non blocking notification service, this service will be used to display notification for end user once she bookmark a place. You can check how to configure this service here.
• As we mentioned before, Angular services are singleton objects, they live in the entire application, so we’ve defined variable named userInContext in this service, we’ll depend on this variable to decide if there is a user to bookmark places or not, Note: this is very naive implementation and should not be used in real world application, I’ve used it here to keep things simple in the demo. If you hit F5 and refreshed the shell page, this variable will be flushed.
• We’ve added function named savePlace which is responsible to issue HTTP Post request to our RESTful API, the request payload body will contain JSON object matches the data model we defined in our API.
• We’re using .then promise to manipulate and access the returned response directly in the service, so if the response is 200 OK we are displaying success notification message, if the response is not 200 OK, for example 304 Not modified, then we are returning a notification that place already bookmarked for this user. Note: displaying a notification on the service level is not the right place to do, we should do this in controller, but I preferred to put it here because we’re going to call the save function from two different controllers and we want to display the same notification on both controllers, this falls more into sharing code.
• We’ve implemented a function which retrieves a list of bookmarked places for specific user as well another function to check if the username has been used before.

Step 3: Implementing bookmark places feature

Now we’ll get back to the controller “placesExplorerController” and inject the newly created service “placesDataService” then add new function named “bookmarkPlace()” as the code below:

This function checks if the variable named “userInContext” in service “placesDataService” is not null, if this is the case, then we save the place directly by calling placesDataService.savePlace(venue), if it is null, then we’ll display new modal named “userProfile.html” for the user asking her to provide a username, this modal has new controller named “userContextController”. Showing the modal is identical to what we did with the modal used to display places photos, you can check the view source html here, and the controller source code here.

Step 4: Implementing My Places Feature

This is last feature in our application, where the user can view all bookmarked places, to implement it we need to add a new controller named “myPlacesController”, so add new JS file “myPlacesController.js” under “app–>controllers”, open the file and paste the code below:

What we’ve implemented here is simple, we’ve just injected the “placesDataService” so we’ll be able to load user saved places if there is username in the variable “userInContext” by calling method “getUserPlaces”, then we fill the returned data into myPlaces model.

Now we need to add new view named “myplaces.html” to work with this controller, the source code for this view can be found here, Do not forget to configure $routeProvider so Angular will be aware that the view “myplaces.html” is mapped to the controller “myPlacesController” when the user request the URL “/places”, this code should be added in app.js file as the code below:

That’s all for now!

I hope you liked this tutorial, I tried my best to explain all important parts of this application during this tutorial, you can always get back to the complete running source code on github, or try the application using the live demo.

Please feel free to drop any comment or suggestion to enhance this application.