Bit of Technology

  • Archive
  • About Me
    • Advertise
    • Disclaimer
  • Speaking
  • Contact

Tutorial for Building SPA using AngularJS

January 13, 2014 By Taiseer Joudeh 31 Comments

Be Sociable, Share!

  • Tweet
  • Email
  • WhatsApp

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 framework, 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.

Foursquare Explorer Web Application

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 way, this means that it is auto-magically synchronize the data between the view and the model, so if you updated the view then the model is updated and vice verse. This feature will cut out lot of the code needed to update your DOM. You can check this out using this plunker live demo.

Two_Way_Data_Binding

  • Declarative v.s Imperative user interface:

AngularJS uses HTML to define user interface via Directives, those directives are responsible to set 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 for the two–way data binding and the “scope” object.

  • Scopes:

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.

AngularJS scope

  • Controllers:

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

  • Directives:

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:

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:

Filters will enable you to filter the data before it is projected to 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 feel you now, I believe you are confused with those new concepts! But do not worry, we’ll cover those concepts deeply during this tutorial while we are building the app.

What we’ll build in this tutorial?
I’m big fan of Foursquare, I’ve been always using their iPhone app for finding cool places with good rating; so I decided to build 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 are:

  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:

  • Building SPA using AngularJS – Part 1
  • Building SPA using AngularJS – Part 2
  • Building SPA using AngularJS – Part 3

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

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 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 🙂

Source code is available on GitHub. Demo application is hosted on WindowsAzure.

Be Sociable, Share!

  • Tweet
  • Email
  • WhatsApp

Related Posts

  • AngularJS Authentication Using Azure Active Directory Authentication Library (ADAL)
  • Getting started with ASP.NET 5 MVC 6 Web API & Entity Framework 7
  • Two Factor Authentication in ASP.NET Web API & AngularJS using Google Authenticator
  • Decouple OWIN Authorization Server from Resource Server
  • ASP.NET Web API 2 external logins with Facebook and Google in AngularJS app

Filed Under: AngularJS, CodeProject, Javascript, Single Page Applications Tagged With: AngularJS, Foursquare API, Single Page Applications, SPA, Web API

