2. 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>
3. 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.
4. 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™",
"snippet": "The Next, Next
Generation tablet."}
];
}
9. 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}}
<p>{{phone.snippet}}</p>
</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",
"snippet": "The Next, Next
Generation tablet.",
"age": 1},
{"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next
Generation tablet.",
"age": 2}
];
$scope.orderProp = 'age';
}
10. 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");
});
$scope.orderProp = 'age';
}
11. 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);
});
12. $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.
});
13. $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.
17. 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
