Having worked on various enterprise Angular projects our teams have been faced with myriad challenges to overcome and has quite a bit of “in the trenches” experience. I share what I can with other developers through my various blog posts, by answering questions on StackOverflow and through a large collection of JavaScript fiddles. I also realized early on that Angular is a very important library and began recording a video course to help others Master Angular JS. The course has grown to well over 8 hours of content (yes, a full DAY of Angular!) and there are still several lessons left to record. In this post I organize some of the content and resources I’ve created as a guide to help you link into information, code snippets, and other information that may help you build your Angular apps.
If you’re in the early stages of learning Angular, you might ask yourself “Why?” That’s why I wrote 10 Reasons Web Developers Should Learn AngularJS. I attended one of the first Angular conferences in the U.S. that sold out in minutes, and had the opportunity to meet with other .NET developers and record a video panel discussion about Angular and the .NET World.
With an early version of Angular (and TypeScript) I also wrote a fairly large project that you can browse. I describe it in my blog post, “Commodore 64 Meets Angular JS and TypeScript.” Have fun running the emulator or click on the specs links to see unit tests. Visit CodePlex for the full source.
Fundamentals of AngularJS
One of the things that really drew me to Angular was the simplicity and lack of ritual. There is not a lot of set up or hand-waving necessary to get an app up and running. Take a look at a mini-app from scratch that echoes what you type:
Angular app from scratch: http://jsfiddle.net/jeremylikness/BzmfT/
There is a lot more to it, and I cover it all in the Fundamentals of Angular lesson. The best place to start learning about it is at the beginning. In the inaugural video in this series, I lay the groundwork for later modules by introducing scope for data-binding, controllers for MVC on the client, events, filters to format output, directives to extend the HTML vocabulary, modules to group code, services to provide application-wide functionality, and routes to enable Single Page Applications (SPA).
Note: All of my links to WintellectNOW videos can be accessed using the code LIKNESS-13. This offers a free trial. Although it will require a credit card, you will receive 2 weeks of unlimited access with no obligation – you can cancel at any time.
Despite how simple it is, Angular is incredibly flexible and customizable. For example, here’s a little fiddle that shows how you can even bootstrap Angular manually as needed:
Bootstrapping Angular manually: http://jsfiddle.net/jeremylikness/wMF4x/
Scope and Digest Loop (Data-binding)
The key to using Angular is to understand how it’s data-binding works via the scope and the digest loop. The lesson I recorded (Angular Scope and Digest Loop) covers scope, expressions, hierarchy, UI patterns, prototypical inheritance, the DOM, how to access scope externally, the lifecycle (including apply, digest, and destroy), watches, and events. Together with the digest loop, scope facilitates data binding by providing the glue between declarative HTML and imperative program logic. You’ll learn about the scope lifecycle, how scope interacts with the HTML DOM, and the various functions the scope provides including expression evaluation, property-change notifications, and events.
Did you know you can train Angular to watch properties on external objects? I have an example here: http://jsfiddle.net/jeremylikness/Ts9p4/
It’s easy to do cascading selections: http://jsfiddle.net/jeremylikness/7dUyf/
Here’s how to create a task to fire an update in a subsequent digest: http://jsfiddle.net/jeremylikness/bWeQL/
It’s quite common to throttle parsing of input: http://jsfiddle.net/jeremylikness/5KeMw/
Another example of watching for changes in objects outside of Angular: http://jsfiddle.net/jeremylikness/HU7Wn/
Set a deep watch on a single property: http://jsfiddle.net/jeremylikness/GrRtK/
Copying lists: http://jsfiddle.net/jeremylikness/xdzxb/
Handle events: http://jsfiddle.net/jeremylikness/BPX49/
Up/Down vote example: http://jsfiddle.net/jeremylikness/bPQXJ/
Intercept a form post: http://jsfiddle.net/jeremylikness/T6B2X/
Filters
Filters provide a declarative way to format data in the presentation layer of Angular apps. XAML developers will recognize filters as an HTML version of value converters. I cover all of the filters that Angular ships with that format currency, dates, times, filter and sort lists, and much more. I also show how to write tests for filters and walk you through creating a custom filter of your own. The Advanced Filters lesson covers the built-in filters like currency, date, filter, json, limitTo, number, and orderBy, then shows how to create custom filters, filters that take parameters and even have dependencies on other services.
Here’s how to create a filter that throws an exception when a data-binding property is not defined: http://jsfiddle.net/jeremylikness/BHjRg/
Dependency Injection
Enterprise and line-of-business applications are often composed of multiple interdependent components. Angular provides a set of services that enable management of dependencies and component lifetime, configuration of services, and even service interception to extend existing functionality. In my Dependency Injection lesson you can follow along while I build a sample app (on the fly – it’s mostly live coding) and then refactor it to use inversion of control. From factories and services to providers and interceptors, you don’t want to miss out on the rich features Angular provides for dependency injection on the client.
Here’s a walkthrough of what is covered in the video purely in code:
1. Manually wiring it up: http://jsfiddle.net/jeremylikness/PK2fB/
2. Inversion of Control: http://jsfiddle.net/jeremylikness/PK2fB/1/
3. Angular DI: http://jsfiddle.net/jeremylikness/PK2fB/2/
4. Using providers: http://jsfiddle.net/jeremylikness/PK2fB/3/
5. Using decorators: http://jsfiddle.net/jeremylikness/PK2fB/4/
Here’s how to build a dynamic factory: http://jsfiddle.net/jeremylikness/QM52v/
Blog post: Understanding Providers, Services, and Factories in Angular
What if you import two modules that have a service with the same name? Solve it like this: http://jsfiddle.net/jeremylikness/xEt94/
See services vs. factories in code: http://jsfiddle.net/jeremylikness/7dUyf/
Or even providers vs. services vs. factories: http://jsfiddle.net/A6Cb2/7/
Services
In Angular, the term "services" refers to singleton references to objects and functions that carry out specific tasks. Angular provides several built-in services for everything from manipulating the URL in the browser, running code at regular intervals, and interfacing with Web services to managing asynchronous workflows using JavaScript promises. My Angular Services lesson walks through the core services shipped with Angular by providing detailed hands-on examples and covering advanced topics such as promises, strict contextual escaping, and how to interface with various providers to configure the behavior of built-in services.
Here’s examples of parsing expressions various ways: http://jsfiddle.net/jeremylikness/CAHKE/
Returning a promise using $q: http://jsfiddle.net/jeremylikness/HL7h2/
$q.when: http://jsfiddle.net/jeremylikness/Q2jMG/
$q.all: http://jsfiddle.net/jeremylikness/UzXzq/
Deferral: http://jsfiddle.net/jeremylikness/PhZYb/
Synchronizing the state of a form: http://jsfiddle.net/jeremylikness/Gz77C/
Web Services
For years, AJAX has enabled developers to write asynchronous, responsive Web applications. Issuing requests from your browser just got easier with the built-in services provided by Angular that support the full suite of HTTP verbs as well as JSONP. In my Angular Web Services lesson, learn how to interact with Web pages and Web services using Angular $http and $resource services, how to transform requests and responses with interceptors, and how to secure your app against JSON vulnerabilities using cross-site request forgery (XSRF) tokens. I conclude the lesson with a demonstration of how Angular’s Web services can be mocked out of the box to facilitate unit testing without having to spin up your web server.
To get a taste for what the course covers, check out the Web Services example project: https://github.com/JeremyLikness/AngularWebServices and browse the various web service examples live.
An example of using $http interceptors: http://jsfiddle.net/jeremylikness/rWRA3/2/
Directives
Directives are a powerful feature that enables reuse of controls, much like the proposed Web Components specification.There will be two directives courses added to the library shortly by my colleague Dave Baskin, who authored the Angular MVC Cookbook. The page also links to his series of blog posts on the topic. I look forward to adding those videos. Until then, you can check out:
Examples of scope isolation in directives: http://jsfiddle.net/jeremylikness/3pvte/
Blog post: Synergy Between Services and Directives in Angular JS
Using a service to communicate with a directive: http://jsfiddle.net/jeremylikness/wqXYx/1/
Data-binding to a sub-property: http://jsfiddle.net/jeremylikness/Q6jKD/
Routing
Single Page Applications (SPAs) enable rich desktop experiences for users without requiring pages to rerender or post back to the server. However, special care must be taken in SPAs to provide a consistent user experience by enabling the back and forward buttons and allowing pages to be bookmarked in various states. In the Routing lesson, I cover the Angular team's ngRoute module as well as the third-party Angular ui-router module and demonstrate their utility in SPAs. Learn how to configure routes, render templates, and resolve promises in an action-packed lesson that includes two complete, fully functional examples built using two different route providers.
Check out what I cover by browsing and running the Angular Routes example project (ngRoute and ui-router): https://github.com/JeremyLikness/AngularRoutes
Testing
Angular was built from the beginning to support testing. The next lesson I’ll release is going to cover testing with Jasmine. Here’s some code and a blog post that cover a bit:
http://jsfiddle.net/jeremylikness/h8DS8/
Testable Filters with TypeScript, Angular JS, and Jasmine
Advanced
I categorize these posts as advanced just because they cover topics related to very specific scenarios you may run into. The blog posts all come with full source in their respective links.
Using Zone to Trigger Angular Digest Loop for External Functions
Instrumenting Angular with Zone
Interception Using Decorator and Lazy-Loading with Angular JS
Throttling Input in Angular JS Applications using Underscore Debounce
Migration
A lot of what we do is help enterprises migrate from existing platforms like Silverlight to modern solutions. We’ve done this enough that we wrote a white paper about it! I wrote about the similarities between XAML and Angular in this post about Migrating from Silverlight and you can download the whitepaper directly from this link.
Conclusion
I was very surprised when I took inventory and realized how much I’ve written about Angular and how many sample projects and code snippets I’ve been able to publish. If you’re like me, you would much rather have a single place to reference to jump to links when and where you need them. Although I am not quite ready to take on the task of indexing everything available on the Internet, I can certainly take the time to organize my own resources as in this post. I strongly urge you to check out my course as well. The LIKNESS-13 code will not only gain you access to that course, but also 250 other videos covering everything from Node and the cloud to C# development, algorithms, data structures, and almost anything else you might like to add to your programming arsenal.
What are you doing?
I’m amazed at how quickly Angular has been adopted. I can see the enthusiasm in the user groups as the attendance swells and hear the sense of urgency from customers as they look at legacy platforms and try to determine what the best approach to taking their enterprise to the web will be. I’m very interested to learn what projects you are working on and where your interest in Angular comes from. If you have a minute, take some time to drop a comment below and let us know about your Angular work or questions you might have!
Thanks, and happy coding.
