Building SPA with AngularJS: A Practical Introduction

On November 7th, I am planning to deliver a talk at the BC .Net User Group, undoubtedly, a local mini "Alma Mater" for a good number of British Columbia's .Net Developers and technology enthusiasts.  We have all learned something new here, and it is our own Vancouver, BC, Canada, forum to share ideas, new trends, technologies and get recharged to challenge the old.

The title of the presentation gives away what I have been leaning recently: Angular JS, a Google framework which is ideal for building Single Page Applications or SPA, but it is good for many other things as well.

The first time I heard about this newesh framework coming out of Google I had Daffy's reaction:  "But I just learned new stuff which is supposed to be the greatest thing ever!" - It is true Daffy, and "you've done wonderfully well" but once you learn how AngularJS works and its strengths you will have a powerful new tool for your work.  AngularJS is a full stack framework, it has lots of excellent documentation and support from the community.

AngularJS also has no dependencies to other libraries...  "Do you like what you are reading Daffy?  One library!"  Only that makes maintenance, a word that "Dr Evil of Softwarestershire" does not know how to pronounce, a bit easier.

In this presentation I am going to try to use examples to illustrate concepts and the audience input will be very much welcome.  Usually I learn more during a team presentation that I have to deliver than from the presentation preparation time because knowledge flows very interactively and I like that.

The objectives of this meeting are the following:

I will post the presentation here along with sample code snippets.

Post Meeting

I enjoyed delivering this talk and I hope that the presentation was effective.  If members of the audience took with them key concepts to help them get started with AngularJS then the presentation met its primary objective:  to "bootstrap" the learning of AngularJS.  

One very important question that came up during the meeting was Why Angular?  Why should I learn Angular now when there are other mature frameworks out there?  My answer is that although Angular could be used to accomplish complex tasks, AngularJS really shines when building Single Page Applications (SPA) due to some of its features:  Routing, Dependency Injection, View Injection, perfect to consume RESTful services to manipulate data, it MVC separation of responsibilities, testability, etc 

The scientific way to select any tool, and selecting AngularJS over other frameworks should not be any different, would be to set up a selection process and evaluate selection criteria which more matter to our project.  I added to the presentation deck the following slide to illustrate the idea.  The scores are from 0 to 10 where 0 would be the lowest score, poor performance, and 10 would be a high score or excellent for the specified selection criteria.  Therefore, assuming that my team would be creating a SPA solution, a table like this would help me select the best framework for us.

My enthusiasm about AngularJS grows the more I see its features.  We should keep learning together this technology.

Download Presentatino

Download Sample Code

References:

1. British Columbia Dot Net User Group
2. Getting started with AngularJS 
3. The AngularJS Magazine, By Dan Wahlin
4. Videos and Tutorials
5. HotTowel.Angular (rc3) by John Papa.  A new Visual Studio "nuget" package to speedup the process