AngularJS Programming Examples




AngularJS Directives Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="" ng-init="firstName='SRK'">
         <p>The name is <span ng-bind="firstName"></span></p>
      </div>
   </body>
</html>

Output

AngularJS Directives (with valid HTML5) Examples

<!DOCTYPE>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div data-ng-app="" data-ng-init="firstName='SRK'">
         <p>The name is <span data-ng-bind="firstName"></span></p>
      </div>
   </body>
</html>

Output

AngularJS Expression Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="">
         <p>My first expression: {{ 10 + 10 }}</p>
      </div>
   </body>
</html>

Output

AngularJS Expression, using a variable Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="">
         <p>Input something in the input box:</p>
         <p>Name: <input type="text" ng-model="name"></p>
         <p>{{name}}</p>
     </div>
   </body>
</html>

Output

AngularJS Controller Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
      <body>
         <p>Try to change the names.</p>
         <div ng-app="myApp" ng-controller="myCtrl">
            First Name: <input type="text" ng-model="firstName"><br>
            Last Name: <input type="text" ng-model="lastName"><br>
            <br>
            Full Name: {{firstName + " " + lastName}}
         </div>
        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
               $scope.firstName= "Ali";
               $scope.lastName= "Khan";
            });
         </script>
      </body>
</html>

Output

AngularJS A simple Expression Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="">
         <p>My first expression: {{ 10 + 10 }}</p>
      </div>
   </body>
</html>

Output

AngularJS Expression without ng-app Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <p>Without the ng-app directive, HTML will display the expression
      as it is, without solving it.</p>
      <div>
         <p>My first expression: {{ 20 + 20 }}</p>
      </div>
   </body>
</html>

Output

AngularJS Expression with Numbers Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="" ng-init="quantity=1;cost=7">
         <p>Total in dollar: {{ quantity * cost }}</p>
      </div>
   </body>
</html>

Output

AngularJS Using ng-bind with Numbers Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="" ng-init="quantity=1;cost=10">
         <p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
      </div>
   </body>
</html>

Output

AngularJS Expression with Strings Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="" ng-init="firstName='Ali';lastName='khan'">
         <p>The full name is: {{ firstName + " " + lastName }}</p>
      </div>
   </body>
</html>

Output

AngularJS Expression with Objects Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="" ng-init="person={firstName:'SRk',lastName:'Khan'}">
         <p>The name is {{ person.lastName }}</p>
      </div>
   </body>
</html>

Output

AngularJS Using ng-bind with Objects Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="" ng-init="person={firstName:'Ali',lastName:'Khan'}">
         <p>The name is <span ng-bind="person.lastName"></span></p>
      </div>
   </body>
</html>

Output

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="" ng-init="points=[1,15,19,2,40]">
         <p>The third result is {{ points[2] }}</p>
      </div>
   </body>
</html>

Output

AngularJS Using ng-bind with Arrays Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="" ng-init="points=[1,15,19,2,40]">
         <p>The third result is {{ points[2] }}</p>
      </div>
   </body>
</html>

Output

AngularJS Controller Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
      <body>
         <p>Try to change the names.</p>
         <div ng-app="myApp" ng-controller="myCtrl">
            First Name: <input type="text" ng-model="firstName"><br>
            Last Name: <input type="text" ng-model="lastName"><br>
            <br>
            Full Name: {{firstName + " " + lastName}}
         </div>
        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
               $scope.firstName= "Ali";
               $scope.lastName= "Khan";
            });
         </script>
      </body>
</html>

Output

AngularJS Modules and controllers in files Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         {{ firstName + " " + lastName }}
      </div>
   </body>
</html>

Output

When to load AngularJS Examples

<!DOCTYPE html>
<html>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
      </script>
      <div ng-app="myApp" ng-controller="myCtrl">
         {{ firstName + " " + lastName }}
      </div>
      <script>
         var app = angular.module("myApp", []);
         app.controller("myCtrl", function($scope) {
         $scope.firstName = "Ali";
            $scope.lastName = "khan";
         });
      </script>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
   </body>
</html>

Output

