Search This Blog



AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

It could be downloaded from

Sample Application:

1)Create 3 file index.html,app.js and appcontroller.js

<!DOCTYPE html>
    <script src=""></script>
    <script src="app.js"></script>
    <script src="appcontroller.js"></script>
    <form ng-app="myApp" ng-controller="customersCtrl" name="myForm" novalidate>
<!-- ng-app Defines the root element of an application.  -->
            <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-change -->

          <input type="email" name="email" ng-model="email" id="myemail" required>
          <span style="color:red" ng-show="$dirty &&$invalid">
          <span ng-show="$error.required">Email is required.</span>
          <span ng-show="$">Invalid email address.</span>
        <!-- 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.  -->




var app = angular.module('myApp', []); 
// angular.module() -Creates, registers, or retrieves an AngularJS module


app.controller('customersCtrl', function ($scope, $http) {
    .success(function (response) { $scope.names = response.records; });
    $scope.getCity = function (input) {

No comments: