Microsoft Virtual Academy

Click to edit
Master subtitle
style

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

Module Overview
Whats a front end framework?
Directives
Modules & Controllers
Models & Data Binding
Routing

Microsoft Virtual Academy

Click to edit
Master subtitle
style

Front End Frameworks

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). Its also extremely test driven.

Why Use Angular?

What HTML would look like if it was designed fro
web apps
Keep your code organized and structured
Two way data bindings
Great for single page applications
Easy to test

Front End Frameworks

Angular isnt the only one out there. Theres a whole
ecosystem
React.js
Ember.js
Backbone.js

Microsoft Virtual Academy

DEMO
Hello World

Microsoft Virtual Academy

Click to edit
Master subtitle
style

Directives

Directives
Angular-only HTML attributes
Attaches some specific behavior to the element
Usually begins with ng- or `data-ng`

Microsoft Virtual Academy

Click to edit
Master subtitle
style

Models and Controllers

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

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)
{
});

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

Templates
The Angularized HTML were created
Used to render the View (what the end-user will see)

Microsoft Virtual Academy

DEMO

Microsoft Virtual Academy

Click to edit
Master subtitle
style

Models and Data Binding

$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

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

Microsoft Virtual Academy

DEMO

Microsoft Virtual Academy

Click to edit
Master subtitle
style

Front End Routing

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

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

Microsoft Virtual Academy

DEMO

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.