Comments

  1. stevanuz (@weaklinglifter) says

    February 9, 2014 at 8:31 pm

    Good one, thanks. Got to read it soon and it’s a nice demo.

    Reply
    • tjoudeh says

      February 9, 2014 at 8:33 pm

      Thank you, glad you like it, will check your caching mechanism once i’m on laptop.

      Reply
  2. Yair says

    April 12, 2014 at 10:46 pm

    Hi man, the final app looks identical like the app of “Pluralsight Bootstrap 3 Course”.

    Reply
    • Taiseer Joudeh says

      April 12, 2014 at 10:55 pm

      Hi, those are free themes available on http://bootswatch.com, anyone can use them. So if you used theme “Amelia” you will get the same results.

      Reply
      • Yair says

        April 18, 2014 at 7:30 am

        Cool! Great job, I follow you.

        Reply
  3. Haider says

    April 18, 2014 at 12:08 am

    I am new AngularJS and SPA. Can you please update your app by adding security so that for each call, whether its for getting HTML view from MVC controller or data from API controller, user get authenticated/authorized first.

    Reply
    • Taiseer Joudeh says

      April 18, 2014 at 1:37 am

      Hello Haider, currently I’m working on another anagularjs tutorial which covers authentication with web API. You can use basic authentication with SSL by sending the username and password with each request, or you can piggyback on asp.net authentication, you can look on something similar on http://www.youtube.com/watch?v=o-F5sYdoiYo

      Reply
  4. Mark says

    April 25, 2014 at 7:05 pm

    I got a source code, opened solution in VS 2013 and tried running I got an error message :

    Server Error in ‘/’ Application.
    ——————————————————————————–

    The resource cannot be found.
    Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.

    Requested URL: /

    Reply
    • Taiseer Joudeh says

      April 25, 2014 at 7:46 pm

      Hello Mark,
      Try to type /index.html or comment out RouteConfig.RegisterRoutes(RouteTable.Routes); which you will find in Global.asax file and the home page should open.

      Reply
      • Mark says

        April 25, 2014 at 7:54 pm

        Yes, /index.html did the trick. Can you also please explain how data is getting into the app? I mean, is there a local database file somewhere?

        Thanks

        Reply
        • Taiseer Joudeh says

          April 25, 2014 at 7:58 pm

          In this tutorial I’m communicating with Foursquare API, so all the search you depends on Foursquare RESTful service, check the file “placesExplorerService.cs” using this link: https://github.com/tjoudeh/FoursquareAngularJS/blob/master/FoursquareAngularJS.Web/app/services/placesExplorerService.js and you will see how I’m constructing HTTP GET request.

          Follow along with the tutorial and everything is described clearly. Hope this answers your question.

          Reply
          • Mark says

            April 28, 2014 at 8:35 pm

            If I’d like to use your code but access different data altogether is there a way of removing a data layer completely to avoid any kind of duplicates before adding a new data model?

            Thanks

          • Taiseer Joudeh says

            April 29, 2014 at 4:47 pm

            Hello Mark,
            What do you mean by accessing data altogether? could you please elaborate more? You can use any Data access layer to get your data using Angular services.

          • Mark says

            April 29, 2014 at 5:41 pm

            I’d like to bring a database and use EF database first. Will that conflict with existing data access code?

          • Taiseer Joudeh says

            April 29, 2014 at 5:44 pm

            Absolutely not, as well this was covered in this tutorial, you can check the code for this here
            Good luck in your project!

  5. Mark says

    April 25, 2014 at 7:10 pm

    Can you please explain how an AngularJS controller communicates with an MVC (c#) controller to get data? If that’s what they do. Thanks

    Reply
  6. brajpanda says

    May 18, 2014 at 11:53 am

    Very well done! I recommend this series to anyone who is a beginner at Angular.

    Reply
    • Taiseer Joudeh says

      May 18, 2014 at 12:02 pm

      Thank you brajpanda, feel free to share it with your peers in your network 🙂

      Reply
  7. eni says

    June 16, 2014 at 11:11 am

    Great articles. They are helping a lot. Thank you!

    Reply
    • Taiseer Joudeh says

      June 16, 2014 at 11:14 am

      Hello Eni, Glad that posts were useful 🙂

      Reply
  8. Dwight Vietzke says

    June 26, 2014 at 7:25 pm

    Hi Taiseer,

    Thanks for the great tutorial. Always helps to have working examples to jump into as you gain knowledge.

    Just a “heads up”, but the FoursquareAngularJS.Web (others?) example code uses angular ui-bootstrap-tpls-0.9.0.js and works just fine. However, when I use the latest version (ui-bootstrap-tpls-0.11.0-tpls.js), I get an error in the pagination section:

    Object # has no method ‘$render’ at line 2207:19

    I’m new to Angular, so I can’t offer anything more than letting you know there might be changes which may effect your demo.

    Anyway, thanks again.

    Reply
    • Taiseer Joudeh says

      June 28, 2014 at 3:49 pm

      Hi Dwight, glad you liked it, and it is always better to have working example so readers can play and test it out.
      I know about this issue, the API for data-pagination in Angular Bootstrap UI 0.11.0 version has been changed, they simplify it more. I might update this soon once I’ve the time.
      The fix for this is to change the controller as the below:
      $scope.pageChanged = function () {
      getPlaces();
      };
      And the properties in the that should be changed for data-pagination directive as below:
      data-ng-change=”pageChanged()” data-ng-model=”currentPage”
      Didn’t test it out but it should work.

      Reply
      • Dwight Vietzke says

        June 28, 2014 at 7:33 pm

        Can’t thank you enough for the update. It really helps to have working examples when you are learning. Cheers!

        Reply
  9. Scott says

    August 6, 2014 at 5:54 pm

    Thank you so much. I was able to download the example app, compile and run it. I’ve been looking all over for an example that would “just work” that i could debug through to learn how to use AngularJS. Thanks for providing this great example.

    Reply
    • Taiseer Joudeh says

      August 6, 2014 at 5:56 pm

      Hi Scott, you are welcome 🙂 I recommend you to look at AngularJS authentication posts as well. They cover more advanced features.
      Let me know if there is something unclear while you are debugging the code, good luck learning AngularJs 🙂

      Reply
  10. Batuta Batuta says

    September 11, 2014 at 6:48 pm

    This is a very good tutorial. Something that could really get people started.

    I do need a bit of some help though. Trying to extend this by adding a Delete functionality.

    I’ve added a link to the myplaces.html and modified the js files on the app folder (\controllers\myPlacesController.js, \services\placesDataService.js).

    I need some help implementing the Delete on the

    PlacesController.cs

    Or if you could provide some additional info on where to add the delete functionality, that would be great.

    Thanks and looking forward to your reply.

    Reply
    • Taiseer Joudeh says

      September 12, 2014 at 10:13 pm

      I recommend you to read my other post which implements the delete functionality in Web API, after you implement it you need to use $http.delete as your are doing $http.get. very simple to implement.

      Reply
  11. Batuta Batuta says

    September 12, 2014 at 6:54 pm

    This kind of stumps me.

    How were you able to default the MVC app to the Index.html file in the root?

    I was trying to do the same in my MVC app and it goes into Error 404.

    When I added the line:

    routes.IgnoreRoute(“”)

    to the App_Start/RouteConfig.cs on my application, I was able to go to Index.html (of course the URL is just still http://localhost:1234/# (which I was expecting).

    Appreciate any insight.

    Reply
    • Taiseer Joudeh says

      September 12, 2014 at 10:52 pm

      I think you need to remove “RouteConfig.RegisterRoutes(RouteTable.Routes);” from the application_start event in Global.asax file. check how it is done here
      My recommendation now if you want to build SPA is to start with “emtpy” ASP.NET Web project with no dependancies at MVC, if you want to add Web API then you can use Owin middle ware or you add it from Nuget. Check how I’m doing this in my Token based authentication post here.

      Reply

Trackbacks

  1. Kool Open Source Web 2.0 Apps in .NET | Insight's Delight says:
    May 1, 2014 at 8:02 am

    […] Building SPA using AngularJS and Using Durandal to Create Single Page […]

    Reply
  2. An Exploration of AngularJS - Promises, Promises - blog.credera.com says:
    July 23, 2014 at 2:43 pm

    […] are many great tutorials on AngularJS that provide a starting point for app development. This post is one of a series […]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About Taiseer

Husband, Father, Consultant @ MSFT, Life Time Learner... Read More…

Buy me a coffeeBuy me a coffee

Recent Posts

  • Integrate Azure AD B2C with ASP.NET MVC Web App – Part 3
  • Secure ASP.NET Web API 2 using Azure AD B2C – Part 2
  • Azure Active Directory B2C Overview and Policies Management – Part 1
  • ASP.NET Web API Claims Authorization with ASP.NET Identity 2.1 – Part 5
  • ASP.NET Identity 2.1 Roles Based Authorization with ASP.NET Web API – Part 4

Blog Archives

Recent Posts

  • Integrate Azure AD B2C with ASP.NET MVC Web App – Part 3
  • Secure ASP.NET Web API 2 using Azure AD B2C – Part 2
  • Azure Active Directory B2C Overview and Policies Management – Part 1
  • ASP.NET Web API Claims Authorization with ASP.NET Identity 2.1 – Part 5
  • ASP.NET Identity 2.1 Roles Based Authorization with ASP.NET Web API – Part 4

Tags

AJAX AngularJS API API Versioning ASP.NET Authentication Autherization Server Azure Active Directory B2C Azure AD B2C basic authentication C# CacheCow Client Side Templating Code First Dependency Injection Entity Framework ETag Foursquare API HTTP Caching HTTP Verbs IMDB API IoC Javascript jQuery JSON JSON Web Tokens JWT Model Factory Ninject OAuth OData Pagination Resources Association Resource Server REST RESTful Single Page Applications SPA Token Authentication Tutorial Web API Web API 2 Web API Security Web Service wordpress.com

Search

Copyright © 2022 · eleven40 Pro Theme on Genesis Framework · WordPress · Log in

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.