AngularJS Tutorial Pdf

AngularJS TutorialPDFCreated By:Umar Farooque Khan1Copyright pTutorial · All Rights Reserved

AngularJS TutorialThis section contains AngularJS Tutorial with the help of example and PDF as well.This tutorial is specially design to help beginners to learn AngularJS from very basicexample to advance quickly and efficiently.AngularJSAngularJS is an open-source web application framework or JavaScript framework.Develop and maintained by Google and by a community of individual developers.In other word you can say AngularJS is an extended form of HTML with newattributes that is mainly develop for simple page web applications.RequirementBefore start learning AngularJS you should know the basic of these languages:- HTML CSS JavaScriptNeed Of AngularJSAngularJS is basically develop for simplify the development and testing of model–view–controller (MVC) and model–view–view model (MVVM) architectures basedweb application.2Copyright pTutorial · All Rights Reserved

Advantages Easy to learn Reduce the amount of java script code needed More responsive to user actions Large community support Open Source, completely free AngularJS provides reusable componentsDisadvantages Of AngularJSNot Secure, AngularJS is only JavaScript Framework nothing else that why notsecure.If the user disable JavaScript then user will just see the basic page nothing else.AngularJS Example !DOCTYPE html html lang "en-US" scriptsrc 3.14/angular.min.js"" /script body div ng-app "" p Enetr Name : input type "text" ng-model "name" /p p style "color:red"; Hello {{name}} /h2 /p /p /div 3Copyright pTutorial · All Rights Reserved

/body /html Step By Step AngularJS AppSteps To Start Creating AngularJS Based Web ApplicationAs you already know AngularJS is JavaScript framework, it is a library based writtenin JavaScript. scriptsrc 3.14/angular.min.js" /script Just copy and paste the above line into the head section and use the functionality ofthe AngularJS.Note:- In the above case your System must be connected to the Internet.For Offline UseJust copy the URL and paste it into the URL bar of the browser.Copy complete code paste into the text editor and save it with any name (preferredangular.min.js).Call this script in the head section with proper directory structure with script tagsee the below example.4Copyright pTutorial · All Rights Reserved

script src "angular.min.js" /script Note: - In my case the angular.min.js file located on the same folder.Offline Example !DOCTYPE html html lang "en-US" script src "angular.min.js" /script body div ng-app "" p Enetr Name : input type "text" ng-model "name" /p p style "color:red"; Hello {{name}} /h2 /p /p /div /body /html The AngularJS ComponentsThere are three main component of AngularJS are following below ng-app This directive defines AngularJS based web application to HTML.ng-model This directive binds the values of AngularJS application data to HTMLinput controls.ng-bind This directive binds the AngularJS Application data to HTML tags.5Copyright pTutorial · All Rights Reserved

AngularJS DirectivesAngularJS DirectivesAngularJS directives are basically used to extend the HTML attributes calledDirectives. They starts with prefix ng-. We will discuss following directivesThe Ng-App DirectiveThe ng-app directive is used to initializes an AngularJS application. ng-app is theroot element of the Angular application. It is automatically initialize when theapplication is loaded.Syntax div ng-app "" . /div The ng-init DirectiveThe ng-init directive is used to initializes application data or value or you can say putthe value to the variable.6Copyright pTutorial · All Rights Reserved

Syntax div ng-app "" ng-init "Name 'Juhi'" /div Example html scriptsrc 3.14/angular.min.js" /script body div ng-app "" ng-init "Name 'Juhi'" p Type your last Name : /p p Name: input type "text" ng-model "Name" /p p Hello {{ Name }} /p /div /body /html Ng-Model DirectiveThe ng-model directive is used binds the value of HTML controls (like input) toapplication data.7Copyright pTutorial · All Rights Reserved

Syntax div ng-app "" . p Type Name: input type "text" ng-model "Name" /p /div The ng-repeat DirectiveThe ng-repeat directive is used to iterate the html elements for each item in acollection. In following example, we've iterated over array of cities.Syntax div ng-app "" ng-init "cities ['Delhi','Noida','Gurgaon']" ul li ng-repeat "city in cities" {{ city }} /li /ul /div ng-repeat Example html 8Copyright pTutorial · All Rights Reserved

scriptsrc 3.14/angular.min.js" /script body div ng-app "" ng-init "cities ['Delhi','Noida','Gurgaon']" ul li ng-repeat "city in cities" {{ city }} /li /ul /div /body /html 9Copyright pTutorial · All Rights Reserved

AngularJS – ExpressionsAngularJS – ExpressionsAngular Expression are used to bind the directive data to HTML. Angular expressionare putting inside the double braces.For Example input type "text" name "name" ng-model "name" {{name}}Expressions are used to bind application data to html. Expressions are written insidedouble braces like {{expression}}.Expressions behaves in same way as ng-bind directives. You can use express in theplace of ng-bind.AngularJS application expressions are like JS expressions and put the data wherethey are used.AngularJS Example !DOCTYPE html html script src "angular.min.js" /script body 10Copyright pTutorial · All Rights Reserved

div ng-app "" p Simple Angular Expresion: {{ 38 2 }} /p /div /body /html AngularJS Example !DOCTYPE html html script src "angular.min.js" /script body div ng-app "" ng-init "a 10; b 20;" p Simple Angular Expresion: {{ a*b }} /p /div /body /html AngularJS Example !DOCTYPE html html script src "angular.min.js" /script body div ng-app "" ng-init "a 10; b 20;" p Simple Angular Expresion: {{ a*b }} /p /div /body 11Copyright pTutorial · All Rights Reserved

