ngularJS JumpStart
View, Directives
and Filters
© Wahlin Consulting – All Rights Reserved
Data Binding Overview
Directives and Expressions
Iterating Over Data
Sorting and Formatting Data
The Big Picture
Module
Config
Routes
View $scope Controller
Directives *Factory
Data Binding Overview
Data Binding
JavaScript doesn't provide native support for data
binding
Two-way data binding can lead to significant
reductions in code
Changes updated
in property
Name: John Doe Name Property
Changes updated
in control
Control-Oriented
versus
Data-Oriented
Control-Oriented Development Workflow
Name: John Doe Submit
1. Code assigns value to a textbox
document.getElementById('name').value = 'John Doe';
2. User modifies data
3. User clicks a button
4. Code pulls the value out of the textbox
var name = document.getElementById('name').value;
Data-Oriented Development Workflow
Name: John Doe Submit
1. Property is bound to a textbox
<input type="text" bindProperty="name" />
2. User modifies data
3. Property value is automatically updated!
Directives and Expressions
What are Directives?
Directives teach HTML new tricks!
What can Directives Do?
DOM Manipulation View Loading
Data Binding CSS
Controllers/ Events
Modules
Examples of AngularJS Directives
DOM Manipulation Modules/Controllers
ng-hide ng-app
ng-repeat ng-controller
ng-show
ng-view
Data Binding Events
ng-bind ng-click
ng-init ng-keypress
ng-model ng-mouseenter
Defining Directives
Directives can be defined multiple ways:
<div ng‐hide="isHidden">
<div data‐ng‐hide="isHidden">
<ng‐view></ng‐view>
AngularJS Expressions
Expressions are code snippets
placed in binding markup:
Binding
markup {{ 1 + 1 }}
Expression
Iterating Over Data
Iterating with the ng-repeat Directive
<html ng‐app>
... Provides initial data
<div ng‐init="names=['Dave','Jeff','Heedy','Danny']">
<h3>Iterating through data with ng‐repeat</h3>
<ul>
<li ng‐repeat="name in names">{{ name }}</li>
</ul>
</div>
... Iterate through
</html> names
Sorting and Formatting Data
Filters and Pipes
AngularJS can "pipe" data through filtering,
formatting, and sorting functions
Uses the | character
$9.99
9.9912
Currency Filter
Key AngularJS Filters
currency
date
filter
json
limitTo
lowercase
number
orderBy
uppercase
Sorting and Formatting Data
<ul>
<li data‐ng‐repeat="cust in customers | orderBy:'name'">
{{ cust.orderTotal | currency }}
</li>
</ul>
Format as currency Order customers by
name property
Filtering Data
<input type="text" data‐ng‐model="nameText" />
<ul>
<li data‐ng‐repeat="cust in customers | filter:nameText |
orderBy:'name'">
{{ cust.name }} ‐ {{ cust.city }}</li>
</ul> Filter customers by
model value
Summary
The Big Picture
Module
Config
Routes
View $scope Controller
Directives *Factory
Summary
Views handle UI functionality
Directives enhance HTML:
Manipulate the DOM
Used to reference model properties
Iterate over data and generate HTML
Much more..
Filters are used to format, sort, or filter data
© Wahlin Consulting – All Rights Reserved
