By SKONDA IT Services PVT LTD, Mob: URL:

By SKONDA IT Services PVT LTD, Mob: 7673988855 URL: www.skonda.in
AngularJS Introduction Javascript Framework Developed by Google Version is 1.6.x and 2 MVC Angular Material By SKONDA IT Services PVT LTD, Mob: URL:

Advantages Write less code Two way data binding Has its own testing platform Single Page Applications Ionic framework By SKONDA IT Services PVT LTD, Mob: URL:

Prerequisites HTML CSS Javascript By SKONDA IT Services PVT LTD, Mob: URL:

Common Terminology Name Description Application Defines an AngularJS application Module Container for app which holds directives, controllers, services etc Directive HTML extension using elements, attributes, class and comments Controller holds business logic for the app Service reusable components with specific functionality Model defines data for the View View visible elements for the app Scope defines the context or life time Expressions Used to access angular properties and methods from HTML Filter used to filter, format and sort data Data Binding two way data binding between View and Model Dependency Injection defines required dependency before using it By SKONDA IT Services PVT LTD, Mob: URL:

First Program Insert Angular library <script src=" </script> ng-app directive - bootstrap <head> <scriptsrc=" </head> <body> <div ng-app> <p> {{ "SKONDA IT Services PVT LTD" }} </p> </div> </body> By SKONDA IT Services PVT LTD, Mob: URL:

Expressions {{ }} - uses javascript syntax Example: <div ng-app=""> <p> {{ "Sum of 5 and 5 is: " + (5 + 5) }} </p> </div> Output: Sum of 5 and 5 is: 10 By SKONDA IT Services PVT LTD, Mob: URL:

Directives HTML extensions with specific functionality Angular directives / user defined directives Directive Description ng-app Specifies this element is owner of AngularJs application ng-init initializes AngularJs appliation variables ng-model binds value of this elements to application variable ng-bind binds element inner html to specified AngularJs variable / expression ng-controller defines a controller for the AngularJs application ng-repeat iterate through the statements By SKONDA IT Services PVT LTD, Mob: URL:

ng-app directive <element ng-app> <element ng-app=""> <element ng-app="appname"> Is it possible to define multiple applications? By SKONDA IT Services PVT LTD, Mob: URL:

ng-init directive Used to initialize angular variables <div ng-app="" ng-init="name='skonda'"> <p> {{ "name is: " + name }} </p> </div> By SKONDA IT Services PVT LTD, Mob: URL:

ng-init directive Initializing an array <div ng-app="" ng-init="skonda=['miyapur', 'madhapur', 'kondapur']"> <p> {{ "address 2 is: " + skonda[1] }} </p> </div> By SKONDA IT Services PVT LTD, Mob: URL:

ng-init directive Initializing a JSON object <div ng-app="" ng-init="company={name:'skonda',salary:10000}"> <p> {{ "name is: " + company.name + ", salary is: " + company.salary}} </p> </div> By SKONDA IT Services PVT LTD, Mob: URL:

ng-repeat directive Used to iterate specified element <body ng-app ng-init="courses=['Java', 'Android', 'Web']"> <h1>Available courses in SKONDA IT Services</h1> <ul> <li ng-repeat="course in courses">{{ course }}</li> </ul> </body> By SKONDA IT Services PVT LTD, Mob: URL:

$index Used with ng-repeat to find position of element <body ng-app ng-init="courses=['Java', 'Android', 'Web']"> <h1>Available courses in SKONDA IT Services</h1> <ul> <li ng-repeat="course in courses"> {{ course }} – {{ $index }} </li> </ul> </body> By SKONDA IT Services PVT LTD, Mob: URL:

Module Module defines the application - angular.module(“skondaapp”, [] ) var skondamod = angular.module("skondaapp", [] ); add controllers & directives By SKONDA IT Services PVT LTD, Mob: URL:

Controller Controller is where business logic is defined var skondamod = angular.module("skondaapp", [] ); Controller() method is used to define controllers in application Controller is defined against element which defines the scope By SKONDA IT Services PVT LTD, Mob: URL:

Controller <script> var skondamod = angular.module("skonda",[]); skondamod.controller("ctl1",function($scope) { $scope.name ="SKONDA IT Services"; } ); </script> </head> <body ng-app="skonda" ng-controller="ctl1"> <h1> {{ name }} </h1> </body> By SKONDA IT Services PVT LTD, Mob: URL:

Controller Example on defining multiple controllers By SKONDA IT Services PVT LTD, Mob: URL:

Controller Example on populating a table from JSON object By SKONDA IT Services PVT LTD, Mob: URL:

$rootScope Run method is used to access $rootScope Can access any attribute in the application By SKONDA IT Services PVT LTD, Mob: URL:

Nested Controller A controller within another controller Parent controller can access scope variables of child controller By SKONDA IT Services PVT LTD, Mob: URL:

ng-bind Deals with innerHTML <div ng-app="skondaApp" ng-init=“name='skonda it services'"> <p ng-bind=“name"></p> </div> By SKONDA IT Services PVT LTD, Mob: URL:

