Skip to content

Learning AngularJS: Helpful Info Sources

August 18, 2013

Since posting the “.NET Single Page Applications (SPA):  Helpful Info Sources” article in this blog in late July 2013, I’ve devoted my time to learning how to use the AngularJS SPA development framework.  In the July blog article I identified AngularJS as one of the leading emerging SPA libraries.

The reason I’ve elected to learn AngularJS is that I have come to believe it is an exceptional framework for developing fairly SOLID client-side Rich Internet Applications (RIA) that may be small (a few screens), medium (up to 15 – 20 screens), or large (in excess of 20 screens).  Based on my 5 years of RIA development in Silverlight, developing an app with more than 20 or so screens can be very time consuming and difficult unless the development framework supports an excellent separation of concerns.  With Silverlight the MVVM pattern went a long way to facilitate the development of large RIAs, as did the use of Repositories, Dependency Injection, loosely coupled messaging/eventing, loosely coupled commands, and Prism style Regions, etc.  All of these patterns support the SOLID principles in one or more ways.  See Wikipedia for a definition of SOLID principles at http://en.wikipedia.org/wiki/SOLID_%28object-oriented_design%29.

In short, when a client-side RIA development framework supports the implementation of SOLID code, development of large, rich internet apps becomes cost effectively attractive.  Without such support, a large app will become more, and more difficult and costly to develop and maintain as its size increases due to an ineffective separation of concerns.  And, unfortunately, this expansion in difficulty and cost is exponential due to the non-linear behavior of increasing code complexity without a strong separation of concerns.

AngularJS was developed explicitly to have very high testability of its apps.  As a result, AngularJS has a fabulous separation of concerns built into it that is easily used by a developer to build SOLID apps, especially when using TypeScript to provide interfaces.  Even without TypeScript’s interfaces, however, I am very impressed by how extensively AngularJS supports developing apps with a great separation of concerns.  This means AngularJS apps have a high potential of being cost effectively testable, extensible, and maintainable.

Given the above, plus the large sustained demand for RIAs (both for end user apps and Line-of-Business apps) I have come to believe that AngularJS has a high probability of becoming a leading development platform for RIAs.

The following factors will act to lower the risk of choosing  AngularJS as an RIA development framework at this point in time:

  • AngularJS is a Google product with a full dev team supporting it, although it is also open source.  The same goes for its testing frameworks Karma and End-To-End Tests, and for its AngularUI add on library.  Thus it will not “go stale” after a few years as do many open source projects.  And you do not have to cobble together a bunch open source JavaScript libraries to effectively use AngularJS.  This increases the stability of the app during development and beyond into maintenance.
  • There are currently no other JavaScript libraries that even come close to providing the features of AngularJS.  AngularJS is truly unique, and not just a library but a full featured client-side framework complete with its own run-time that makes possible its 2 way data binding and its ability to extend HTML5, plus making HTML easily dynamic.
  • Once you “get it”, writing code with AngularJS often produces nice GUIs surprisingly quickly, in many cases without writing nearly as much code as one would write in Silverlight for a similar feature.
  • Like Silverlight, AngularJS supports the development of simple to complex “user controls” and “custom controls”, and reusable libraries thereof.  Plus it supports developing reusable libraries of non-GUI elements like client-side services and providers.  And, Dependency Injection is built into AngularJS so that such client-side services, providers, etc. can be cleanly injected into client code and client-side MVC controllers.
  • AngularJS can also be advantageously used to develop non-SPAs, i.e. to develop regular web apps that transfer an entire page during each user navigation.  With AngularJS, you get a good potential for a solid separation of concerns in such an app.
  • A growing number of .NET RIA developers and MVP’s that were leaders in the ramp up of Silverlight in 2008 – 2010 are currently blogging about AngularJS and developing video courses to aid in learning Angular.  At this point they are:
  1. Jeremy Likness — http://csharperimage.jeremylikness.com/
  2. Dan Wahlin — http://weblogs.asp.net/dwahlin/
  3. Shawn Wildermuth — http://wildermuth.com/

Time will tell about the popularity of AngularJS.  If you want to learn AngularJS, I’ve found the following info sources to be helpful in learning AngularJS myself.

If you had to read only 2 documents to get a sold conceptual view of AngularJS before diving in to the details, read these:

http://docs.angularjs.org/guide/overview and http://docs.angularjs.org/guide/concepts which has great diagrams.

If you could watch only one free video to get a good overview of what AngularJS development is about at both the very detailed level, and also at a more high level view, watch this video by Dan Wahlin.  I consider this a must to quickly “get it”!

http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs-fundamentals-in-60-ish-minutes.aspx

If you could use only one free video course to get a good understanding of the key elements of AngularJS at a very low level, watch each of John Lindquist’s free 46 mini-courses of roughly 5 minutes each:

http://www.egghead.io/

If you could take one or two paid video courses to learn AngularJS, PluralSight has a couple:

“AngularJS Fundamentals” by Jim Cooper and Joe Eams.

http://pluralsight.com/training/courses/TableOfContents?courseName=angularjs-fundamentals&highlight=joe-eames_angularjs-fundamentals-m1-intro*2,3,6,4,5!joe-eames_angularjs-fundamentals-m6-testing#angularjs-fundamentals-m1-intro

“Building a Site with Bootstrap, Angular, ASP.NET, EF, and Azure” by Shawn Wildermuth.

http://pluralsight.com/training/courses/TableOfContents?courseName=site-building-bootstrap-angularjs-ef-azure&highlight=shawn-wildermuth_site-building-m6*0,1!shawn-wildermuth_site-building-m7*1,3,10,5!shawn-wildermuth_site-building-m8*4,6#site-building-m6

If you do take the Eams and Cooper  “AngularJS Fundamentals” course, be sure to view this blog for detailed assistance in how to put together the development tools.

http://bardevblog.wordpress.com/2013/07/28/setting-up-angularjs-angular-seed-node-js-and-karma/

If you want to know what seasoned developers of web sites and web apps in JavaScript and jQuery think of AngularJS, read these blogs.

http://bardevblog.wordpress.com/2013/08/03/how-i-navigated-to-angularjs/

http://blog.artlogic.com/2013/05/02/ive-been-doing-it-wrong-part-1-of-3/

I hope you find these sources as helpful as I did.

George Stevens

Creative Commons License

dotnetsilverlightprism blog by George Stevens is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Based on a work at dotnetsilverlightprism.wordpress.com.

Advertisements
Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: