AngularJS Day 1.pptx

8/10/2019 AngularJS Day 1.pptx

1/45


2/45

Agenda

Why AngularJS ?Introduction to Single-Page-Apps and MVVM framework

Two way binding

Templates

Controllers

Scopes

Directives

Using and writing filters


3/45

Why AngularJS ?

MVC architectureTwo day data binding

Very less DOM manipulation and handling

Custom directives

Templates

Dependency Injection


4/45

Single-Page-Apps

No page reload

URL paths route pre-fetched/dynamic resources

Page state, history and navigation are maintained

Each page is a view and has its own controller and scope

ng-route and ui-router


5/45

MVC or MVVM


6/45

MVC or MVVM


7/45

Expressions

Angular expressions are JavaScript-like code snippetsthat are usually placed in bindings suchas {{ expression }}.

1+2

a+b

user.name

items[index]


8/45

Expressions Angular vsJavaScript

Context : JavaScript expressions are evaluated against the global window. InAngular, expressions are evaluated against a scope object.

Forgiving : In JavaScript, trying to evaluate undefined properties generatesReferenceError or TypeError. In Angular, expression evaluation is forgiving toundefined and null.

No Control Flow Statements: you cannot use the following in an Angularexpression: conditionals, loops, or exceptions.

Filters: You can use filters within expressions to format data before displayingit.


9/45

Two-Way Data Binding

Automatic synchronization of data between model andview

Controllers do not need to directly manipulate the view

Changes in the models / data are automatically reflected inthe view

Updates are managed by the frameworks


10/45

Two-Way Data Binding


11/45


12/45

$apply, $digest and $watch

AngularJS directives setup listeners to the view objectswrapped by $apply function call.

$apply in turn triggers the $digest loop using$scope.$digest()

$digest in turns triggers all the $watch() in the $watch list$watch will evaluate each model objects old value withnew value and if change is found, then the view isupdated


13/45

Trigger $apply manually

Delayed Message: {{message}}setTimeout(function() {

$scope.$apply(function() {

$scope.message = 'Fetched after 3 seconds';});

}, 2000);

}


14/45

Templates

Written with HTML that contains Angular-specificelements and attributes.

Combines the template with information from themodel and controller to render the dynamic view

Display multiple views within one main page using"partials" segments of template located in separateHTML files.


15/45

Templates - Elements

Directive An attribute or element that augments anexisting DOM element or represents a reusable DOMcomponent.

Markup The double curly brace notation {{ }} to bindexpressions to elements is built-in Angular markup.

Filter Formats data for display.

Form controls Validates user input.


16/45

Templates - Example


17/45

Controllers

Contains only the business logic needed for a singleview.

Controller is a JavaScript constructor function that isused to augment the Angular Scope.

Set up the initial state of the $scope object.

Add behavior to the $scope object.


18/45

Controllersvar myApp = angular.module('myApp',[]);

myApp.controller('DoubleController', ['$scope', function($scope) {

$scope.greeting = Hello World!';

$scope.double = function(value) { return value * 2; };

}]);

{{greeting}}

Two times equals {{ double(num) }}


19/45

$Scope

o Scope is an object that refers to the application model.o It is the glue between controller and the view.

o It is an execution context for expressions.

o

Scopes are arranged in hierarchical structure which mimicthe DOM structure of the application.

o Scopes can watch expressions and propagate events.


20/45

$Scope - APIs

o Scopes provide APIs ($watch) to observe modelmutations.

o Scopes provide APIs ($apply) to propagate anymodel changes through the system into the viewfrom outside of the "Angular realm" (controllers,services, Angular event handlers).


21/45

$Scope - Hierarchies

o One root scope and several child scopes.o Directives create new child scopes.

o New scopes are added as children of their parent scope.

o

When Angular evaluates {{name}}, it first looks at thescope associated with the given element for the nameproperty. If no such property is found, it searches theparent scope and so on until the root scope is reached.


22/45


23/45

$Scope Retrieve in DOM

Right click on the element of interest in your browser andselect 'inspect element'. You should see the browserdebugger with the element you clicked on highlighted.

The debugger allows you to access the currently selectedelement in the console as $0 variable.

To retrieve the associated scope in console execute:angular.element($0).scope() or just type $scope


24/45

$Scope manipulation

angular.element(myDomElement).scope();angular.element(myDomElement).scope().myVar = 5;

angular.element(myDomElement).scope().myArray.push(

newItem);angular.element(myDomElement).scope().$apply();


25/45

