SPA05-Intro-to-Angular Introduction and its types

Presentation about Angular

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

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

3. The what and why of AngularJS

4. 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

5. 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

6. Moving from jQuery to AngularJS

7. 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

8. jQuery to AngularJS Declarative UI in AngularJS vs jQuery

9. AngularJS Taxonomy

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

11. AngularJS Bootstrapping

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

13. 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