6. A Traditional Hello World
•
Demo: A first angular program
•
Code:
http://jsbin.com/UkIhono/1/edit?html,js,output
7. What We Learned
•
An angular app has a root DOM node, marked by
ng-app
<html ng-app="MyApp">
8. What We Learned
•
We can use {{ … }} to inject JavaScript data into
our DOM
•
Values are searched in the active scope
<div ng-controller="Hello">
<h1>{{text}}</h1>
</div>
9. What We Learned
•
Controllers are JS objects
•
They are used to assign values to the active scope
<div ng-controller="Hello">
<h1>{{text}}</h1>
</div>
10. What We Learned
•
Some HTML elements got special attributes called
directives.
•
We met: ng-app, ng-controller
•
Directives tell angular how to process the page
11. What We Learned
•
We registered a controller factory using a special
angular function.
•
Angular later creates the controller instance
myApp.controller('Hello', ['$scope', function($scope) {
$scope.text = 'Welcome To Angular';
}]);
12. What We Learned
•
When registering a controller, we also tell angular
what services it needs
•
In our example, we asked for $scope
25. Bind Event Handlers
•
Angular assigns event handler from HTML using
directives
•
Example: Add functionality to calculate_total()
button from previous lab
26. Bind Event Handlers
•
But: There’s a bug …
•
Data is not updated back (from DOM to JS)
•
Let’s solve using angular
38. Angular Filters
•
A pipe in an expression tells angular to run it
through a filter before displaying
•
A filter is just a function taking input and returning
an output (can also take parameters)
45. Using Directives
<!-- 1: as an attribute declaration -->
<a custom-button>Click me</a>
<!-- 2: as a custom element -->
<custom-button>Click me</custom-button>
<!-- 3: as a class (used for old IE compat) -->
<a class="custom-button">Click me</a>
<!-- 4: as a comment -->
<!-- directive: custom-button -->
46. Let’s start with ng-repeat
•
Takes an array of values
•
Repeats an element for each item in the array
•
Useful for writing lists
47. Let’s start with ng-repeat
<ul>
<li ng-repeat="person in people”>
Name: {{person.name}}
</li>
</ul>
48. But there’s more
•
$index translates to the index of current iteration
•
$first is true on the first iteration
•
$last it true on the last iteration
•
$middle is true in the middle
•
$even and $odd are true on even and odd
iterations respectably
49. Repeat + Filters = Win
I have {{friends.length}} friends. They are:
<input type="search" ng-model="q" placeholder="filter friends..." />
!
<ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="friend in friends | filter:q">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
</ul>
http://docs.angularjs.org/api/ng.directive:ngRepeat
55. Lab
•
Modify our previous Shopping Cart page to allow
flexible products
•
Controller should keep a list of products
•
Page should display products from the list
61. Router Events
•
When using a router, you get the following events
on the $rootScope
•
$routeChangeSuccess
•
$routeChangeError
62. Handling Route Events
•
Following code shows an alert after each page transition
•
Can use from any Controller
$scope.$on('$routeChangeSuccess', function() {
alert('wow');
});
63. Demo
•
Write a message list two pages application
•
Page 1: list all messages
•
Page 2: message details (on specific message)
•
Clicking a message leads to page 2
83. Concepts
•
jQM turns normal HTML to mobile-friendly
markup
•
angular-jqm is a full reimplementation of the
transformation (without jQuery or jQM
dependencies)
•
Uses same CSS
88. angular-jqm boilerplate
var mod = angular.module('app', ['jqm']);
mod.config(function($routeProvider) {
// A route for a single page
$routeProvider.when("/", {
redirectTo: "main.html"
});
// A route for all pages in one folder
$routeProvider.when("/:page", {
animation: 'page-slide',
templateUrl: function(params) {
return params.page;
}
});
});
89. Lab
•
Write an angular-jqm app to show a list of items
and quantities
•
Clicking a list item increases its quantity
