Scribd
Upload
77 views

Angularjs Example PDF

angular ejemplso

Uploaded by

Silverio Bonilla
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
77 views

Angularjs Example PDF

angular ejemplso

Uploaded by

Silverio Bonilla
Copyright
© © All Rights Reserved
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