ng-model Used on input element Provides two way data binding <div ng-app="" ng-init="company='SKONDA IT Services'"> <input type="text" ng-model="company" /> </div> By SKONDA IT Services PVT LTD, Mob: URL:

Two way data binding <div ng-app="“ ng-init="company='SKONDA IT Services'"> <input type="text“ ng-model="company"/> <p> Enter value is: {{company}}</p> </div> By SKONDA IT Services PVT LTD, Mob: URL:

Event Handling ng-click ng-dblclick ng-submit ng-change ng-copy ng-cut ng-paste ng-focus ng-blur ng-keydown ng-keyup ng-keypress ng-mousedown ng-mouseup ng-mouseenter ng-mouseleave ng-mouseover ng-mousemove By SKONDA IT Services PVT LTD, Mob: URL:

ng-click Used to handle click event Syntax: <element ng-click="what to perform"> Example: <button ng-click="skondaf1()"> Calculate </button> By SKONDA IT Services PVT LTD, Mob: URL:

ng-dblclick Example on ng-dblclick Increase size of image when double clicked By SKONDA IT Services PVT LTD, Mob: URL:

ng-change ng-change is executed when the content of input element changes Used on Select or any other input element Example on select and input element using ng-change ng-change should be used along with ng-model By SKONDA IT Services PVT LTD, Mob: URL:

ng-submit Used with forms to handle submission of form Syntax: <form ng-submit="functionname"> Example <form ng-submit="skondaf1()"> By SKONDA IT Services PVT LTD, Mob: URL:

ng-show Used to display the element based on boolean value Syntax: <element ng-show=“boolean”> Example <p ng-show=“true”>SKONDA </p> By SKONDA IT Services PVT LTD, Mob: URL:

ng-hide Used to hide the element based on boolean value Syntax: <element ng-hide=“boolean”> Example <p ng-hide=“true”>SKONDA </p> By SKONDA IT Services PVT LTD, Mob: URL:

Type validation $error property can be used for type validation validation: <form name="skondaf"> <label> Enter </label> <input type=" " name="username" ng-model="skonda" /> <span ng-show="skondaf.username.$error. ">Invalid </span> </form> Number validation: <span ng-show="skondaf.username.$error.number">Invalid Number</span> By SKONDA IT Services PVT LTD, Mob: URL:

ng-options Ng-options is used with select statement to repeat options Syntax: <select ng-options="value for text in array"></select> Example <body ng-app="skondaApp" ng-controller="skondaCntl"> <select ng-model="skondaStyle" ng-options="course for course in courses"> </select> {{ skondaStyle }} </body> By SKONDA IT Services PVT LTD, Mob: URL:

ng-selected Specifies the selected option in a list of options for select element. Syntax: <option ng-selected="true/false"></option> Example <select> <option></option> <option>Java</option> <option ng-selected="true">Android</option> <option>Angular</option> </select> By SKONDA IT Services PVT LTD, Mob: URL:

ng-class Used to assign class for an element Syntax: <element ng-class=“classname“> Example <p ng-class="'skondaYello'"> SKONDA IT Services PVT LTD - </p> <p ng-class="['skondaYello','skondaColorRed']"> By SKONDA IT Services PVT LTD, Mob: URL:

ng-class Example to apply class based on dropdown selection By SKONDA IT Services PVT LTD, Mob: URL:

ng-src Used to specify the source for images Syntax: <img ng-src=“sourcepath“> Example <img ng-src=“skondaSrc"/> By SKONDA IT Services PVT LTD, Mob: URL:

ng-href Used to specify the href for anchor elements Syntax: <a ng-href=“path“> Example <a href="{{skondahref}}"> SKONDA IT Services PVT LTD </a> By SKONDA IT Services PVT LTD, Mob: URL:

ng-disabled Used to enable or disable a button Syntax: <a ng-disabled=“boolean“> Example <button ng-disabled=“true">Submit</button> By SKONDA IT Services PVT LTD, Mob: URL:

ng-disabled Example: Enable or disable based on the input checkbox element By SKONDA IT Services PVT LTD, Mob: URL:

ng-include Used to include a HTML file into current document Syntax: <element ng-include=”’file_to_include.html’”> Example <body> <div ng-app="skondaApp"ng-controller="skondaCtrl"> <div ng-include="'skonda.html'"></div> </div> </body> By SKONDA IT Services PVT LTD, Mob: URL:

$event Equivalent to this keyword in java <img src=" $scope.skondaf1 = function (event) { alert(event.currentTarget.src); } By SKONDA IT Services PVT LTD, Mob: URL:

$watch Monitor change in Angular property Syntax: $scope.$watch("variable", handler); function handler { } Example to count the changes of input element By SKONDA IT Services PVT LTD, Mob: URL:

