Introduction to SPA
Angular JS
Mustafa M. [email protected]
AngularJs: First Glance
My HTML File
Nothing here {{'yet' + '!'}}
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.
angular.element(document).ready(function() { angular.bootstrap(document);});
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
....
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."} ];}
MVC
ViewModelController
Actions$scope.model$scope.model
MVC
Filters
Search:
{{phone.name}} {{phone.snippet}}
Filters
Order By
HTML
...Search: Sort by:
Alphabetical Newest
...
{{phone.name}} {{phone.snippet}}
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';}
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';}
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=value2after 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) { $scope.phones = data; }) .error(function(){ alert("Error loading data"); });
$scope.orderProp = 'age';}
PhoneListCtrl.$inject = ['$scope', '$http'];
Dependency Injection - 2
var PhoneListCtrl = ['$scope', '$http', function ($scope, $http){ $http.get('phones/phones.json').success(function (data) { $scope.phones = data; }) .error(function(){ alert("Error loading data"); });
$scope.orderProp = 'age';}];
Template
{{phone.name}} {{phone.snippet}}
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' }); }]);
RoutInjected configuration
Controller and Routing
function PhoneDetailCtrl($scope, $routeParams) { $scope.phoneId = $routeParams.phoneId;}//url: http://localhost:8080/phones/5Pattern in previous slide.when('/phones/:phoneId', { templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl })
Views and Tmplates
Intex.html
...
Templates
app/partials/phone-list.html
app/partials/phone-detail.html
Details view
{{phone.name}}
{{phone.description}}
...
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
Connectivity Network Support {{phone.connectivity.cell}} WiFi {{phone.connectivity.wifi}} Bluetooth {{phone.connectivity.bluetooth}} Infrared
{{phone.connectivity.infrared | checkmark}}
GPS {{phone.connectivity.gps | checkmark}}
Filtere:
{{ expression | filter }}
Views events and Controller actions
function PhoneDetailCtrl($scope, $routeParams, $http) {... $scope.setImage = function(imageUrl) { $scope.mainImageUrl = imageUrl; }}
...
Click to edit the title text formatClick to edit Master title style
9/18/13
Click to edit the title text formatClick to edit Master title style
9/18/13
Click to edit the title text formatClick to edit Master title style
Click to edit the outline text formatSecond Outline LevelThird Outline LevelFourth Outline LevelFifth Outline LevelSixth Outline Level
Seventh Outline LevelClick to edit Master text styles
Second level
Third level
Fourth level
Fifth level
Click to edit the outline text formatSecond Outline LevelThird Outline LevelFourth Outline LevelFifth Outline LevelSixth Outline Level
Seventh Outline LevelClick to edit Master text styles
Second level
Third level
Fourth level
Fifth level
9/18/13
Click to edit the title text formatClick to edit Master title style
Click to edit the outline text formatSecond Outline LevelThird Outline LevelFourth Outline LevelFifth Outline LevelSixth Outline Level
Seventh Outline LevelClick to edit Master text styles
Second level
Third level
Fourth level
Fifth level
9/18/13
Click to edit the title text formatClick to edit Master title style
Click to edit the outline text formatSecond Outline LevelThird Outline LevelFourth Outline LevelFifth Outline LevelSixth Outline Level
Seventh Outline LevelClick to edit Master text styles
Click to edit the outline text formatSecond Outline LevelThird Outline LevelFourth Outline LevelFifth Outline LevelSixth Outline Level
Seventh Outline LevelClick to edit Master text styles
Second level
Third level
Fourth level
Fifth level
Click to edit the outline text formatSecond Outline LevelThird Outline LevelFourth Outline LevelFifth Outline LevelSixth Outline Level
Seventh Outline LevelClick to edit Master text styles
Click to edit the outline text formatSecond Outline LevelThird Outline LevelFourth Outline LevelFifth Outline LevelSixth Outline Level
Seventh Outline LevelClick to edit Master text styles
Second level
Third level
Fourth level
Fifth level
9/18/13
Top Related