This document provides an overview of AngularJS, a front-end web application framework. It discusses that AngularJS uses an MVC framework structure to separate the view (what the user sees) from the model (the data) and controller (application logic). The document demonstrates key AngularJS concepts like directives, modules, controllers, data binding, and routing. It also compares AngularJS to other front-end frameworks like React and Ember.

1. 02 | AngularJS
Helen Zeng | Startup Developer Evangelist
Steven Edouard | Startup Developer Evangelist

2. • What’s a front end framework?
• Directives
• Modules & Controllers
• Models & Data Binding
• Routing
Module Overview

3. Front End Frameworks

4. A framework, not a library
• jQuery is a library with functions that makes javascript
interactions less painful
• Angular.js is an MVC framework. You use it to structure out your
application looks (view) from your data (model) and the logic
and functions that are executed (controller). It’s also extremely
test driven.

5. Why Use Angular?
• “What HTML would look like if it was designed for web apps”
• Keep your code organized and structured
• Two way data bindings
• Great for single page applications
• Easy to test

6. Front End Frameworks
• Angular isn’t the only one out there. There’s a whole ecosystem
– React.js
– Ember.js
– Backbone.js

7. DEMO
Hello World

8. Directives

9. Directives
• Angular-only HTML attributes
• Attaches some specific behavior to the element
• Usually begins with ‘ng-’ or ‘data-ng’

10. Models and Controllers

11. Modules
• A container for your application
• var myModule = angular.module(‘myApp’, [ ]);

12. Controllers
• Contains the business logic for a part of your application
• Sets up your data to be viewed in your HTML
• myModule.controller(‘myController’, function($scope){
});

13. Dependency Injection
• How we specify the dependencies that an Angular component
will need.

14. Templates
• The Angularized HTML we’re created
• Used to render the View (what the end-user will see)

15. DEMO

16. Models and Data Binding

17. $scope
• Links your controller to your view (what the user sees)
• Created through as an injectable parameter in controllers
• Configured within controller logic
• Contains the models for our data

18. Displaying and Binding Data
• Display using double braces {{ }}
• Bind data using directives:
– ng-model for two way data binding
– ng-bind for one way data binding

19. DEMO

20. Front End Routing

21. Routing
• Create app with multiple views
• Must pass `ngRoute` module to app
• Detects url and uses the appropriate template

22. Creating Partials
• Sections of the page to be rendered as-needed
• Rendered inside ng-view

23. DEMO

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