Introduction to Angular js

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.

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."} ];}

ViewModelController

Actions$scope.model$scope.model

Filters

Search:

Filters

Order By

...Search: Sort by:

Alphabetical Newest

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

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

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

GPS {{phone.connectivity.gps | checkmark}}

Filtere:

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 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

Second level

Third level

Fourth level

Fifth level

9/18/13

Second level

Third level

Fourth level

Fifth level

9/18/13

Second level

Third level

Fourth level

Fifth level

Second level

Third level

Fourth level

Fifth level

9/18/13

Introduction to Angular js

Technology

Transcript of Introduction to Angular js