angularjs day 1.pptx
TRANSCRIPT
-
8/10/2019 AngularJS Day 1.pptx
1/45
-
8/10/2019 AngularJS Day 1.pptx
2/45
Agenda
Why AngularJS ?Introduction to Single-Page-Apps and MVVM framework
Two way binding
Templates
Controllers
Scopes
Directives
Using and writing filters
-
8/10/2019 AngularJS Day 1.pptx
3/45
Why AngularJS ?
MVC architectureTwo day data binding
Very less DOM manipulation and handling
Custom directives
Templates
Dependency Injection
-
8/10/2019 AngularJS Day 1.pptx
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
-
8/10/2019 AngularJS Day 1.pptx
5/45
MVC or MVVM
-
8/10/2019 AngularJS Day 1.pptx
6/45
MVC or MVVM
-
8/10/2019 AngularJS Day 1.pptx
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/10/2019 AngularJS Day 1.pptx
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.
-
8/10/2019 AngularJS Day 1.pptx
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
-
8/10/2019 AngularJS Day 1.pptx
10/45
Two-Way Data Binding
-
8/10/2019 AngularJS Day 1.pptx
11/45
-
8/10/2019 AngularJS Day 1.pptx
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
-
8/10/2019 AngularJS Day 1.pptx
13/45
Trigger $apply manually
Delayed Message: {{message}}setTimeout(function() {
$scope.$apply(function() {
$scope.message = 'Fetched after 3 seconds';});
}, 2000);
}
-
8/10/2019 AngularJS Day 1.pptx
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.
-
8/10/2019 AngularJS Day 1.pptx
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.
-
8/10/2019 AngularJS Day 1.pptx
16/45
Templates - Example
-
8/10/2019 AngularJS Day 1.pptx
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.
-
8/10/2019 AngularJS Day 1.pptx
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) }}
-
8/10/2019 AngularJS Day 1.pptx
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.
-
8/10/2019 AngularJS Day 1.pptx
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).
-
8/10/2019 AngularJS Day 1.pptx
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.
-
8/10/2019 AngularJS Day 1.pptx
22/45
-
8/10/2019 AngularJS Day 1.pptx
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
-
8/10/2019 AngularJS Day 1.pptx
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();
-
8/10/2019 AngularJS Day 1.pptx
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
-
8/10/2019 AngularJS Day 1.pptx
26/45
Directives Many forms
-
8/10/2019 AngularJS Day 1.pptx
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 ->
-
8/10/2019 AngularJS Day 1.pptx
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
-
8/10/2019 AngularJS Day 1.pptx
29/45
ngRepeat injectedvariables
-
8/10/2019 AngularJS Day 1.pptx
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
-
8/10/2019 AngularJS Day 1.pptx
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.
-
8/10/2019 AngularJS Day 1.pptx
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
-
8/10/2019 AngularJS Day 1.pptx
33/45
angular.module('docsSimpleDirective', [])
.directive('myCustomer', function() {
return {
template: 'Name: {{customer.name}} Address:
{{customer.address}}'
};
});
Template-expandingdirective
-
8/10/2019 AngularJS Day 1.pptx
34/45
angular.module('docsSimpleDirective', [])
.directive('myCustomer', function() {
return {
templateUrl: 'my-customer.html' };
});
my-customer.html
Name: {{customer.name}} Address:{{customer.address}}
Template-expandingdirective
-
8/10/2019 AngularJS Day 1.pptx
35/45
angular.module (abc', [])
.controller('Controller', ['$scope',function($scope) {
$scope.naomi = { name: 'Naomi', address:'1600 Amphitheatre' };
$scope.igor = { name: 'Igor', address: '123Somewhere' };
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
templateUrl: 'my-customer-iso.html'
};
});
Isolating the Scope of aDirective
-
8/10/2019 AngularJS Day 1.pptx
36/45
Name: {{customerInfo.name}} Address:{{customerInfo.address}}
Isolating the Scope of aDirective
-
8/10/2019 AngularJS Day 1.pptx
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
-
8/10/2019 AngularJS Day 1.pptx
38/45
Transclusionmyapp.directive('mytransclude', function() {
var directive = {};
directive.transclude = true;
directive.template = ";
return directive;
});
Ex - This is a transcluded directive {{firstName}}
-
8/10/2019 AngularJS Day 1.pptx
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 }}
-
8/10/2019 AngularJS Day 1.pptx
40/45
-
8/10/2019 AngularJS Day 1.pptx
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');
}
-
8/10/2019 AngularJS Day 1.pptx
42/45
-
8/10/2019 AngularJS Day 1.pptx
43/45
Custom Filters - Example
\Base64 encoded: {{greeting|ncode:true}}
-
8/10/2019 AngularJS Day 1.pptx
44/45
-
8/10/2019 AngularJS Day 1.pptx
45/45