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

More Related Content

What's hot

Viewers also liked

Similar to Introduction to Angular js

Recently uploaded

Introduction to Angular js