AngularJS Directives Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="" ng-init="firstName='SRK'">
         <p>The name is <span ng-bind="firstName"></span></p>
      </div>
   </body>
</html>

Output

AngularJS The ng-model Directive Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div data-ng-app="" data-ng-init="quantity=1;price=6">
         <h2>Cost Calculator</h2>
         Quantity: <input type="number" ng-model="quantity">
         Price: <input type="number" ng-model="price">
         <p><b>Total in dollar:</b> {{quantity * price}}</p>
      </div>
   </body>
</html>

Output

The ng-repeat Directive (with Objects) Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="" ng-init="names=[
         {name:'SRK',country:'Norway'},
         {name:'Ali',country:'Sweden'},
         {name:'Annu',country:'Denmark'}]">
         <p>Looping with objects:</p>
         <ul>
            <li ng-repeat="x in names">
            {{ x.name + ', ' + x.country }}</li>
         </ul>
      </div>
   </body>
</html>

Output

AngularJS Make a new Directive Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body ng-app="myApp">
      <w3-test-directive></w3-test-directive>
      <script>
         var app = angular.module("myApp", []);
         app.directive("w3TestDirective", function() {
            return {
               template : "<h1>Made by a directive!</h1>"
            };
         });
      </script>
   </body>
</html>

Output

AngularJS Using the new directive as element Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body ng-app="myApp">
      <w3-test-directive></w3-test-directive>
      <script>
         var app = angular.module("myApp", []);
         app.directive("w3TestDirective", function() {
            return {
              template : "<h1>Made by a directive!</h1>"
            };
         });
     </script>
   </body>
</html>

Output

Using the new directive as attribute examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body ng-app="myApp">
      <w3-test-directive></w3-test-directive>
      <script>
         var app = angular.module("myApp", []);
         app.directive("w3TestDirective", function() {
            return {
              template : "<h1>Made by a directive!</h1>"
            };
         });
     </script>
   </body>
</html>

Output

Using the new directive as a class examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body ng-app="myApp">
      <div class="w3-test-directive"></div>
      <script>
         var app = angular.module("myApp", []);
         app.directive("w3TestDirective", function() {
            return {
               restrict : "C",
               template : "<h1>Made by a directive!</h1>"
            };
         });
      </script>
      <p><strong>Note:</strong> Lorem Ipsum is simply dummy text
      of the printing and typesetting industry.</p>
   </body>
</html>

Output

AngularJS Using the new directive as a comment examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body ng-app="myApp">
   <script>
      var app = angular.module("myApp", []);
      app.directive("w3TestDirective", function() {
         return {
            restrict : "M",
            replace : true,
            template : "<h1>Made by a directive!</h1>"
         };
      });
  </script>
  <p><strong>Note:</strong> Lorem Ipsum is simply dummy text <strong>restrict</strong> 
  of the printing and typesetting industry.</p>
  <p><strong>Note:</strong> Lorem Ipsum is simply dummy text <strong>restrict</strong>
   of the printing and typesetting industry.</p>
</body>
</html>

Output

AngularJS a directive with restrictions examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body ng-app="myApp">
      <w3-test-directive></w3-test-directive>
      <div w3-test-directive></div>
      <script>
         var app = angular.module("myApp", []);
         app.directive("w3TestDirective", function() {
            return {
               restrict : "A",
               template : "<h1>Made by a directive!</h1>"
            };
         });
      </script>
      <p><strong>Note:</strong> Lorem Ipsum is simply dummy text of 
      <strong>Lorem</strong>the printing and typesetting industry.</p>

   </body>
</html>

Output

AngularJS Model Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         Name: <input ng-model="name">
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('myCtrl', function($scope) {
            $scope.name = "Ali Khan";
         });
      </script>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
      industry</p>
   </body>
</html>

Output

AngularJS A Model with two-way binding examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         Name: <input ng-model="name">
         <h1>You entered: {{name}}</h1>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('myCtrl', function($scope) {
            $scope.name = "Khan Ali";
         });
      </script>
      <p>Change the name inside the input field, and you will see
      the name in the header changes accordingly.</p>
   </body>
</html>

Output

AngularJS A Model with validation Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <form ng-app="" name="myForm">
         Email:
         <input type="email" name="myAddress" ng-model="text">
         <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address
         </span>
      </form>
      <p>Enter your e-mail address in the input field. AngularJS will display an 
       errormessage if the address is not an e-mail.</p>
   </body>
</html>

Output

AngularJS A form and its current validation status examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <form ng-app="" name="myForm" ng-init="myText = 'post@tutorialsroot.com'">
         Email:
         <input type="email" name="myAddress" ng-model="myText" required>
         <p>Edit the e-mail address, and try to change the status.</p>
         <h1>Status</h1>
         <p>Valid: {{myForm.myAddress.$valid}} (if true the value meets all criteria).
         </p>
         <p>Dirty: {{myForm.myAddress.$dirty}} (if true the value has been changed).
         </p>
         <p>Touched: {{myForm.myAddress.$touched}} if true the field has been in focus
         </p>
      </form>
   </body>
</html>

Output

AngularJS Set a CSS class when a field is invalid examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <style>
      input.ng-invalid {
         background-color: blue;
     }
   </style>
   <body>
      <form ng-app="" name="myForm">
         Enter your name:
         <input name="myName" ng-model="myText" required>
      </form>
      <p>Edit the text field and it will get/lose classes
      according to the status.</p>
   </body>
</html>

Output

AngularJS Controller Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
      <body>
         <p>Try to change the names.</p>
         <div ng-app="myApp" ng-controller="myCtrl">
            First Name: <input type="text" ng-model="firstName"><br>
            Last Name: <input type="text" ng-model="lastName"><br>
            <br>
            Full Name: {{firstName + " " + lastName}}
         </div>
        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
               $scope.firstName= "Ali";
               $scope.lastName= "Khan";
            });
         </script>
      </body>
</html>

Output

AngularJS Controller Properties Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="personCtrl">
         First Name: <input type="text" ng-model="firstName"><br>
         Last Name: <input type="text" ng-model="lastName"><br>
         <br>
         Full Name: {{fullName()}}
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('personCtrl', function($scope) {
            $scope.firstName = "Ali";
            $scope.lastName = "Khan";
            $scope.fullName = function() {
               return $scope.firstName + " " + $scope.lastName;
            };
         });
      </script>
   </body>
</html>

Output

AngularJS Controller Functions Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="personCtrl">
         First Name: <input type="text" ng-model="person.firstName"><br>
         Last Name: <input type="text" ng-model="person.lastName"><br>
         <br>
         Full Name: {{fullName()}}
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller("personCtrl",function($scope) {
            $scope.person = {
               firstName: "Bablu",
               lastName: "Malik",
            };
            $scope.fullName = function() {
               var x = $scope.person;
               return x.firstName + " " + x.lastName;
            };
         });
      </script>
   </body>
</html>

Output

AngularJS Controller in JavaScript File I Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="personCtrl">
         First Name: <input type="text" ng-model="firstName"><br>
         Last Name: <input type="text" ng-model="lastName"><br>
         <br>
         Full Name: {{fullName()}}
      </div>
      <script src="personcontroller.js"></script>
   </body>
</html>

Output

AngularJS Controller in JavaScript File II Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="namesCtrl"> 
         <ul>
            <li ng-repeat="x in names">
               {{ x.name + ', ' + x.country }}
            </li>
         </ul>
      </div>
      <script src="namescontroller.js"></script>
   </body>
</html>

Output

AngularJS Scope Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         <h1>{{carname}}</h1>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('myCtrl', function($scope) {
            $scope.carname = "BMW";
        });
      </script>
      <p>The property "carname" was made in the controller,
      and can be referred to in the view by using the {{ }} brackets.</p>
   </body>
</html>

Output

AngularJS scope is in sync examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         <input ng-model="name">
         <h1>My name is {{name}}</h1>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('myCtrl', function($scope) {
            $scope.name = "SRK Ali";
         });
      </script>
      <p>When you change the name in the input field, the changes will affect the model
      and it will also affect the name property in the controller.</p>
   </body>
