1. Click to edit Master
subtitle style
Microsoft Virtual Academy
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. Click to edit Master
subtitle style
Microsoft Virtual Academy
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. Click to edit Master
subtitle style
Microsoft Virtual Academy
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
9. Click to edit Master
subtitle style
Microsoft Virtual Academy
AngularJS Taxonomy
10. AngularJS Taxonomy
MODULE CONTROLLE
R
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. Click to edit Master
subtitle style
Microsoft Virtual Academy
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-27566bfe7
d83
