AngularJS Example Pdf - PTutorial

AngularJS Examples pdfCreated By:Umar Farooque Khan1Copyright pTutorial · All Rights Reserved

Angular Directive ExampleThis AngularJS Directive example explain the concept behind the ng-app,ng-model, ng-init, ng-model, ng-repeat.Directives Example html head title AngularJS Directives Example /title script src "angular.min.js" /script /head body h2 Simple Directives Application /h2 div ng-app "" nginit "cities ['Delhi','Noida','Gurgaon','Faridabad']" p Type Name: input type "text" ng-model "fname" /p p Hello span ng-bind "fname" /span /p p List of Cities /p ol li ng-repeat "x in cities" {{ x }} /li /ol /div /body /html Output2Copyright pTutorial · All Rights Reserved

Simple Directives ApplicationType Name:HelloList of nCities is a simple array variable initialize usig ng-init directive. The array variablehaving four cities.Ng-model is used to bind the fname to the text box.Ng-bind is used to display the data of ng-model. You can use AngularExpression in place of ng-bind.ng-repeat is used to iterate the cities array variable.Note: If you willing to learn more example, please visit websitehttp://www.ptutorial.comAngularJS AJAX - Http Example3Copyright pTutorial · All Rights Reserved

Simple AngularJS Example to get the data form the server http can beused to get the data from server.AngularJS Http Example !DOCTYPE html html script src "angular.min.js" /script body div ng-app "ukApp" ng-controller "ukController" table border "2" tr th Name /th th City /th th Country /th /tr tr ng-repeat "x in data" td {{ x.Name}} /td td {{ x.City}} /td td {{ x.Country}} /td /tr /table /div script var app angular.module('ukApp', []);app.controller('ukController', function( scope, http) { http.get("data1.php").success(function(response) { scope.data response.studentdata;});}); /script /body /html 4Copyright pTutorial · All Rights Reserved

ExplanationYou can simply execute this example by deploying the angularjshttp.htmland the data.php file on the server.Everything is same as previous example except these pointsAngularJS 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 hp File Data{"studentdata": [{"Name" : "Umar Farooque","City" : "Delhi","Country" : "India"},{"Name" : "Umar","City" : "Delhi","Country" : "India"},{"Name" : "Rahul","City" : "Delhi","Country" : "India"},{"Name" : "John","City" : "New York city",5Copyright pTutorial · All Rights Reserved

"Country" : "USA"}]}Another Angular Example !DOCTYPE html html script src "angular.min.js" /script body div ng-app "ukApp" ng-controller "ukController" table border "2" tr th Name /th th City /th th Country /th /tr tr ng-repeat "x in data" td {{ x.Name}} /td td {{ x.City}} /td td {{ x.Country}} /td /tr /table /div script var app angular.module('ukApp', []);app.controller('ukController', function( scope, http) { http.get("data2.php").success(function(response) { scope.data response;});}); /script /body /html 6Copyright pTutorial · All Rights Reserved

e" : "Umar Farooque","City" : "Delhi","Country" : "India"},{"Name" : "Umar","City" : "Delhi","Country" : "India"},{"Name" : "Rahul","City" : "Delhi","Country" : "India"},{"Name" : "John","City" : "New York city","Country" : "USA"}]AngularJS Filter ExampleYou can use filter to a directive with pipe character and filter followed by thecolon ng-model name or string. Filter select from an array or JSON data.Syntax. tr ng-repeat "x in data filter:name" . /tr 7Copyright pTutorial · All Rights Reserved

Filter Example !DOCTYPE html html script src "angular.min.js" /script !DOCTYPE html html script src "angular.min.js" /script body div ng-app "ukApp" ng-controller "ukController" input type "text" ng-model "name" /td table border "2" tr th Name /th th City /th th Country /th /tr tr ng-repeat "x in data filter: name " td {{ x.Name}} /td td {{ x.City}} /td td {{ x.Country}} /td /tr /table /div script var app angular.module('ukApp', []);app.controller('ukController', function( scope, http) { http.get("data2.php").success(function(response) { scope.data response;});}); /script /body /html 8Copyright pTutorial · All Rights Reserved

ExplanationIn the above example filter is associate with the ng-model "name that why listfilter according to the input field with name.All the thing same as Controller Example except these.AngularJS will invoke ukController with a scope and http object. http is an XMLHttpRequest (Ajax) object for requesting external server data. ngularjs/data.php.formofJSONfromIf http.get() method read the data successfully from the server the controllercreate the data property.If you ever think an AngularJS Example is not explained clearly or think we shouldadd a specific AngularJS Example suggest me at info@ptutorial.com. We will addAngularJS Example as soon as possible for better experience.9Copyright pTutorial · All Rights Reserved

10Copyright pTutorial · All Rights Reserved

AngularJS Tutorial, AngularJS Example pdf, AngularJS, AngularJS Example, angular ajax example, angular filter example, angular controller Created Date 11/29/2015 3:37:05 AM