</html>

Output

AngularJS Different Scopes Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         <ul>
            <li ng-repeat="x in names">{{x}}</li>
         </ul>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('myCtrl', function($scope) {
            $scope.names = ["Emil", "Tobias", "Linus"];
         });
      </script>
     <p>The variable "x" has a different value for each repetition, proving
     that each repetition has its own scope.</p>
   </body>
</html>

Output

AngularJS RootScope Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body ng-app="myApp">
      <p>The rootScope's favorite color:</p>
      <h1>{{color}}</h1>
      <div ng-controller="myCtrl">
         <p>The scope of the controller's favorite color:</p>
         <h1>{{color}}</h1>
      </div>
      <p>The rootScope's favorite color is still:</p>
      <h1>{{color}}</h1>
      <script>
         var app = angular.module('myApp', []);
         app.run(function($rootScope) {
            $rootScope.color = 'Blue';
         });
         app.controller('myCtrl', function($scope) {
            $scope.color = "red";
         });
      </script>
   </body>
</html>

Output

AngularJS Expression Filter uppercase examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="personCtrl">
         <p>The name is {{ lastName | uppercase }}</p>
      </div>
      <script>
         angular.module('myApp', []).controller('personCtrl', function($scope) {
            $scope.firstName = "Salman",
            $scope.lastName = "Khan"
         });
      </script>
   </body>
</html>

Output

AngularJS Expression Filter Lowercase Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="personCtrl">
         <p>The name is {{ lastName | lowercase }}</p>
      </div>
      <script>
         angular.module('myApp', []).controller('personCtrl', function($scope) {
            $scope.firstName = "Amir",
            $scope.lastName = "Ali"
         });
      </script>
   </body>
</html>

Output

AngularJS Expression Filter Currency Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="costCtrl">
         <h1>Price: {{ price | currency }}</h1>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('costCtrl', function($scope) {
            $scope.price = 68;
         });
      </script>
      <p>The currency filter formats a number to a currency format.</p>
   </body>
</html>

Output

AngularJS Directive Filter orderBy Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="namesCtrl">
         <p>Looping with objects:</p>
         <ul>
            <li ng-repeat="x in names | orderBy:'country'">
               {{ x.name + ', ' + x.country }}
            </li>
         </ul>
      </div>
      <script>
         angular.module('myApp', []).controller('namesCtrl', function($scope) {
            $scope.names = [
               {name:'Emma',country:'Norway'},
               {name:'Olivia',country:'Sweden'},
               {name:'Sophia',country:'England'},
               {name:'Isabella',country:'Norway'},
               {name:'Ava',country:'Denmark'},
               {name:'Mia',country:'Sweden'},
               {name:'Emily',country:'Denmark'},
               {name:'Abigail',country:'England'},
               {name:'Kai',country:'Norway'}
            ];
         });
      </script>
   </body>
</html>

Output

AngularJS Input Filters Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="namesCtrl">
         <p>Type a letter in the input field:</p>
         <p><input type="text" ng-model="test"></p>
         <ul>
            <li ng-repeat="x in names | filter:test">
               {{ x }}
            </li>
         </ul>
      </div>
      <script>
         angular.module('myApp', []).controller('namesCtrl', function($scope) {
            $scope.names = [
               'Emma',
               'Olivia',
               'Sophia',
               'Isabella',
               'Joe',
               'Gustav',
               'Birgit',
               'Emily',
               'Abigail'
            ];
         });
      </script>
      <p>The list will only consists of names matching the filter.</p>
   </body>
</html>

Output

AngularJS Reading a static JSON file Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="customersCtrl"> 
         <ul>
            <li ng-repeat="x in myData">
               {{ x.Name + ', ' + x.Country }}
            </li>
         </ul>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('customersCtrl', function($scope, $http) {
            $http.get("customers.php").then(function (response) {
               $scope.myData = response.data.records;
            });
         });
      </script>
   </body>
</html>

Output

AngularJS Displaying a table (simple) Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="customersCtrl"> 
         <table>
            <tr ng-repeat="x in names">
               <td>{{ x.Name }}</td>
               <td>{{ x.Country }}</td>
            </tr>
         </table>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('customersCtrl', function($scope, $http) {
            $http.get("customers.php")
            .then(function (response) {$scope.names = response.data.records;});
         });
      </script>
   </body>
</html>

Output

AngularJS Displaying a table with CSS Examples

<!DOCTYPE html>
<html>
   <style>
      table, th , td  {
         border: 1px solid yellow;
         border-collapse: collapse;
         padding: 5px;
      }
      table tr:nth-child(odd) {
         background-color: #f1f1f1;
      }
      table tr:nth-child(even) {
         background-color: #ffffff;
      }
   </style>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="customersCtrl"> 
         <table>
            <tr ng-repeat="x in names">
               <td>{{ x.Name }}</td>
               <td>{{ x.Country }}</td>
            </tr>
         </table>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('customersCtrl', function($scope, $http) {
            $http.get("customers.php")
            .then(function (response) {$scope.names = response.data.records;});
         });
      </script>
   </body>
</html>

Output

AngularJS Displaying a table with an orderBy filter examples

<!DOCTYPE html>
<html>
   <style>
      table, th , td  {
         border: 1px solid red;
         border-collapse: collapse;
         padding: 5px;
      }
      table tr:nth-child(odd) {
         background-color: #f1f1f1;
      }
      table tr:nth-child(even) {
         background-color: #ffffff;
      }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
  </script>
  <body>
      <div ng-app="myApp" ng-controller="customersCtrl"> 
         <table>
            <tr ng-repeat="x in names | orderBy : 'Country'">
               <td>{{ x.Name }}</td>
               <td>{{ x.Country }}</td>
           </tr>
        </table>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('customersCtrl', function($scope, $http) {
            $http.get("customers.php")
            .then(function (response) {$scope.names = response.data.records;});
         });
      </script>
   </body>
</html>

Output

AngularJS Displaying a table with an uppercase filter examples

<!DOCTYPE html>
<html>
   <style>
      table, th , td  {
         border: 1px solid black;
         border-collapse: collapse;
         padding: 5px;
      }
      table tr:nth-child(odd) {
         background-color: #f1f1f1;
      }
      table tr:nth-child(even) {
          background-color: #ffffff;
      }
   </style>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="customersCtrl"> 
         <table>
            <tr ng-repeat="x in names">
               <td>{{ x.Name }}</td>
               <td>{{ x.Country | uppercase }}</td>
            </tr>
         </table>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('customersCtrl', function($scope, $http) {
            $http.get("customers.php")
            .then(function (response) {$scope.names = response.data.records;});
         });
      </script>
   </body>
</html>

Output

AngularJS Displaying a table with an index Examples

<!DOCTYPE html>
<html>
   <style>
      table, th , td  {
         border: 1px solid blue;
         border-collapse: collapse;
         padding: 5px;
      }
      table tr:nth-child(odd) {
         background-color: #f1f1f1;
      }
      table tr:nth-child(even) {
         background-color: #ffffff;
      }
   </style>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="customersCtrl"> 
         <table>
            <tr ng-repeat="x in names">
               <td>{{ $index + 1 }}</td>
               <td>{{ x.Name }}</td>
               <td>{{ x.Country }}</td>
            </tr>
         </table>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('customersCtrl', function($scope, $http) {
            $http.get("customers.php")
            .then(function (response) {$scope.names = response.data.records;});
         });
      </script>
   </body>
</html>

Output

AngularJS Displaying a table with even and odd examples

<!DOCTYPE html>
<html>
   <style>
      table, td  {
         border: 1px solid red;
         border-collapse: collapse;
         padding: 5px;
      }
   </style>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="customersCtrl"> 
         <table>
            <tr ng-repeat="x in names">
               <td ng-if="$odd" style="background-color:#f1f1f1">
               {{ x.Name }}</td>
               <td ng-if="$even">
               {{ x.Name }}</td>
               <td ng-if="$odd" style="background-color:#f1f1f1">
               {{ x.Country }}</td>
               <td ng-if="$even">
               {{ x.Country }}</td>
            </tr>
         </table>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('customersCtrl', function($scope, $http) {
            $http.get("customers.php")
            .then(function (response) {$scope.names = response.data.records;});
         });
      </script>
   </body>
