05 | An Introduction to AngularJS Stacey Mulcahy | Technical Evangelist Dave Voyles | Technical Evangelist

Module Overview The what and whys of AngularJS jQuery to AngularJS Common AngularJS Taxonomy AngularJS BootStrapping

The what and why of AngularJS

What is AngularJS Open source framework maintained by Google and community MVC framework for dynamic web applications Extends HTML for two way binding for automatic synchronization of models and views Declarative UI and Imperative Business Logic

Why Angular JS Angular JS is widely embraced by the web development community and is very active creating resources Visual Studio with Web Essentials provides intellisense for AngularJS in HTML Many features including templating, two way data-binding, dependency injection, directives, testable, extensibility

Moving from jQuery to AngularJS

jQuery to AngularJS Requires a bit of a mindshift jQuery is seen as augmentation, not infrastructure Architecture focused : building applications, not web pages Declarative UI means view based functionality is apparent Distinct Model Layer – not the DOM

jQuery to AngularJS Declarative UI in AngularJS vs jQuery

AngularJS Taxonomy

AngularJS Taxonomy MODULE CONTROLLER DIRECTIVES SERVICES Extend HTML, used as widgets often Organizational and reusable container for different parts of your apps. Module for each feature. Business logic for views Reusable business logic independant of views

AngularJS Bootstrapping

AngularJS Bootstrapping AngularJS downloaded HTML page is loaded Looks for ng-app Scope object created Injector for Dependency Injector Created sets ng-app as root of app Traverses dom to find directives, bindings etc Waits for changes to model Updates bindings on change of model

Resources Best Video Tutorials over at Egghead.io https://egghead.io/ Definitive Guide http://www.airpair.com/angularjs Angular Code Snippets http://www.johnpapa.net/angularjs-code-snippets- for-visual-studio/ Style Guide https://github.com/johnpapa/angularjs-styleguide#single- responsibility Visual Studio Angular SPA template http://visualstudiogallery.msdn.microsoft.com/5af151b2-9ed2-4809-bfe8- 27566bfe7d83