AngularJS Application Demo

Angular is a “Javascript Framework“. AngularJs extends HTML attribute with Directives and binds data to HTML with Expressions.

AngularJs extends HTML with “ng-directives“. Directives in AngularJs is nothing but the new HTML attributes. AngularJs lets you extends the new HTML attributes with the prefix “ng-“.

Using ng-app directive you can initialize AngularJs application.

Using ng-init directive you can initialize AngularJs application data.

Using ng-model directive you can binds the value of HTML controls to application data.

Read more about AngularJs Directives at AngularJS directive reference.

Example AngularJS Application controls.


<div ng-app="" ng-init="firstName='John'">
   
   <p>Name: <input type="text" ng-model="firstName"></p>
   
   <p>You wrote: {{ firstName }}</p>

</div>

You can define root element by using ng-app directive. The ng-app directive will auto bootstrap (automatically initialize) the application when a web page is loaded.

You can define initial values for AngularJs application using ng-init

Here is AngularJS Application Demo. Let’s make AngularJs application for NOTES.

Step 1 :


<!DOCTYPE html>
<html>
    <title>AngularJS Demo Application</title>
    <head>
        <style>
           .bg-color{ background-color : #ffffff; }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body class="bg-color">
        <script>
           var app = angular.module('angularJsDemoApp', []);
           app.controller('angularJsDemoAppController', function($scope) {
              $scope.notes = ["AngularJs", "Demo", "Applocation", "Notes"];
           });
        </script>
 
        <div ng-controller="angularJsDemoAppController" ng-app="angularJsDemoApp">
            <input type="text" name="input" title="AngularJS Demo Application" ng-modal="notes" />
      
            <ul>
               <li ng-repeat = "note in notes">{{note}}</li>
            </ul>
 
            <p>So far we have made an HTML list based on the items of an array.</p>
        </div>
    </body>
</html>

 Step 1 output : 

AngularJs-application-demo
AngularJs-application-demo

Step 2 :

<pre><!DOCTYPE html>
<html>
    <title>AngularJS Demo Application</title>
    <head>
        <style>
           .bg-color{ background-color : #ffffff; }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body class="bg-color">
        <script>
           var app = angular.module('angularJsDemoApp', []);
           app.controller('angularJsDemoAppController', function($scope) {
              $scope.notes = ["AngularJs", "Demo", "Applocation", "Notes"];
           
              $scope.addNote = function()
              {
                 var noteText = $scope.note
                 $scope.notes.push(noteText);
                 $scope.note = '';
              }

           });
        </script>
 
        <div ng-controller="angularJsDemoAppController" ng-app="angularJsDemoApp">
            <input type="text" name="input" title="AngularJS Demo Application" ng-modal="notes" />
      
            <ul>
               <li ng-repeat = "note in notes">{{note}}</li>
            </ul>
 
            <p>So far we have made an HTML list based on the items of an array.</p>
           
            <input type="text" ng-modal="note" />
            <button ng-click="addNote()" title="AngularJS demo application, add notes">Add Note</button>
        
        </div>
    </body>
</html>
</pre>

Step 2 output :

AngularJs-application-demo-step-2
AngularJs-application-demo-step-2

Step 3 :


<!DOCTYPE html>
<html>
    <title>AngularJS Application Demo</title>
    <head>
        <style>
            .bg-color{ background-color : #ffffff; }
        </style>
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body class="bg-color">
    <script>
        var app = angular.module('angularJsAppDemo', []);
        app.controller('angularJsAppControllerDemo', function($scope)
        {
            $scope.notes = ["AngularJs","Applocation","Demo","Notes"];
            $scope.addNote = function()
            {
                 $scope.errorText = '';
                 if(!$scope.note)
                 {
                     $scope.errortext = "Please, add few text!";
                     return;
                 }
                 if($scope.notes.indexOf($scope.note) == -1)
                 {
                     $scope.notes.push($scope.note);
                     $scope.note = '';
                 }
                 else
                 {
                     $scope.errortext = "Note was already added!";
                 }
             }
             $scope.removeNote = function(noteId)
             {
                 $scope.errortext = "";
                 $scope.notes.splice(noteId, 1);
             }
         });
      </script>
        <div ng-controller="angularJsAppControllerDemo" ng-app="angularJsAppDemo" ng-cloak class="w3-card-2 w3-margin" style="max-width:550px;">
            <header class="w3-container w3-light-grey w3-padding-16">
                <h3>AngularJS Application Demo</h3>
            </header>
            <ul class="w3-ul">
                <li ng-repeat = "note in notes" class="w3-padding-16">{{note}}
                   <span style="cursor:pointer;" class="w3-right w3-margin-right" ng-click="removeNote($index)">&times;</span>
                </li>
            </ul>
 
            <div class="w3-container w3-light-grey w3-padding-16">
                <div class="w3-row w3-margin-top">
                   <div class="w3-col s10">
                      <input placeholder="Add Note For AngularJS application demo" ng-model="note" class="w3-input w3-border w3-padding">
                   </div>
                  <div class="w3-col s2">
                     <button ng-click="addNote()" title="AngularJS application demo, add notes" class="w3-btn w3-padding w3-green">Add Note</button>
                  </div>
              </div>
              <p class="w3-padding-left w3-text-red">{{errortext}}</p>
          </div>
      </div>
   </body>
</html>

Step 3 output :

AngularJs-application-demo-step-3
AngularJs-application-demo-step-3

This is very basic AngularJs Application demo. You can start with your basics from this demo. Let me know If you have any query regarding this.

Leave a Reply

Your email address will not be published. Required fields are marked *