Angular API Provides a set of functions isElement isFunction isNumber isObject isUndefined isString lowercase merge module toJson toString uppercase valueOf bind bootstrap constructor copy element equals extend forEach injector isArray isDate isDefined By SKONDA IT Services PVT LTD, Mob: URL:

Angular API Examples on some API functions By SKONDA IT Services PVT LTD, Mob: URL:

Pagination Populate data in different pages with number of items per page include dirPaginate.js related Javascript library Inject the dependency - ['angularUtils.directives.dirPagination'] Define dir-paginate on an element Define pagination controls By SKONDA IT Services PVT LTD, Mob: URL:

Pagination dir-pagination attributes Attribute Description expression syntax same as ng-repeat itemsPerPage number of items per page, should be last in attributes list current-page specify the current page to open by default pagination-id to identify the pagination (if multiple paginations are used in page) total-items specifies items for pagination By SKONDA IT Services PVT LTD, Mob: URL:

Pagination Pagination-control attributes Attribute Description max-size maximum number of pagination links. Min 5, default 9 direction-links whether to specify direction links or not, default true boundary-links whether to specify start and end arrows in pagination, default false one-page-change call back function to execute when page changes, new page and old numbers can be passed pagination-id uniquely identify a pagination when multiple paginations exists in document template-url template to display pagination controls, can be customised auto-hide whether to hide pagination controls when no pages, default true By SKONDA IT Services PVT LTD, Mob: URL:

Pagination <ul> <li dir-paginate="number in numbers | itemsPerPage: 10 ">{{number}}</li> </ul> <dir-pagination-controls> </dir-pagination-controls> By SKONDA IT Services PVT LTD, Mob: URL:

Filters Filter Description lowercase converts string to lowercase uppercase converts string to uppercase limitTo limits an array/string to specified elements/characters orderBy order elements in an array filter selects subset of elements in an array/string number number to string conversion currency format number to currency format date formatting date json convert object to json By SKONDA IT Services PVT LTD, Mob: URL:

Filters Syntax: <element | filtername> By SKONDA IT Services PVT LTD, Mob: URL:

Uppercase / lowercase Filters
By SKONDA IT Services PVT LTD, Mob: URL: Uppercase / lowercase Filters Syntax: {{ variablename | uppercase/lowercase }} <body ng-app="skonda" ng-init="name='SKONDA IT Services'"> <h1> uppercase data is: {{ name | uppercase }} </h1> <h1> lowercase data is: {{ name | lowercase }} </h1> </body> By SKONDA IT Services PVT LTD, Mob: URL:

limitTo Filter restrict the number of elements to display. In case of strings, this filter will limit the number of characters to output Syntax: {{ variablename | uppercase/lowercase }} <body ng-app="skonda" ng-init="name='SKONDA IT Services'"> <h1> uppercase data is: {{ name | uppercase }} </h1> <h1> lowercase data is: {{ name | lowercase }} </h1> </body> By SKONDA IT Services PVT LTD, Mob: URL:

orderBy Filter Used to sort the elements of an array in ascending or descending order. Syntax: <element | orderBy : expression : reverse <body ng-app="skonda" ng-init="courses=['java', 'Android', 'AngularJs'] "> <ul> <li data-ng-repeat="course in courses | orderBy ">{{ course }}</li> </ul> </body> By SKONDA IT Services PVT LTD, Mob: URL:

Filter Filter used to filter the elements. <body ng-app="skonda" ng-init="courses=['java', 'Android', 'AngularJs'] "> <ul> <li data-ng-repeat="course in courses | filter: 'An' ">{{ course }}</li> </ul> </body> By SKONDA IT Services PVT LTD, Mob: URL:

Number Filter number filter is used to convert a given number to a string and also to control number of decimal points Syntax: variable | number : fractionsize <body ng-app ng-init="salary = "> <p> Salary is: {{ salary | number : 2 }} </p> </body> By SKONDA IT Services PVT LTD, Mob: URL:

Currency Filter Used to display currency symbol with a given number. Also fraction size can be specified Syntax: variable | currency : symbol : fractionsize <body ng-app ng-init="salary = "> <p> Salary is: {{ salary | currency : $ : 2 }} </p> </body> By SKONDA IT Services PVT LTD, Mob: URL:

Date Filter used to display the date in different formats. Syntax: {{ name | date: “format" }} <p> {{ cdate | date: "fullDate" }} </p> By SKONDA IT Services PVT LTD, Mob: URL:

Date Filter format Format Description yyyy year part, ex: 2017 yy year part, ex: 17 MMMM Month part, ex: January MMM Month part, ex: Jan MM Month part, ex: 01 dd Day, ex: 23 EEEE day of week, ex: Monday hh hour part mm minute part ss second part sss millisecond part a am/pm short M/d/yy h:mm a shortDate M/d/yy shortTime h:mm a medium MMM d, y h:mm:ss a mediumDate MMM d, y mediumTime h:mm:ss a longDate MMMM d, y fullDate EEEE, MMMM d, y By SKONDA IT Services PVT LTD, Mob: URL:

Custom filter User defined filters Filter method of angular application Syntax .filter('filtername', function() { returnfunction(item) // process item return modifiedItem; } By SKONDA IT Services PVT LTD, Mob: URL:

Custom filter Example <p ng-repeat="course in courses">{{course|appendFilter}}</p> .controller('skondaCtrl', function ($scope, $http) { $scope.courses = ["Java", "Android", "Web"]; }) .filter("appendFilter", function () { return function (item) { return item + " - SKONDA"; // return transormed data } }); By SKONDA IT Services PVT LTD, Mob: URL:

Filter null values <li ng-repeat="course in courses “>{{course|skondaNullFilter}}</li> <p ng-repeat="course in courses">{{course|appendFilter}}</p> .controller("skondaCtrl", function($scope) { $scope.courses = new Array(4); $scope.courses[0] = 10; $scope.courses[2] = 20; }) .filter('skondaNullFilter', function() { return function(item) { if (item == undefined) return 99; else return item; } By SKONDA IT Services PVT LTD, Mob: URL:

Passing Array to filter
By SKONDA IT Services PVT LTD, Mob: URL: Passing Array to filter <li ng-repeat="course in courses|skondaNullFilter">{{course}}</li> .controller("skondaCtrl", function($scope) { $scope.courses = new Array(4); $scope.courses[0] = 10; $scope.courses[2] = 20; }) .filter('skondaNullFilter', function () { returnfunction (items) { var skondaDummy = []; for (i = 0; i < items.length; i++) if (items[i] == undefined) skondaDummy.push(99); else skondaDummy.push(items[i]); return skondaDummy; } By SKONDA IT Services PVT LTD, Mob: URL:

Filter duplicates <li ng-repeat="course in courses|skondaNullFilter">{{course}}</li> .controller("skondaCtrl", function($scope) { $scope.courses = ['java', 'android', 'angular', 'java']; }) .filter('skondaDupFilter', function () { returnfunction (items) { var skondaDummy = []; for (i = 0; i < items.length; i++) { if (skondaDummy.indexOf(items[i]) == -1 ) skondaDummy.push(items[i]); } return skondaDummy; By SKONDA IT Services PVT LTD, Mob: URL:

Angular forEach <li ng-repeat="course in courses|skondaNullFilter">{{course}}</li> angular.forEach(items, function(item) { if (skondaDummy.indexOf(item) == -1 ) skondaDummy.push(item); }) By SKONDA IT Services PVT LTD, Mob: URL:

Custom Directives User defined directivees Elements Attributes Class Comment By SKONDA IT Services PVT LTD, Mob: URL:

Creating Custom Directives
By SKONDA IT Services PVT LTD, Mob: URL: Creating Custom Directives .directive("directiveName", function() { return directiveobject; }); restrict template templateUrl By SKONDA IT Services PVT LTD, Mob: URL:

Example on Custom Directive
By SKONDA IT Services PVT LTD, Mob: URL: Example on Custom Directive <div ng-app="skondaApp" skonda-dir1></div> app.directive("skondaDir1",function() { return { template :"<h1> SKONDA IT Services </h1> " }; }); app.directive("skondaDir1",function() { var dirObj ={}; dirObj.template ="<h1> SKONDA IT Services </h1> "; return dirObj; }); By SKONDA IT Services PVT LTD, Mob: URL:

Directive on Multiple tags
By SKONDA IT Services PVT LTD, Mob: URL: Directive on Multiple tags <p skonda-dir1></p> app.directive("skondaDir1",function(){ var dirObj ={}; dirObj.template ="<h1> SKONDA IT Services PVT LTD</h1> "; return dirObj; }); By SKONDA IT Services PVT LTD, Mob: URL:

Directive templateUrl
By SKONDA IT Services PVT LTD, Mob: URL: Directive templateUrl <div ng-app="skondaApp" skonda-dir1> </div> app.directive("skondaDir1",function(){ var dirObj ={}; dirObj.templateUrl ="courses.html"; return dirObj; }); By SKONDA IT Services PVT LTD, Mob: URL:

Directive restrict property
By SKONDA IT Services PVT LTD, Mob: URL: Directive restrict property Used to restrict the usage of Directive Values can be: E - elements A - attribute C - class M - comment Default is: EA <p skonda-dir1>Para1</p> <p class="skonda-dir1">Para2</p> app.directive("skondaDir1",function(){ var dirObj ={}; dirObj.template ="<h1> SKONDA IT Services </h1> " dirObj.restrict ="C"; return dirObj; }); By SKONDA IT Services PVT LTD, Mob: URL:

Difference between controller and service Types of services Built-in Services User-defined Services By SKONDA IT Services PVT LTD, Mob: URL:

Builtin Services Service Description $location similar to window.location $timeout similar to setTimeOut $interval similar to setInterval $http for asynchronous call to server $route creates single page applications By SKONDA IT Services PVT LTD, Mob: URL:

Location Service $location.absUrl() is used to get the absolute path of the URL <script> angular.module("skondaapp",[]) .controller("skondaCtl",function($scope, $location){ $scope.result = $location.absUrl(); }); </script> </head> <body ng-app="skondaapp" ng-controller="skondaCtl"> Square of this number is {{ result }} </body By SKONDA IT Services PVT LTD, Mob: URL:

Timeout Service used to execute a specific task at specified time in milliseconds <script> angular.module("skondaapp",[]); .controller("skondaCtl",function($scope, $timeout){ $timeout (function(){ $scope.result ="Welcome to SKONDA"; },2000); }); </script> By SKONDA IT Services PVT LTD, Mob: URL:

Interval Service used to execute specific task repeatedly at specified time interval. <script> var mod = angular.module("skondaapp",[]); var i =1; mod.controller("skondaCtl",function($scope, $interval){ $interval (function(){ $scope.result = i++; },1000); }); </script> By SKONDA IT Services PVT LTD, Mob: URL:

$http Service used to execute an API and fetch the result Syntax: $http.get(url) .success(function(response) { }) .error(function(response, status) ( }); Available method types: Get Post Put Delete Jsonp By SKONDA IT Services PVT LTD, Mob: URL:

User defined Service Developer can create a service Using the functions: service() factory() provider() Inject this service as a dependency for controller By SKONDA IT Services PVT LTD, Mob: URL:

mod.service('skondaSquare',function(){
By SKONDA IT Services PVT LTD, Mob: URL: service() method Used to create a services Syntax: app.service(“servicename”, handler); Example mod.service('skondaSquare',function(){ this.calculate =function(x) { return x*x; } }); mod.controller("skondaCtl",function($scope, skondaSquare){ $scope.result = skondaSquare.calculate(5); }); By SKONDA IT Services PVT LTD, Mob: URL:

Angular routing Used to create single page application Achieved using ng-route or ui-route Ng-route is a directive from Angular team Ui-router is a third party tool By SKONDA IT Services PVT LTD, Mob: URL:

ng-route Used for routing and to create single page applications Pre-requisites: ngRoute as dependency to app $routeProvider service as dependency to config method .config(function($routeProvider){ $routeProvider .when("/", { templateUrl:"home.html” }) .when("/java", { templateUrl:"java.html” }) <a href="#/">Home</a> <a href="#java">Java</a> By SKONDA IT Services PVT LTD, Mob: URL:

ui-route Used for routing provided by third party Routing is based on state which is related to a view Requires: Load this script file after loading angular file inject 'ui.router‘ as dependency for angular application inject $stateProvider as dependency for angular configuration sref attribute ui-view By SKONDA IT Services PVT LTD, Mob: URL:

ui-route $stateProvider.state(homeState) ; $stateProvider.state(javaState) ; $stateProvider.state(androidState) ; }); </script> </head> <body ng-app="skondaApp"> <a ui-sref="home">Home</a> <a ui-sref="java">Java</a> <a ui-sref="android">Android</a> <ui-view></ui-view> Example <script> angular.module('skondaApp', ['ui.router']) .config(function ($stateProvider) { var homeState = { name: 'home' , url: '/', template: '<h1>This is home page</h1>' } var javaState = { name: 'java' , url: '/java', template: '<h1>Java is OOP language</h1>‘ By SKONDA IT Services PVT LTD, Mob: URL:

Angular2 Angular2 also called as Angular is a client side framework to develop Web applications using Javascript or Typescript Difference between AngularJs and Angular2 Completely new development of AngularJS Uses Typescript which is a superset of Javascript No $scope and controllers in Angular2 Development is based on components By SKONDA IT Services PVT LTD, Mob: URL:

Working with Angular2 Prerequisites NodeJS (serverside JS environment) Angular CLI Visual Studio / code By SKONDA IT Services PVT LTD, Mob: URL:

Installation Node.js windows installer Verify installation of npm using npm -v Angular CLI installation using npm install Verify installation of anular using ng version By SKONDA IT Services PVT LTD, Mob: URL:

Creating Angular Project
By SKONDA IT Services PVT LTD, Mob: URL: Creating Angular Project Ng new <project name> ng-serve ng-service –open Angular application is loaded at: By SKONDA IT Services PVT LTD, Mob: URL:

File structure of Angular
By SKONDA IT Services PVT LTD, Mob: URL: File structure of Angular src App main.ts Index.html style.css By SKONDA IT Services PVT LTD, Mob: URL:

File structure of Angular
By SKONDA IT Services PVT LTD, Mob: URL: File structure of Angular Src folder contains the files specific to application App folder contains app.component.ts app.module.ts main.ts is used for compilation Index.html is the index file for the website style.css is used for global styling By SKONDA IT Services PVT LTD, Mob: URL:

Terminology Term Description Template a page with html/angular markup Component associated with template used to manage template Modules packs components and services used Metadata Data about data Data binding Two way data binding Directives HTML extensions Services contains reusable application logic Dependency injection Dependency to app Decorator Represented By SKONDA IT Services PVT LTD, Mob: URL:

Typescript Open source Object oriented programming language Developed by Microsoft Superscript of Javascript Used in place of Javascript finally compiled to Javascript Editors – Sublime, Visual Studio, Webstorm etc By SKONDA IT Services PVT LTD, Mob: URL:

Editors Installation of Visual studio code By SKONDA IT Services PVT LTD, Mob: URL:

Flow of Angular Index.html => main.ts => app.module.ts => app.component.ts => template By SKONDA IT Services PVT LTD, Mob: URL:

Angular Library Provides different libraries Starts Starts @angular/core is one of the Angular library where the modules or components are imported from. @angular/platform-browser contains BrowserModule which is required to work with browser By SKONDA IT Services PVT LTD, Mob: URL:

Angular Module Every application has atleast one module called root module Bootstrapped by main.ts app.module.ts By SKONDA IT Services PVT LTD, Mob: URL:

Angular Module import { BrowserModule } import { NgModule } import { FormsModule } import { HttpModule } import { AppComponent } from'./app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], bootstrap: [AppComponent] }) exportclass AppModule { } By SKONDA IT Services PVT LTD, Mob: URL:

Angular Component Component defines View and Business logic import { Component } @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [] }) exportclass AppComponent { title = 'Welcome'; } By SKONDA IT Services PVT LTD, Mob: URL:

Angular Component Decorator properties selector: name of the component usually same as file name template: defines the view for the component (back tick is used for multi-line html code) templateUrl: defines the view for the component styleUrls: defines the stylesheet specific to component providers: defines the required services styles: specify the styles with in the property By SKONDA IT Services PVT LTD, Mob: URL:

Angular Component export class Naming convension – app.component.ts File name lower case Component name ends with component.ts By SKONDA IT Services PVT LTD, Mob: URL:

Back tick Used with template / styles attributes of component decorator Styles Property: styles: [ ` p { color: red; } ` ] Template Property: template: `<h1> this is skonda it services </h1>`; By SKONDA IT Services PVT LTD, Mob: URL:

Interpolation This is similar to expressions in AngularJS Represented using {{ }} Example By SKONDA IT Services PVT LTD, Mob: URL:

Component Constructor
By SKONDA IT Services PVT LTD, Mob: URL: Component Constructor Can be used to initialize Angular properties export class AppComponent { title: string; constructor() { this.title = "skonda it services pvt ltd"; } } By SKONDA IT Services PVT LTD, Mob: URL:

Directives HTML extensions which can manipulate DOM elements Directives can be: Angular defined User defined By SKONDA IT Services PVT LTD, Mob: URL:

Angular Directives Angular provides some directives Two types of Angular directives: Structural attribute By SKONDA IT Services PVT LTD, Mob: URL:

Angular Directives Structural directives *ngIf *ngFor *ngSwitch Attribute Directives ngModel ngClass ngStyle By SKONDA IT Services PVT LTD, Mob: URL:

ngModel directive Provides two way data binding It is an attribute directive used on input element Syntax: <input [(ngModel)]="property" /> <input type="text" [(ngModel)]="skondaUsername" /> <p> {{ skondaUsername }} </p> export class AppComponent { skondaUsername = 'SKONDA IT Services - Courses'; } By SKONDA IT Services PVT LTD, Mob: URL:

ngStyle directive Add inline styling to an element It is an attribute directive Syntax: <element [ngStyle]=”angularProperty”> Example <p [ngStyle]="skondaInline"> SKONDA IT Services </p> exportclassAppComponent{ skondaInline={ 'font-size':'24px', 'color':'blue' } By SKONDA IT Services PVT LTD, Mob: URL:

ngStyle directive exportclassAppComponent{ skondaInline={ 'font-size':'24px', 'color':'blue' } Values of JSON can be assigned through Angular properties exportclassAppComponent{ fontSize='44px'; skondaInline={ 'font-size':this.fontSize, 'color':'blue' } By SKONDA IT Services PVT LTD, Mob: URL:

Style binding Used to assign single inline style to an element Syntax: <element [style.inlinestyle]=” ‘value’ ”;> Example: <p [style.color]="'red'"> SKONDA IT Services </p> Condition based: <p [style.color]="skondaCheck? 'red' : 'blue' "> SKONDA IT Services </p> exportclassAppComponent{ skondaCheck=false; } By SKONDA IT Services PVT LTD, Mob: URL:

ngClass directive Used to assign classes to an element Syntax: <element [ngClass]=”angularProperty”> Example: <p [ngClass]="skondaClass"> SKONDA IT Services </p> exportclassAppComponent{ skondaClass={"bgYellow":false,"colorRed":true}; } By SKONDA IT Services PVT LTD, Mob: URL:

class binding Used to assign single class to an element Example: <p [class.bgYellow]="skondaBg"> SKONDA IT Services </p> exportclassAppComponent{ skondaBg=true; } By SKONDA IT Services PVT LTD, Mob: URL:

*ngIf directive Used to display DOM based on condition It is a structural directive, should be prefixed with * Syntax: <element *ngIf="boolean"></element> Example: <div *ngIf="false"> Condition based display by SKONDA </div> Example: <div *ngIf="skonda"> Condition based display by SKONDA </div> By SKONDA IT Services PVT LTD, Mob: URL:

*ngFor directive Similar to ng-repeat in AngularJS Used to iterate through the DOM element based on Array input Syntax: <element *nfFor="let e in array"> {{ e }} </element> Example: <li *ngFor="let course of courses"> {{ course }} </li> export class AppComponent { courses = ['Java', 'Android', 'UI/UX', 'Angular']; } By SKONDA IT Services PVT LTD, Mob: URL:

*ngFor index Index of array in ngFor can be accessed <p *ngFor="let course of courses; let i=index"> {{course}} - {{i}}</p> export class AppComponent { courses =['Java','Android','Angular']; } Output Java - 0 Android - 1 Angular - 2 By SKONDA IT Services PVT LTD, Mob: URL:

ngSwitch directive Similar to switch statement in Javascript Below directives are used: ngSwitch *ngSwitchCase *ngSwitchDefault <div [ngSwitch]="skondaCourse"> <div *ngSwitchCase="'Java'">Java is OOP language</div> <div *ngSwitchCase="'Android'">Android is Operating system for smart devices</div> <div *ngSwitchCase="'Angular'">Angular is client side framework</div> <div *ngSwitchDefault>Please select a course </div> </div> By SKONDA IT Services PVT LTD, Mob: URL:

Event binding Events on DOM elements can be handled using Angular These are one way binding from DOM to component Defined using parenthesis Events: click keyup blur onSubmit By SKONDA IT Services PVT LTD, Mob: URL:

Click event Used to handle click event on an element Event binder (click) is used Syntax: <element (click)=handler()></element> Example: <button (click)="skondaF1()">Click here </button> skondaF1() { alert("button clicked"); } By SKONDA IT Services PVT LTD, Mob: URL:

Keyup event Used to listen keyboard events on input element Event binder (keyup) is used Syntax: <input (keyup)="handler()" /> Example: <input type="text" (keyup)="skondaF1()" /> By SKONDA IT Services PVT LTD, Mob: URL:

keyup.enter Used to handle enter keyword on input element Example: <input type="text" (keyup.enter)=skondaF1() /> By SKONDA IT Services PVT LTD, Mob: URL:

blur event Fired when an element loses focus Event binder (blur) is used Syntax: <input (blur)="handler()" /> Example: <input type="text" (blur)="skondaF1()" /> By SKONDA IT Services PVT LTD, Mob: URL:

ngSubmit event Used to handle form submission Event binder (ngSubmit) is used Syntax: <form (ngSubmit)="handler()"></form> Example: <form (ngSubmit)="skondaSubmit()"> <input type="text" [(ngModel)]="skondaUsername" /> <button>Click here </button> </form> By SKONDA IT Services PVT LTD, Mob: URL:

ngNoForm attribute Used to submit the forms which reloads the page By SKONDA IT Services PVT LTD, Mob: URL:

$event During event binding, element can be passed to handler using $event Example: <input type="text" (keyup)="skondaF1($event)" /> export class AppComponent { title = 'SKONDA IT Services - Courses'; skondaF1(event) { var skondaEle = event.target; console.log("input changed" + skondaEle.value ) ; } } By SKONDA IT Services PVT LTD, Mob: URL:

Property binding Used to set HTML property using Angular property It is one way data binding from component to DOM Denoted using square brackets [src] [href] [disabled] [class] [style] [innerHTML] [textContent] [hidden] By SKONDA IT Services PVT LTD, Mob: URL:

Template ref variable Element properties can be accesses using template reference variable Defined with # Syntax: <element #refVar></element> <input type="text" value="skonda" #skondaUsername /> <p> {{ skondaUsername.tagName }} </p> By SKONDA IT Services PVT LTD, Mob: URL:

Pipes Pipes are nothing but filters in AngularJS Pipes are used to filter, transform and sort data Pipes can be user defined or built-in Syntax: {{ angularProperty | pipe }} By SKONDA IT Services PVT LTD, Mob: URL:

Built-in Pipes Built-in pipes are provided by Angular Below are the various builtin pipes uppercase lowercase date json currency percent slice number By SKONDA IT Services PVT LTD, Mob: URL:

Uppercase & lowercase Used to convert data into upper or lower case. Pipe can be applied in interpolation or in a directive. Syntax: {{ element | uppercase || Example: Uppercase: {{ skonda | uppercase }} By SKONDA IT Services PVT LTD, Mob: URL:

Date pipe Format Description medium Mar 23, 2017, 7:24:07 PM short 3/23/2017, 7:24 PM fullDate Thursday, March 23, 2017 longDate March 23, 2017 mediumDate Mar 23, 2017 shortDate 3/23/2017 mediumTime 7:27:11 PM shortTime 7:27 PM y 2017 yy 17 MMM Mar MMMM March M 3 d 23 h 7 hh mm 27 ss 11 Date pipe is used to transform the date in different formats. Different formats available are: By SKONDA IT Services PVT LTD, Mob: URL:

Date pipe Example: {{ skonda | date:'medium' }} export class AppComponent { skonda = Date.now(); } By SKONDA IT Services PVT LTD, Mob: URL:

json pipe Json pipe is used to convert json object into string. This is equivalent to JSON.stringify. Syntax: {{ angularProperty | json }} converted json string is: {{ skonda | json}} export class AppComponent { skonda ={'course':'Android','fee':10000}; } By SKONDA IT Services PVT LTD, Mob: URL:

Currency pipe Currency pipe is used to display the numeric as a currency. Below parameters can be passed to currency pipe: currency code symbol display digit info Syntax: {{ element | currency:’code’:symbol:digitinfo }} Example currency format example: {{ 10 | currency:'USD':true:'4.1-2'}} By SKONDA IT Services PVT LTD, Mob: URL:

Number pipe Number pipe is used to format the numbers. Syntax: {{ element | number:digitinfo }} Example: number formatting {{ 154 | number:'4.2-3'}} By SKONDA IT Services PVT LTD, Mob: URL:

Percent pipe percent pipe is used to convert decimal to percentage. Syntax: {{ decimal | percent }} Example: percent formatting {{ .5 | percent}} By SKONDA IT Services PVT LTD, Mob: URL:

Slice pipe slice pipe is used to fetch part of array or string value. Syntax: {{ element | slice:start:end }} Example: slice formatting {{ skondaCourses | slice:2 }} slice formatting {{ skondaCourses | slice:2:3 }} By SKONDA IT Services PVT LTD, Mob: URL:

Custom pipe User can define their own pipes Can be used to filter, transform or sort data Pipe is defined as a separate typescript class By SKONDA IT Services PVT LTD, Mob: URL:

Custom pipe import{Pipe, PipeTransform} from @Pipe ({ name:'skonda' }) export class skondaPipe implements PipeTransform { transform(value){ return++value; } By SKONDA IT Services PVT LTD, Mob: URL:

Implementing Custom pipe
By SKONDA IT Services PVT LTD, Mob: URL: Implementing Custom pipe Import the pipe into component / module using import statement Declare the pipe in decorator Use the pipe name against angular property By SKONDA IT Services PVT LTD, Mob: URL:

Implementing Custom pipe
By SKONDA IT Services PVT LTD, Mob: URL: Implementing Custom pipe import{ SkondaPipe } from './app.increment.pipe'; @NgModule({ declarations:[ AppComponent, SkondaPipe ], <p> {{ 2 | skonda }} </p> By SKONDA IT Services PVT LTD, Mob: URL:

Custom pipe Example Simple example to increment the value By SKONDA IT Services PVT LTD, Mob: URL:

Custom pipe Parameters
By SKONDA IT Services PVT LTD, Mob: URL: Custom pipe Parameters Parameters can be specified on custom pipe to pass data Example on passing parameters By SKONDA IT Services PVT LTD, Mob: URL:

Custom pipe Example Example to filter data Example to filter data as datatable By SKONDA IT Services PVT LTD, Mob: URL:

Multiple components Component defines a view View can be separate page or be included in a page Clone a component and make required changes Declare this component in root module Example <component1></component1> By SKONDA IT Services PVT LTD, Mob: URL:

Passing data b/w components
By SKONDA IT Services PVT LTD, Mob: URL: Passing data b/w components Data can be passed from one component to another @Input directive is used to receive data Import input directive into component Received data can be displayed using interpolation Example <comp1 [input1]=“value”></comp1> from angular/core @Input() input1 = “”; {{ input1 }} By SKONDA IT Services PVT LTD, Mob: URL:

Routing Routing defines the navigation between components Define the required components Declare these components in root module Define routes for each component Import route modules By SKONDA IT Services PVT LTD, Mob: URL:

Routing Define <base href="/"> in index.html import { RouterModule, Routes } from const skondaRoutes: Routes = [ { path: ‘about-skonda', component: AboutSkonda }, @NgModule( { imports: [ RouterModule.forRoot(appRoutes)], By SKONDA IT Services PVT LTD, Mob: URL:

Routing <a routerLink="/about-skonda“ >About us</a> <a routerLink="/contact-skonda“ >Contact us</a> </nav> <router-outlet></router-outlet> By SKONDA IT Services PVT LTD, Mob: URL:

By SKONDA IT Services PVT LTD, Mob: URL:

Similar presentations

Presentation on theme: "By SKONDA IT Services PVT LTD, Mob: URL:"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

By SKONDA IT Services PVT LTD, Mob: URL:

Similar presentations

Presentation on theme: "By SKONDA IT Services PVT LTD, Mob: URL:"— Presentation transcript:

Similar presentations

About project

Feedback