/html AngularJS Sum Example !DOCTYPE html html script src "angular.min.js" /script body div ng-app "" h1 Calculate sum /h1 input type "number" ng-model "a" input type "number" ng-model "b" p Simple Angular Sum: {{a b}} /p /div /body /html AngularJS ObjectsAngularJS objects are like JavaScript objects so you can easily access via dot(.)operatorAngularJS Objects Example !DOCTYPE html html 12Copyright pTutorial · All Rights Reserved

script src "angular.min.js" /script body div ng-app "" ng-init "student {Name:'Brown',RollNo:38}" p The name is {{ student.Name }} /p p The Roll Number is {{ student.RollNo }} /p /div /body /html AngularJS ArraysAngularJS arrays are like JavaScript arrays so you can easily access via index.AngularJS Arrays Example !DOCTYPE html html script src "angular.min.js" /script body div ng-app "" ng-init "names ['uk','kk','khan','umar']" p The third result is {{ names[2] }} /p /div /body /html 13Copyright pTutorial · All Rights Reserved

Note: angular.min.js file must be in the same folder or use this 1.3.14/angular.min.js but in this caseinternet must be connected.14Copyright pTutorial · All Rights Reserved

AngularJS ControllerThe AngularJS Controller basically JavaScript constructor function that is used topass the AngularJS Scope.In other word controller is used to control the data in the whole application.AngularJS ControllerThis example explain the concept of the angular controller with point to pointexplanation.AngularJS Controller Example html head title Angular JS Controller Example /title script src "angular.min.js" /script /head body h2 AngularJS Sample Controller Application /h2 div ng-app "ukApp" ng-controller "ukController" Enter first name: input type "text" ng-model "name.FName" br br Enter last name: input type "text" ng-model "name.LName" br br Your Name: {{name.fullN()}} /div script 15Copyright pTutorial · All Rights Reserved

var mainApp angular.module("ukApp", []);mainApp.controller('ukController', function( scope) { scope.name {FName: "Umar",LName: "Farooque",fullN: function() {var studentObject;studentObject scope.name;return studentObject.FName " " studentObject.LName;}};}); /script /body /html Explanation of Controller ExampleThe angular Application always starts from directive ng-app so ng-app ”ukApp” isthe starts point and end where the div is end.The ng-controller "ukController " attribute is an AngularJS directive that is used fordefining the controller.The ukController function is a JavaScript function with scope, this is dependencyinjection that’s built into AngularJS.AngularJS will invoke the controller with a scope object.16Copyright pTutorial · All Rights Reserved

scope.name is property of studentController object.FName and LName are two properties of scope.name object. They have somedefault value.fullN is the function of scope.name object which return the full name including firstname and last name.Note: We can also defined the controller object in separate JavaScript and use thatparticular file in HTML.Note: If you willing to learn more example, please visit websitehttp://www.ptutorial.com17Copyright pTutorial · All Rights Reserved

AngularJS AjaxAngularJS provides the http service that is basically used to communicate with theremote HTTP servers via the browser's XMLHttpRequest object or via JSONP.In other word http service is used to send the ajax call to remote server. Ajax callmust be in the same server.Important Point About HttpAngularJS http is a Angular service for reading data from servers. http.get(url) is a function that is used to read the data from server.Example !DOCTYPE html html script src "angular.min.js" /script body div ng-app "ukApp" ng-controller "ukController" {{data}} /div script var app angular.module('ukApp', []);app.controller('ukController', function( scope, http) {18Copyright pTutorial · All Rights Reserved

.php").success(function(response) { scope.data response;});}); /script /body /html ExplanationYou can simply execute this example by deploying the angularjshttp.html and thedata3.php file on the server.AngularJS will invoke ukController with a scope and http object. scope is the application object. http is an XMLHttpRequest object for requesting external server data. http.get() method is used to get the data from server ().If success, the controller assign the response data to the data Php File Data19Copyright pTutorial · All Rights Reserved

Note: If you willing to learn more example, please visit websitehttp://www.ptutorial.comAngularJS FilterAngularJS FiltersAs the name filter can be used to transform the data. For example formatting a stringto the lowercase. Filter can be used through the directives or expression by using thepipe ( ) operator.Here Is Some Common Filter Used In AngularJSFiltersFilterDescriptioncurrencyChange number to currency formatfilterSelect a subset of items from an arraylowercaseChange a string to lower caseorderByOrders an array by an expressionuppercaseChange a string to upper caseAdding Filters To Expressions20Copyright pTutorial · All Rights Reserved

You can add filter to the expression by using pipe operator ( ) forward by filterUppercase Filter Example div ng-app "ukApp" ng-controller "ukController" p The name is {{ name uppercase }} /p /div Lowercase Filter Example div ng-app "ukApp" ng-controller "ukController" p The name is {{ name lowercase }} /p /div Currency Filter Example div ng-app "ukApp" ng-controller "costCtrl" input type "number" ng-model "rs" input type "number" ng-model "qua" p Total {{ (rs * qua) currency }} /p 21Copyright pTutorial · All Rights Reserved

/div Orderby FilterTo order subjects by marks, we've used orderBy marks.OrderBy Filter Example ul li ng-repeat "subject in student.subjects orderBy:'marks'" {{ subject.name ', marks:' subject.marks }} /li /ul Note: If you willing to learn more example, please visit websitehttp://www.ptutorial.com22Copyright pTutorial · All Rights Reserved