</html>

Output

AngularJS Reading from a MySQL database examples

<!DOCTYPE html>
<html >
   <style>
      table, th , td  {
         border: 1px solid red;
         border-collapse: collapse;
         padding: 5px;
      }
      table tr:nth-child(odd) {
         background-color: #f1f1f1;
      }
      table tr:nth-child(even) {
         background-color: #ffffff;
      }
   </style>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="customersCtrl">
         <table>
            <tr ng-repeat="x in names">
               <td>{{ x.Name }}</td>
               <td>{{ x.Country }}</td>
            </tr>
         </table>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('customersCtrl', function($scope, $http) {
            $http.get("customers_mysql.php")
            .then(function (response) {$scope.names = response.data.records;});
         });
      </script>
   </body>
</html>

Output

AngularJS Reading from a SQL Server database Examples

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border: 1px solid green;
         border-collapse: collapse;
         padding: 5px;
      }
      table tr:nth-child(odd) {
         background-color: #f1f1f1;
      }
      table tr:nth-child(even) {
         background-color: #ffffff;
      }
   </style>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="customersCtrl">
         <table>
            <tr ng-repeat="x in names">
               <td>{{ x.Name }}</td>
               <td>{{ x.Country }}</td>
            </tr>
         </table>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('customersCtrl', function($scope, $http) {
            $http.get("customers_sql.aspx")
            .then(function (response) {$scope.names = response.data.records;});
         });
      </script>
   </body>
</html>

Output

AngularJS Reading from a SQL Server Database Examples

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border: 1px solid green;
         border-collapse: collapse;
         padding: 5px;
      }
      table tr:nth-child(odd) {
         background-color: #f1f1f1;
      }
      table tr:nth-child(even) {
         background-color: #ffffff;
      }
   </style>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="customersCtrl">
         <table>
            <tr ng-repeat="x in names">
               <td>{{ x.Name }}</td>
               <td>{{ x.Country }}</td>
            </tr>
         </table>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('customersCtrl', function($scope, $http) {
            $http.get("customers_sql.aspx")
            .then(function (response) {$scope.names = response.data.records;});
         });
      </script>
   </body>
</html>

Output

AngularJS The ng-disabled Directive Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="" ng-init="mySwitch=true">
         <p>
            <button ng-disabled="mySwitch">Click Me!</button>
         </p>
         <p>
            <input type="checkbox" ng-model="mySwitch"/>Button
         </p>
         <p>
            {{ mySwitch }}
         </p>
      </div> 
   </body>
</html>

Output

AngularJS ng-show Directive Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="">
         <p ng-show="true">I am visible.</p>
         <p ng-show="false">I am not visible.</p>
      </div> 
   </body>
</html>

Output

AngularJS ng-show, Based on a Condition Examples

<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="" ng-init="hour=13">
         <p ng-show="hour > 12">I am visible.</p>
      </div> 
   </body>
</html>

Output

AngularJS ng-hide Directive Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="">
         <p ng-hide="true">I am not visible.</p>
         <p ng-hide="false">I am visible.</p>
      </div> 
   </body>
</html>

Output

AngularJS ng-click Directive Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         <button ng-click="count = count + 1">Click Me!</button>
         <p>{{ count }}</p>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('myCtrl', function($scope) {
            $scope.count = 0;
         });
      </script> 
   </body>
</html>

Output

AngularJS ng-hide Directive Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="">
         <p ng-hide="true">I am not visible.</p>
         <p ng-hide="false">I am visible.</p>
      </div> 
   </body>
</html>

Output

AngularJS ng-show Directive Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="">
         <p ng-show="true">I am visible.</p>
         <p ng-show="false">I am not visible.</p>
      </div> 
   </body>
</html>

Output

AngularJS Forms Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="formCtrl">
         <form novalidate>
            First Name:<br>
            <input type="text" ng-model="user.firstName"><br>
            Last Name:<br>
            <input type="text" ng-model="user.lastName">
            <br><br>
            <button ng-click="reset()">RESET</button>
         </form>
         <p>form = {{user}}</p>
         <p>master = {{master}}</p>
      </div>
      <script>
         var app = angular.module('myApp', []);
            app.controller('formCtrl', function($scope) {
               $scope.master = {firstName:"John", lastName:"Abraham"};
               $scope.reset = function() {
                  $scope.user = angular.copy($scope.master);
               };
               $scope.reset();
            });
      </script>
   </body>
</html>

Output

AngularJS Validation Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>  
   <body>
      <h2>AngularJS Validation Example</h2>
      <form ng-app="myApp" ng-controller="validateCtrl" 
         name="myForm" novalidate>
         <p>Username:<br>
            <input type="text" name="user" ng-model="user" required>
            <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
               <span ng-show="myForm.user.$error.required">Username is required.
                  </span>
            </span>
         </p>
         <p>Email:<br>
            <input type="email" name="email" ng-model="email" 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>
         <p>
            <input type="submit"
            ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
            myForm.email.$dirty && myForm.email.$invalid">
         </p>
      </form>
      <script>
         var app = angular.module('myApp', []);
         app.controller('validateCtrl', function($scope) {
            $scope.user = 'John Abraham';
            $scope.email = 'Abraham.John@gmail.com';
         });
      </script>
   </body>
</html>

Output

AngularJS angular.lowercase() examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         <p>{{ x1 }}</p>
         <p>{{ x2 }}</p>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('myCtrl', function($scope) {
            $scope.x1 = "SRKK";
            $scope.x2 = angular.lowercase($scope.x1);
         });
      </script>
   </body>
</html>

Output

AngularJS angular.uppercase() examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         <p>{{ x1 }}</p>
         <p>{{ x2 }}</p>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('myCtrl', function($scope) {
            $scope.x1 = "srk";
            $scope.x2 = angular.uppercase($scope.x1);
         });
      </script>
   </body>
</html>

Output

AngularJS angular.isString() examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         <p>{{ x1 }}</p>
         <p>{{ x2 }}</p>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('myCtrl', function($scope) {
            $scope.x1 = "ANNU";
            $scope.x2 = angular.isString($scope.x1);
         });
      </script>
   </body>
</html>

Output

AngularJS angular.isNumber() examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="myCtrl">
         <p>{{ x1 }}</p>
         <p>{{ x2 }}</p>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('myCtrl', function($scope) {
            $scope.x1 = "AMIR";
            $scope.x2 = angular.isNumber($scope.x1);
         });
      </script>
   </body>
</html>

Output

AngularJS Include HTML Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body ng-app="">
      <div ng-include="'myFile.htm'"></div>
   </body>
</html>

Output

Include a table containing AngularJS code Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body>
      <div ng-app="myApp" ng-controller="customersCtrl"> 
         <div ng-include="'myTable.htm'"></div>
      </div>
      <script>
         var app = angular.module('myApp', []);
         app.controller('customersCtrl', function($scope, $http) {
            $http.get("customers.php").then(function (response) {
               $scope.names = response.data.records;
            });
         });
      </script>
      <p>The HTML, and AngularJS code, for this table are located
      in the file "myTable.htm".</p>
   </body>
</html>

Output

AngularJS Include a file from a different domain examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body ng-app="myApp">
      <div ng-include="'http://tutorialsroot.com/angular_include.php'"></div>
      <script>
         var app = angular.module('myApp', [])
         app.config(function($sceDelegateProvider) {
            $sceDelegateProvider.resourceUrlWhitelist([
               'http://tutorialsroot.com'
            ]);
         });
      </script>
   </body>
</html>

Output

AngularJS Animation Examples

<!DOCTYPE html>
<html>
   <style>
      div {
         transition: all linear 0.5s;
         background-color: red;
         height: 100px;
         width: 100%;
         position: relative;
         top: 0;
         left: 0;
      }
      .ng-hide {
         height: 0;
         width: 0;
         background-color: transparent;
         top:-200px;
         left: 200px;
      }
   </style>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <script src = 
      "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js">
   </script>
   <body ng-app="ngAnimate">
      <h1>Hide the DIV BOX: <input type="checkbox" ng-model="myCheck"></h1>
      <div ng-hide="myCheck"></div>
   </body>
