Angular is trending, and for a good reason. It is not just a fad, but a valuable tool that enables developers to build better client-centric JavaScript code faster and better with improved quality. This deck explains 10 reasons why it is important to consider Angular for modern enterprise web development based on Jeremy's extensive experience implementing Angular in real world projects.

1. Your Cloud.
Your Business.
Top 10 Reasons to Learn AngularJS
Jeremy Likness
Principal Architect
@JeremyLikness

2. What is AngularJS?
• https://www.angularjs.org/
• Self-proclaimed super-heroic JavaScript framework that teaches
HTML5 new tricks
• Trending to be one of the most popular frameworks around

3. 1. Got XAML? Come to Angular!
• AngularJS is declarative (like XAML)
• IValueConverter = Angular’s Filter
• Control = Angular’s Directive
• AngularJS Supports Two-Way Binding
• True Design/Developer Separation

4. 2. Less Ritual and Ceremony
• This is an entire self-contained AngularJS app that echoes your input
using data-binding:
<script
src="http://code.angularjs.org/1.2.9/angular.js"></script>
<div ng-app><input type="text" ng-model="
txt"/><span>{{txt}}</span></div>
• Here’s the proof: http://jsfiddle.net/jeremylikness/BzmfT/
• Dirty-tracking means less ceremony and ritual in your setup
• One Google developer rewrote 6 months, 17,000 lines of code in 3
weeks and shrank it down to 1,500 lines of code

5. 3. Dependency Injection
• Dependency Injection is provided with Angular “out of the box”
• Includes mock objects for things like web service (HTTP) calls for
true, easy-to-write unit tests
• Learn more here:
http://csharperimage.jeremylikness.com/2014/06/dependency-injection-
explained-via.html
and here:
http://csharperimage.jeremylikness.com/2014/08/angularjs-lifetime-
management-lazy.html

6. 4. Declarative UI
• HTML is declarative
• Original goal of AngularJS was to allow non-developers to be
able to set up filters, tags, and other functionality
• Keeps presentation logic declarative and separate from the
imperative business logic
• This approach reduces side effects
• Enables a cleaner developer/designer workflow

7. 5. ‘DD … Test- and Behavior-Driven Dev
• AngularJS has its own test suite
• Ready to test out of the box
• Plays well with popular frameworks like QUnit and Jasmine
• Has its own testing framework (Protractor)
• Data-binding makes it easier to test presentation logic independent of
the UI/view
• Everything is testable, including filters and directives (“controls”)
• See tests for a 6502 emulator written in AngularJS:
http://apps.jeremylikness.com/apps/t6502/

8. 6. Massively Parallel Development
• Many people complain about JavaScript in the enterprise
because it’s not scalable and being dynamic makes it difficult to
manage
• Independent of AngularJS, solutions like CoffeeScript and
TypeScript can help
• With AngularJS the modular approach makes it really easy to
architect the system to allow massive parallel development
• Personally worked on project with 25+ globally distributed
developers working on over 80,000 lines of client code

9. 7. Designer/Developer Workflow
• Don’t just scale within development. Scale across teams!
• HTML and CSS hold the design for the app.
• The app is declarative so designers don’t need to learn
JavaScript to modify the design.
• Data-binding provides a “design contract” – if you know you are
working with data elements you can build functionality before
the design is even available or ready without worrying about
significant refactoring or rework.

10. 8. Controls (Directives)
• Web Components are part of ECMAScript 6 “Harmony” but not
yet “current” for browsers
• Polymer from Google is also a forward-looking framework
• Directives in AngularJS are available right now
• Have a special way to handle selection boxes, masked input, or
other logic? Contain it in a control to reuse across modules nad
projects.
• Directives are testable, can be worked on in parallel, extend the
UI declaratively and participate in dependency injection

11. 9. State
• HTTP is a stateless protocol
• ASP.NET WebForms hide state using “view state” etc.
• MVC goes “back to the basics” but some people find state
management to be a challenge
• Single Page Applications (SPA) address this
• AngularJS supports SPA, HTTP, and AJAX concepts out of the
box. Interact with services as a state of a running app and don’t
worry about cookies or long URLs

12. 10. Single Page Apps (SPA)!
• Yeah, I said it
• Not required for AngularJS but what it is best known for
• ngRoute gives routing out of the box
• ngView gives you a placeholder
• ui-router gives even more control with nested views and state
management
• Full support for asynchronous loading of routes and resolution
of asynchronous calls before rendering your templates

13. Conclusion
• Read the full article:
http://csharperimage.jeremylikness.com/2013/09/10-reasons-web-
developers-should-learn.html
• These points are based on real-world experience using
AngularJS on large enterprise apps
• Watch the full course to master AngularJS here:
http://bit.ly/masterang
• AngularJS and TypeScript are better together!

14. Questions?
More Angular Projects and Examples:
https://www.github.com/jeremylikness
Email me to learn more:
jlikness@ivision.com
Jeremy Likness, Principal Architect @JeremyLikness