Scribd
Upload
86 views10 pages

Angularjs Example PDF

angular ejemplso

Uploaded by

Silverio Bonilla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
86 views10 pages

Angularjs Example PDF

angular ejemplso

Uploaded by

Silverio Bonilla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

AngularJS Examples pdf

Created By:

Umar Farooque Khan

1
Copyright © pTutorial · All Rights Reserved
Angular Directive Example

This 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 = "" ng-


init="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>

Output

2
Copyright © pTutorial · All Rights Reserved
Simple Directives Application

Type Name:

Hello

List of Cities

1. Delhi
2. Noida
3. Gurgaon
4. Faridabad

Explanation

Cities is a simple array variable initialize usig ng-init directive. The array variable
having 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 Angular
Expression 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 website


http://www.ptutorial.com

AngularJS AJAX - $Http Example

3
Copyright © pTutorial · All Rights Reserved
Simple AngularJS Example to get the data form the server $http can be
used 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>

4
Copyright © pTutorial · All Rights Reserved
Explanation

You can simply execute this example by deploying the angularjshttp.html


and the data.php file on the server.

Everything is same as previous example except these points-

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 property.

Http://Www.ptutorial.com/angularjs/data.php 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",

5
Copyright © 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>

6
Copyright © pTutorial · All Rights Reserved
Http://Www.Ptutorial.Com/Angularjs/Data2.Php

[
{
"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",
"Country" : "USA"
}

AngularJS Filter Example

You can use filter to a directive with pipe character and filter followed by the
colon ng-model name or string. Filter select from an array or JSON data.

Syntax

.....
<tr ng-repeat="x in data | filter:name">
.....
</tr>

7
Copyright © 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>

8
Copyright © pTutorial · All Rights Reserved
Explanation

In the above example filter is associate with the ng-model = "name that why list
filter 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.

$http.get() reads data in the form of JSON from


http://www.ptutorial.com/angularjs/data.php.

If $http.get() method read the data successfully from the server the controller
create the data property.

If you ever think an AngularJS Example is not explained clearly or think we should
add a specific AngularJS Example suggest me at [email protected]. We will add
AngularJS Example as soon as possible for better experience.

9
Copyright © pTutorial · All Rights Reserved
10
Copyright © pTutorial · All Rights Reserved

You might also like