</html>

Output

AngularJS including the animation library as a dependency examples

<!DOCTYPE html>
<html>
   <style>
      div {
         transition: all linear 0.5s;
         background-color: blue;
         height: 100px;
         width: 100%;
         position: relative;
         top: 0;
         left: 0;
      }
      .ng-hide {
         height: 0;
         width: 0;
         background-color: transparent;
         top:-200px;
         left: 200px;
      }
   </style>
   <script src = 
   "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <script src = 
   "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js">
   </script>
   <body ng-app="myApp">
      <h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
      <div ng-hide="myCheck"></div>
      <script>
         var app = angular.module('myApp', ['ngAnimate']);
      </script>
   </body>
</html>

Output

AngularJS Animation using CSS3 Transitions Examples

<!DOCTYPE html>
<html>
   <style>
      div {
         transition: all linear 0.5s;
         background-color: yellow;
         height: 100px;
      }

      .ng-hide {
         height: 0;
      }
   </style>
   <script src = 
      "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <script src = 
      "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js">
   </script>
   <body ng-app="myApp">
      <h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
      <div ng-hide="myCheck"></div>
      <script>
         var app = angular.module('myApp', ['ngAnimate']);
      </script>
   </body>
</html>

Output

AngularJS Animation using CSS3 Animations Examples

<!DOCTYPE html>
<html>
   <style>
      @keyframes myChange {
         from {
            height: 100px;
         } to {
            height: 0;
         }
      }

      div {
         height: 100px;
         background-color: green;
      }

      div.ng-hide {
         animation: 0.5s myChange;
      }
   </style>
   <script src = 
      "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <script src = 
      "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js">
   </script>
   <body ng-app="ngAnimate">
      Hide the DIV: <input type="checkbox" ng-model="myCheck">
      <div ng-hide="myCheck">
      </div>
   </body>
</html>

Output

AngularJS Note Application Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body ng-app="myNoteApp" ng-controller="myNoteCtrl">
      <h2>My Note</h2>
      <textarea ng-model="message" cols="40" rows="10"></textarea>
      <p>
         <button ng-click="save()">Save</button>
         <button ng-click="clear()">Clear</button>
      </p>
      <p>Number of characters left: <span ng-bind="left()"></span></p>
      <script>
         var app = angular.module("myNoteApp", []); 
         app.controller("myNoteCtrl", function($scope) {
            $scope.message = "";
            $scope.left = function() {
               return 100 - $scope.message.length;
            };
            $scope.clear = function() {
               $scope.message = "";
            };
            $scope.save = function() {
               alert("Note Saved");
            };
         });
      </script>
   </body>
</html>

Output

AngularJS ToDo Application Examples

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
   <body ng-app="myApp" ng-controller="todoCtrl">
      <h2>My Todo List</h2>
      <form ng-submit="todoAdd()">
         <input type="text" ng-model="todoInput" size="50" placeholder="Add New">
         <input type="submit" value="Add New">
      </form>
      <br>
      <div ng-repeat="x in todoList">
         <input type="checkbox" ng-model="x.done"> <span ng-bind="x.todoText">
	      </span>
      </div>
      <p><button ng-click="remove()">Remove marked</button></p>
      <script>
         var app = angular.module('myApp', []); 
         app.controller('todoCtrl', function($scope) {
            $scope.todoList = [{todoText:'Clean House', done:false}];

            $scope.todoAdd = function() {
               $scope.todoList.push({todoText:$scope.todoInput, done:false});
               $scope.todoInput = "";
            };

            $scope.remove = function() {
               var oldList = $scope.todoList;
               $scope.todoList = [];
               angular.forEach(oldList, function(x) {
                  if (!x.done) $scope.todoList.push(x);
               });
            };
         });
      </script>
   </body>
</html>

Output