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
"05 | An Introduction to AngularJS Stacey Mulcahy |" is the property of its rightful owner. Permission is granted to
download and print the materials on this website for personal, non-commercial use only, and to display it
on your personal computer provided you do not modify the materials and that you retain all copyright
notices contained in the materials. By downloading content from our website, you accept the terms of this
agreement.
Presentation Transcript
01
05 | An Introduction to AngularJS Stacey Mulcahy | Technical Evangelist
Dave Voyles | Technical Evangelist<br>
02
Module Overview The what and whys of AngularJS
jQuery to AngularJS
Common AngularJS Taxonomy
AngularJS BootStrapping<br>
03
The what and why of AngularJS<br>
04
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<br>
05
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<br>
06
Moving from jQuery to AngularJS<br>
07
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<br>
08
jQuery to AngularJS Declarative UI in AngularJS vs jQuery<br>
09
AngularJS Taxonomy<br>
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<br>
11
AngularJS Bootstrapping<br>
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<br>
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<br>
