Introduction to Angular js

Introduction to SPA
Angular JS
Mustafa M. Gamal
mustafa@moveitgate.com

AngularJs: First Glance
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular/angular.js"></script>
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
Tell Angular if the entire html page or only a portion
of it should be treated as the Angular application.
• Templating – a binding,
denoted by double-curlies {{
}}
• binding will result in
efficient continuous updates
whenever the result of the
expression evaluation
changes.
<script>
angular.element(document).ready(function() {
angular.bootstrap(document);});
</script>

App Bootstrap
• The injector that will be used for dependency
injection within this app is created.
• The injector will then create the root scope
that will become the context for the model of
our application.
• Angular will then "compile" the DOM starting
at the ngApp root element, processing any
directives and bindings found along the way.

MVC
<html lang="en" ng-app>
<head>
....
<script
src="lib/angular/angular.js"></script>
<script
src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
<ul>
<li ng-repeat="phone in phones">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>
app/js/controllers.js
function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S",
"snippet": "Fast just got faster
with Nexus S."},
{"name": "Motorola XOOM™ with Wi-
Fi",
"snippet": "The Next, Next
Generation tablet."},
{"name": "MOTOROLA XOOM™",
Generation tablet."}
];
}

MVC
ViewModel
Controller
Actions
$scope.model
$scope.model

Filters
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">

Search: <input ng-model="query">
</div>
<div class="span10">

<ul class="phones">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
</li>
</ul>
</div>
</div>

Order By
HTML
...
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option
value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
...
<ul class="phones">
<li ng-repeat="phone in phones |
filter:query | orderBy:orderProp">
{{phone.name}}
</li>
</ul>
Controller
function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S",
"snippet": "Fast just got faster
with Nexus S.",
"age": 0},
{"name": "Motorola XOOM™ with Wi-
Fi",
Generation tablet.",
"age": 1},
{"name": "MOTOROLA XOOM™",
Generation tablet.",
"age": 2}
];
$scope.orderProp = 'age';
}

AJAX Request
• $http service used to make
an HTTP request to web
server to fetch data
app/phones/phones.json
• Understand Json format
• returns a promise object
with a success method
function PhoneListCtrl($scope,
$http) {
$http
.get('phones/phones.json').
success(function(data) {
$scope.phones = data;
})
.error(function(){
alert("Error loading
data");
});
}

Promise pattern
function asyncGreet(name) {
var deferred = $q.defer();
setTimeout(function () {
scope.$apply(function () {
if (okToGreet(name)) {
deferred.resolve('Hello, ' + name + '!');
} else {
deferred.reject('Greeting ' + name + ' is not allowed.');
}
});
}, 1000);
return deferred.promise;
}
var promise = asyncGreet('Robin Hood');
promise.then(function (greeting) {
alert('Success: ' + greeting);
}, function (reason) {
alert('Failed: ' + reason);
});

$http function
$http({ method: 'GET', url: '/someUrl' }).
success(function (data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});

$http configurations
• method – {string} – HTTP method (e.g. 'GET', 'POST', etc)
• url – {string} – Absolute or relative URL of the resource that is being
requested.
• Params: Map of strings or objects => turned to ?
key1=value1&key2=value2 after the url. If the value is not a string, it will
be JSONified.
• data – {string|Object} – Data to be sent as the request message data.
• headers – {Object} – Map of strings representing HTTP headers to send to
the server.
• cache – {boolean|Cache} – If true, a default $http cache will be used to
cache the GET request, otherwise if a cache instance built with $
cacheFactory, this cache will be used for caching.
• timeout – {number} – timeout in milliseconds.

Dependency Injection - 1
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.jsoqn').success(function(data) {
})
.error(function(){
alert("Error loading data");
});
}
PhoneListCtrl.$inject = ['$scope', '$http'];

Dependency Injection - 2
var PhoneListCtrl = ['$scope', '$http',
function ($scope, $http)
{
$http.get('phones/phones.json').success(function
(data) {
})
.error(function(){
alert("Error loading data");
});
}];

Template
<ul class="phones">
<li ng-repeat="phone in phones | filter:query |
orderBy:orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb"><img
ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
</li>
</ul>

Multiple Views, Routing and Layout
Template
• A common template for all views in application
• Partial template included based on current rout
• $routeProvider provides $route service. which
wires together controllers, view templates, and
the current URL location in the browser.
• This will lets us utilize the browser's history

Defining module
angular.module('phonecat', []).
config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/phones',
{ templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl })
.when('/phones/:phoneId',
{ templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl })
.otherwise({ redirectTo: '/phones' });
}]);
Rout Injected configuration
<html ng-app="phonecat">

Controller and Routing
function PhoneDetailCtrl($scope,
$routeParams) {
$scope.phoneId =
$routeParams.phoneId;
}
//url: http://localhost:8080/phones/5
Pattern in previous slide
.when('/phones/:phoneId',
{ templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl })

Views and Tmplates
Intex.html
<html lang="en" ng-app="phonecat">
<head>
...
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>

<div ng-view></div>

</body>
</html>
Templates
• app/partials/phone-
list.html
• app/partials/phone-
detail.html

Details view
<img ng-src="{{phone.images[0]}}"
class="phone">
<h1>{{phone.name}}</h1>
<p>{{phone.description}}</p>
<ul class="phone-thumbs">
<li ng-repeat="img in
phone.images">
<img ng-src="{{img}}">
</li>
</ul>
...
controller
function
PhoneDetailCtrl($scope,
$routeParams, $http) {
$http.get('phones/' +
$routeParams.phoneId +
'.json').success(function
(data) {
$scope.phone =
data;
});
}

Module Template Filters
Without filters With filter

app/js/app.js
angular.module
('phonecat',
['phonecatFilters']).
app/js/filters.js
angular.module
('phonecatFilters',
[]).filter('checkmark',
function() {
return
function(input) {
return input ?
'u2713' : 'u2718';
};
});

Template - Filters
<span>Connectivity</span>
<dl>
<dt>Network Support</dt>
<dd>{{phone.connectivity.cell}}</dd>
<dt>WiFi</dt>
<dd>{{phone.connectivity.wifi}}</dd>
<dt>Bluetooth</dt>
<dd>{{phone.connectivity.bluetooth}}</dd>
<dt>Infrared</dt>
<dd>
{{phone.connectivity.infrared | checkmark}}
</dd>
<dt>GPS</dt>
<dd>
{{phone.connectivity.gps | checkmark}}
</dd>
</dl>
• Filtere:
• {{ expression | filter }}

Views events and Controller actions
function
PhoneDetailCtrl($scope,
$routeParams, $http) {
...
$scope.setImage =
function(imageUrl) {
$scope.mainImageUrl =
imageUrl;
}
}
<img ng-
src="{{mainImageUrl}}"
class="phone">
...
<ul class="phone-thumbs">
<li ng-repeat="img in
phone.images">
<img ng-src="{{img}}"
ng-click="setImage(img)">
</li>
</ul>

Introduction to Angular js

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Introduction to Angular js

Similar to Introduction to Angular js (20)

Recently uploaded

Recently uploaded (20)

Introduction to Angular js