It could be downloaded from https://angularjs.org/
Sample Application:
1)Create 3 file index.html,app.js and appcontroller.js
2)index.html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="app.js"></script>
<script src="appcontroller.js"></script>
</head>
<body>
<form ng-app="myApp" ng-controller="customersCtrl" name="myForm" novalidate> <!-- ng-app Defines the root element of an application. -->
<ul>
<li ng-repeat="x in names| orderBy : 'Country'"> <!-- ng-repeat : Defines a template for each data in a collection. -->
<!-- AngularJS Filters:
currency- Format a number to a currency format.
filter- Select a subset of items from an array.
lowercase- Format a string to lower case.
orderBy- Orders an array by an expression.
uppercase- Format a string to upper case. -->
<span ng-show="x.Country != 'France'"> <!-- ng-show : Shows or hides HTML elements. -->
{{ x.Name +' , '+ x.City +', ' + x.Country|uppercase }}
<input type="text" ng-model="x.City"> <!-- ng-model: Binds the value of HTML controls to application data. -->
<button ng-click="getCity(x.City)">Click Me</button>
<!-- AngularJS support the following events:
•ng-click
•ng-dbl-click
•ng-mousedown
•ng-mouseenter
•ng-mouseleave
•ng-mousemove
•ng-keydown
•ng-keyup
•ng-keypress
•ng-change -->
</span>
</li>
</ul>
<p>Email:<br>
<input type="email" name="email" ng-model="email" id="myemail" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<!-- Validation
$dirty- The user has interacted with the field.
$valid- The field content is valid.
$invalid- The field content is invalid.
$pristine- User has not interacted with the field yet. -->
</form>
</body>
</html>
2)app.js
var app = angular.module('myApp', []);
// angular.module() -Creates, registers, or retrieves an AngularJS module
3)appcontroller.js
app.controller('customersCtrl', function ($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function (response) { $scope.names = response.records; });
$scope.getCity = function (input) {
alert(input);
}
});
No comments:
Post a Comment