Directives

Markers on a DOM element (such as an attribute,element name, comment or CSS class)

It tells AngularJS's HTML compiler ($compile) to attach aspecified behavior to that DOM element or even transformthe DOM element and its children.

Built-in directives , like ngBind, ngModel, and ngClass, soon

Developers can create their own custom directives as well


26/45

Directives Many forms


27/45

ngBind Directive

The ngBind directive is generally applied to a spanelement and replaces the content of the element with theresults of the provided expression.

It has the same meaning as that of the double curlymarkup, for example, {{expression}}.

This is to hide the double curly braces from being shown,when the angular is still compiling.

Example ->


28/45

ngRepeat Directive

The ngRepeat directive is really useful to iterate over arraysand objects.

Iterates rows of a table, the elements of a list, and even theoptions of select.

Syntax - variable in array


29/45

ngRepeat injectedvariables


30/45

ngModel

The ngModel directive attaches the element to aproperty in the scope, thus binding the view to themodel.

The element can be input (all types), select,

or textarea


31/45

Misc directives

Built-in directive PurposengStyle Supplies the dynamic style configuration demand.

ngShow / ngHide Display or hides the element based on condition

ngClass Allows you to dynamically set CSS classes on an HTML element

ngApp Auto-bootstrap an AngularJS application. The ngApp directive designatesthe root element of the application and is typically placed near the rootelement of the page - e.g. on the or tags.

ngInclude Fetches, compiles and includes an external HTML fragment.

ngSrc Using Angular markup like {{hash}} in a src attribute doesn't work right.Instead use ngSrc.


32/45

Custom Directives Properties PurposeRestrict 'A' -

'E' - 'C' - 'M' -

Template Inline HTML

TemplateUrl To load a template over ajax, you can specify the templateUrl option, which will useajax to pull the template.

compile() Both manipulates the DOM before its rendered and return a link function (that willhandle the linking for us). Methods shared with all of the instances of this directive.

link() Register all listeners on a specific DOM element (thats cloned from the template)and set up our bindings to the page.

Require To enforce a dependency that a controller of the given name should be present


33/45

angular.module('docsSimpleDirective', [])

.directive('myCustomer', function() {

return {

template: 'Name: {{customer.name}} Address:

{{customer.address}}'

};

});

Template-expandingdirective


34/45

angular.module('docsSimpleDirective', [])


return {

templateUrl: 'my-customer.html' };

});

my-customer.html

Name: {{customer.name}} Address:{{customer.address}}

Template-expandingdirective


35/45

angular.module (abc', [])

.controller('Controller', ['$scope',function($scope) {

$scope.naomi = { name: 'Naomi', address:'1600 Amphitheatre' };

$scope.igor = { name: 'Igor', address: '123Somewhere' };

}])


return {

restrict: 'E',

scope: {

customerInfo: '=info'

},

templateUrl: 'my-customer-iso.html'

};

});

Isolating the Scope of aDirective


36/45

Name: {{customerInfo.name}} Address:{{customerInfo.address}}

Isolating the Scope of aDirective


37/45

myapp.directive('userinfo', function() {

var directive = {};

directive.compile = function(element, attributes){

element.css("border", "1px solid #cccccc");

var linkFunction = function($scope, element,attributes) {

element.html("This is the new content: " +$scope.firstName);

element.css("background-color","#ffff00");

}

return linkFunction;

}

return directive;

})

Directive that Manipulatesthe DOM


38/45

Transclusionmyapp.directive('mytransclude', function() {

var directive = {};

directive.transclude = true;

directive.template = ";

return directive;

});

Ex - This is a transcluded directive {{firstName}}


39/45

Filters

A filter formats the value of an expression for display to theuser.

They can be used in view templates, controllers or services andit is easy to define your own filter.

Syntax:

{{ expression | filter }} {{ expression | filter1 | filter2 | ... }} {{ expression | filter:argument1:argument2:... }}

Example: {{ 1234 | number:2 }}


40/45


41/45

Invoke filter from Controllers,services, etccontroller('FilterController', ['filterFilter', function(filterFilter) {this.array = [ {name: 'Tobias'}, {name: 'Jeff'}, {name: 'Brian'}, {name: 'Igor'}, {name:'James'}, {name: 'Brad'} ];

this.filteredArray = filterFilter(this.array, 'a');

}


42/45


43/45

Custom Filters - Example

\

Base64 encoded: {{greeting|ncode:true}}


44/45


45/45

Documents

AngularJS Day 1.pptx