Your Cloud.Your Business.

Top 10 Reasons to Learn AngularJS Jeremy Likness Principal Architect @JeremyLikness

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

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

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

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

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

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/

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

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.

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

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

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

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!

Questions?

More Angular Projects and Examples:https://www.github.com/jeremylikness

Email me to learn more:jlikness@ivision.com

Jeremy Likness, Principal Architect @JeremyLikness