Click here to Skip to main content
14,697,262 members
Articles » Web Development » Client side scripting » Beginners
Technical Blog
Posted 12 Jan 2014


42 bookmarked

Tutorial for Building SPA using AngularJS

Rate me:
Please Sign up or sign in to vote.
4.92/5 (16 votes)
5 May 2014CPOL
This is a tutorial for building SPA using AngularJS

Recently, I’ve been working on and evaluating different JavaScript frameworks for the next big project I’ll be involved in, we want to build Single Page Application (SPA) while depending on a solid JavaScript framework, so I decided to get my hands dirty and try to build a demo application using one of the solid JS frameworks, and the decision was AngularJS!

I called the demo app “Foursquare Explorer”. It is built using Twitter Bootstrap, Web API, Foursquare API, and for sure AngularJS. I was amazed how fast I was able to produce functional and neat app.

Image 1
Foursquare Explorer Web Application

At the beginning of the learning phase, I tried to read different articles and blog posts about Angular but I got lost and confused, until I watched this short 60 minutes tutorial done by Dan Wahlin, You won’t regret watching it if you are new to Angular.

Before discussing what we’ll build during this tutorial, I would like to talk about some of the features and concepts of Angular.

Two-Way Data Binding

AngularJS templating engine binds the data in two ways, this means that it auto-magically synchronizes the data between the view and the model, so if you updated the view, then the model is updated and vice versa. This feature will cut out lot of the code needed to update your DOM. You can check this out using this plunker live demo.

Image 2

Declarative v.s Imperative User Interface

AngularJS uses HTML to define user interface via Directives, those directives are responsible for setting event handlers behind the scene (Directives detail below). So you have to question yourself when you start setting IDs for html elements and try to manipulate the DOM using JavaScript or jQuery.

Models are POJO

Data models in AngularJS are just “Plain Old JavaScript Objects” without any setters or getters. Any changes done on the view are immediately pushed back to the model, thanks to the two–way data binding and the “scope” object.


Scopes in AngularJS can be considered the glue between the controller and the view, controller should not know anything about the view, and the view can know about the controller via the scope object.

Image 3


Controller in AngularJS is a function with two main responsibilities, they are implementing business logic, and manipulating the scope, not the HTML DOM for sure.


Directives in AngularJS will let you teach HTML DOM elements what to do, you will be able to enhance the capabilities of DOM elements by creating your custom directives and promote code reuse.


Services in AngularJS are singleton objects, they are responsible for the heavy lifting in your app. Most of the time, they provide methods responsible to push/pull data from the back-end server or services. As well, you can use services to share common logic between different controllers.


Filters will enable you to filter the data before it is projected on the view, it might involve something straight forward such as date or numbers formatting, or you can implement your own custom filters such as filtering data source.

I believe you are confused with those new concepts! But do not worry, we’ll cover those concepts in depth during this tutorial while we are building the app.

What We’ll Build in this Tutorial?

I’m a big fan of Foursquare, I’ve been always using their iPhone app for finding cool places with good rating; so I decided to build a sample web application which allows us to explore places by providing your city i.e.(Amman) and optional category, then you will be able to bookmark places you like to visit them later!

Use Cases We Will Cover in this Web App

  1. Explore places based on City (Mandatory) and Places Category (Optional)
  2. Display 10 places on the view and enable server side pagination so we keep our app snappy
  3. Displaying the top 9 image thumbnails of the place as a popover
  4. Allow users to bookmark the place for future visit (For the sake of simplicity, we will use username without password and if you refreshed the page, the user context is flushed)
  5. Displaying the bookmarked places for users
  6. Finally, we want cool UX and UI which will adopt to different screen sizes (Response Design) so we will use bootstrap UI as it plays nicely with AngularJS

I’ve decided to breakdown this series to three posts, posts are:

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

We’ll build this app incrementally so we will add feature by feature, the source code for this series is available on GitHub, feel free to download it locally or fork it, I’m open to ideas and suggestions to add more features to this app, Foursquare API is great and we can build many features on top of it. As well, you can try a demo of the app.

If there is nothing clear or ambiguous, please drop me a comment and I’ll do my best to reply to your questions.

To get the best of this tutorial, I recommend you to follow the posts one by one. Hope you’ll enjoy coding with AngularJS as much as I enjoyed it. :)

The source code is available on GitHub. The demo application is hosted on WindowsAzure.

Image 5 Image 6


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Taiseer Joudeh
Architect Aramex
Jordan Jordan
Taiseer Joudeh has more than 8 years of experience spent in developing and managing different software solutions for finance, transportation, logistics, and e-commerce sectors. He has been deeply involved in .NET development since early framework versions and currently he works on different technologies on the ASP.NET stack with deep passion for Web API, and Microsoft Azure.

Recently Taiseer has been focusing on building Single Page Applications and Hybrid Mobile Solutions using AngularJS.

Taiseer lives in Jordan with his wife and son, works as IT Manager at Aramex, also he is a regular speaker in local events and Dev user groups, he is a avid blogger on, and you can follow him on twitter @tjoudeh

Comments and Discussions

SuggestionElegant and Crisp explanation... Pin
laxmeesh.joshi20-Jun-15 10:53
Memberlaxmeesh.joshi20-Jun-15 10:53 
QuestionLive demo app not working Pin
Larbear25-Mar-14 14:45
MemberLarbear25-Mar-14 14:45 
AnswerRe: Live demo app not working Pin
Taiseer Joudeh30-Mar-14 0:13
professionalTaiseer Joudeh30-Mar-14 0:13 
AnswerRe: Live demo app not working Pin
Member 1126729926-Nov-14 17:40
MemberMember 1126729926-Nov-14 17:40 
GeneralVery neat and functional. Pin
Member 1054953826-Jan-14 4:35
MemberMember 1054953826-Jan-14 4:35 
GeneralRe: Very neat and functional. Pin
Taiseer Joudeh26-Jan-14 23:25
professionalTaiseer Joudeh26-Jan-14 23:25 
GeneralMy vote of 5 Pin
M Rayhan13-Jan-14 3:24
MemberM Rayhan13-Jan-14 3:24 
SuggestionPage Not Found Pin
Prabhat Spark12-Jan-14 22:28
professionalPrabhat Spark12-Jan-14 22:28 
GeneralRe: Page Not Found Pin
Taiseer Joudeh12-Jan-14 22:47
professionalTaiseer Joudeh12-Jan-14 22:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.