SPA05-Intro-to-Angular Introduction and its types

SPA05-Intro-to-Angular Introduction and its types

• 1.
  05 | AnIntroduction to AngularJS Stacey Mulcahy | Technical Evangelist Dave Voyles | Technical Evangelist
• 2.
  Module Overview • Thewhat and whys of AngularJS • jQuery to AngularJS • Common AngularJS Taxonomy • AngularJS BootStrapping
• 3.
  The what andwhy 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 jQueryto 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 DeclarativeUI in AngularJS vs jQuery
• 9.
  AngularJS Taxonomy
• 10.
  AngularJS Taxonomy MODULE CONTROLLERDIRECTIVES 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 downloadedHTML 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 VideoTutorials 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
• 14.
  ©2014 Microsoft Corporation.All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.