Directives Examples in AJS

Published by Admin on

Table of Contents hide
1. Examples : A basic program of Directives Examples in AJS.
2. Examples : A basic program of AJS Expressions to Add two numbers.
3. Examples : A basic program of AJS Expressions to do Simple Arithmetic Calculator Operations.
4. Examples : A basic program of AJS Expressions to do Simple Arithmetic Operations with ng-repeat directives.
5. Examples : A basic program of AJS Expressions to do Simple Arithmetic Operations.
6. Examples : A basic program of Internal(codes in the same program)AJS Controllers.
7. Examples : A basic program of External(codes in separate file/program)AJS Controllers.
8. Examples : A basic program to calculate Simple Interest using AJS Directives and Expressions.
9. Examples : A basic program of Counter on Click event (Non-Parameterized) with AJS Directives, Expressions only,.
10. Examples : A basic program of Counter on Click event (Non-Parameterized) using AJS Modules, Directives, Expressions, and Controllers.
11. Examples : A basic program of Counter on Click event (Parameterized) using AJS Modules, Directives, Expressions, and Controllers.

List of some common and different types of Directives Examples in AJS

Examples : A basic program of Directives Examples in AJS.
<html>
   <head>
      <title>Angular JavaScript Directives Programs</title>
   </head>
   
   <body>
      <h1>Angular JS Application</h1>
      
      <div ng-app = "">
         <p>Enter User Name: <input type = "text" ng-model = "uname"></p>
         <p>Hello I am <span ng-bind = "uname"></span> from India.</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

Output:



NB:
 
(i) Save as = Ajs.html
(ii) Run simply by double clicking file with the help of any Web Browser.

---------------- OR  ----------------

<html>
   <head>
      <title>AngularJS Basic Program Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   
   <body>
      <h1>Angular JS Application</h1>
      
      <div ng-app = "">
         <p>Enter User Name: <input type = "text" ng-model = "uname"></p>
         <p>Hello I am = <span ng-bind = "uname"></span> from India.</p>
      </div>     
      
   </body>
</html>

Output:

Coders Helpline : Directives Example 2

---------------- OR  ----------------

<html>
   <head>
      <title>AngularJS Basic Program Example</title>
      
   </head>
   
   <body>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
      <h1>Angular JS Application</h1>
      
      <div ng-app = "">
         <p>Enter User Name: <input type = "text" ng-model = "uname"></p>
         <p>Hello I am = <span ng-bind = "uname"></span> from India.</p>
      </div>      
      
   </body>
</html>

Output :

Angular JS Application
Enter User Name: CodersHelpline.Com

Hello I am = CodersHelpline.Com from India.

NB: Save as - program1.html.(run by simply double click on the file)
Examples : A basic program of AJS Expressions to Add two numbers.
<html>
   <head>
      <title>AngularJS Basic Program Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   
   <body>
      <h1>Angular JS Application</h1>
      
      <div ng-app = "">
         <div>Enter First Value: <input type = "number" ng-model = "fval"></div>
         <div>Enter Second Value: <input type = "number" ng-model = "sval"></div>
         <div>Sum: {{fval + sval}}</div>
      </div>     
      
   </body>
</html>

--------------  OR  --------------

<html>
   <head>
      <title>AngularJS Basic Program Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   
   <body>
      <h1>Angular JS Application</h1>
      
      <div ng-app = "">
         <div>Enter First Value: <input type = "text" ng-model = "fval"></div>
         <div>Enter Second Value: <input type = "text" ng-model = "sval"></div>
         <div>Sum: {{fval*1 + sval*1}}</div>   [ or may use - <div>Sum: {{(fval-0) + (sval-0)}}</div> ]
      </div>     
      
   </body>
</html>

NB: Here 1 is multiplied or 0 is subtracted to convert text/string values into integer/numeric/number values because + symbol is interpreted as Concatenation character. 

--------------  OR  --------------

<html>
   <head>
      <title>AngularJS Basic Program Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   
   <body>
      <h1>Angular JS Application</h1>
      
      <div ng-app = "">
         <div>Enter First Value: <input type = "text" ng-model = "fval"></div>
         <div>Enter Second Value: <input type = "text" ng-model = "sval"></div>
         <div>Sum: {{fval--sval}}</div>
      </div>     
      
   </body>
</html>
Examples : A basic program of AJS Expressions to do Simple Arithmetic Calculator Operations.
<html>
   <head>
      <title>AngularJS Basic Program Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   
   <body>
      <h1>Angular JS Application</h1>
      
      <div ng-app = "">
         <div>Enter First Value: <input type = "number" ng-model = "fval"></div>
         <div>Enter Second Value: <input type = "number" ng-model = "sval"></div>
         
         <div>Addition Result : {{fval + sval}}</div>
         <div>Subtraction Result : {{fval - sval}}</div>
         <div>Multiplication Result : {{fval * sval}}</div>
         <div>Division Result : {{fval / sval}}</div>
      </div>     
      
   </body>
</html>

Output:

Angular JS Application

Enter First Value: 40
Enter Second Value: 20

Addition Result : 60
Subtraction Result : 20
Multiplication Result : 800
Division Result : 2
Examples : A basic program of AJS Expressions to do Simple Arithmetic Operations with ng-repeat directives.
<html>
   <head>
      <title>AngularJS Basic Program Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   
   <body>
      <h1>Angular JS Application</h1>
      
      <div ng-app="" ng-init="values=[10,20,30,40,50]">
         <p>Use of Looping concept with ng-repeat directive :</p>
         <ul>
           <li ng-repeat="x in values">
             {{ x }}
           </li>
         </ul>
       </div>   
      
   </body>
</html>

Output:

Angular JS Application
Use of Looping concept with ng-repeat directive :

.10
.20
.30
.40
.50

----------------  OR  ----------------

<html>
   <head>
      <title>AngularJS Basic Program Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   
   <body>
      <h1>Angular JS Application</h1>
      
      <div ng-app="" ng-init="values=[10,20,30,40,50]">
         <p>Use of Looping concept with ng-repeat directive :</p>
         
           <div ng-repeat="x in values">
             {{ x }}
           </div>
         
      </div>   
      
   </body>
</html>

Output:

Angular JS Application
Use of Looping concept with ng-repeat directive :

10
20
30
40
50

----------------  OR  ----------------

<html>
   <head>
      <title>AngularJS Basic Program Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   
   <body>
      <h1>Angular JS Application</h1>
      
      <div ng-app="" ng-init="values=[10,20,30,40,50]">
         <p>Use of Looping concept with ng-repeat directive :</p>

            <span ng-repeat="x in values">
             {{ x }}
            </span>                
   </body>
</html>

Output:

Angular JS Application
Use of Looping concept with ng-repeat directive :

10 20 30 40 50
Examples : A basic program of AJS Expressions to do Simple Arithmetic Operations.
<html>
   <head>
      <title>AngularJS Basic Program Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   
   <body>
      <h1>Angular JS Application</h1>
      
      <div ng-app="" ng-init="names=[
         {name:'A',city:'Patna'},
         {name:'B',city:'Gaya'},
         {name:'C',city:'Bhagalpur'},
         {name:'D',city:'Muzaffarpur'}]">

         <ul>
            <li ng-repeat="x in names">
               {{ x.name + ' : ' + x.city }}
            </li>
         </ul>
         
      </div>     
   </body>
</html>

Output:

Angular JS Application

A : Patna
B : Gaya
C : Bhagalpur
D : Muzaffarpur

----------------  OR  ----------------

<html>
   <head>
      <title>AngularJS Basic Program Example</title>
   </head>
   
   <body>
      <h1>Angular JS Application</h1>
      
      <div ng-app = "" ng-init = "qty = 10; costpr = 251; 
         user = {firstname:'Robert', lastname:'Ganopy', id:111};
         marksobt = [80,90,75,73,60]">

         <p>Hello My Name is : {{user.firstname + " " + user.lastname}}.</p>
         <p>Total Expense on buying ten Books is Rs : {{costpr * qty}}.00</p>
         <p>My Roll No is : {{user.id}}</p>
         <p>Marks Obtained in (Math) is : {{marksobt[2]}}</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

Output:

Angular JS Application
Hello My Name is : Robert Ganopy.

Total Expense on buying ten Books is Rs : 2510.00

My Roll No is : 111

Marks Obtained in (Math) is : 75
Examples : A basic program of Internal(codes in the same program)AJS Controllers.

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

      <script>  
         var app1 = angular.module('myApp', []);

         app1.controller('controller1', function($scope) {  
            $scope.firstName = "Coders";  
            $scope.lastName = "Helpline"; 

            $scope.fullName = function() {  
               return $scope.firstName + " " + $scope.lastName;  
            };  
         });  
      </script>  
   
   </body>  
</html>
Examples : A basic program of External(codes in separate file/program)AJS Controllers.

Run this file and Save as : First.html


<!DOCTYPE html>  
<html>  
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
   <body>  
      <div ng-app="myApp" ng-controller="controller1">  
      First Name is : <input type="text" ng-model="firstName"><br>  
      Last Name is : <input type="text" ng-model="lastName"><br>  
      <br>

      Full Name is : {{firstName + " " + lastName}}  
      </div>  
      <script src="externalajs.js"></script>  
   </body>  
</html>  

-----------------  AND  -----------------

Another file in same folder save as : externalajs.js

angular.module('myApp', []).controller('controller1', function($scope) {  
   
   $scope.firstName = "Coders",  
   $scope.lastName = "Helpline",
  
   $scope.fullName = function() {  
       return $scope.firstName + " " + $scope.lastName;  
   }  
});
Examples : A basic program to calculate Simple Interest using AJS Directives and Expressions.

Directives Examples in AJS : Coders Helpline

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>
        <div ng-app="">
            <table cellpadding="3px" align="center" style="border:2px solid green;padding:10px;border-radius:15px;">
                <tr>
                    <th colspan="2">Simple Interest Calculator</th>
                </tr>
                <tr>
                    <td>Principle Value</td>
                    <td><input type="text" ng-model="pv"></td>
                </tr>
                <tr>
                    <td>Rate Value</td>
                    <td><input type="text" ng-model="rv"></td>
                </tr>
                <tr>
                    <td>Time Value</td>
                    <td><input type="text" ng-model="tv"></td>
                </tr>
                <tr>
                    <td>Simple Interest</td>
                    <td><h3>{{((pv*rv*tv)/100)}}</h3></td>
                </tr>
            </table>
        </div>

    </body>
</html>
Examples : A basic program of Counter on Click event (Non-Parameterized) with AJS Directives, Expressions only,.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body ng-app="">
        <p>Click the button many times:</p>
        <button ng-click="count = count + 1" ng-init="count=0">Counter</button>

        <h3>Button Clicked {{count}} Times.</h3>    
    </body>
</html>
Examples : A basic program of Counter on Click event (Non-Parameterized) using AJS Modules, Directives, Expressions, and Controllers.

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

        <div ng-controller="controller1">
            <p>Function call on Click event:</p>
            <button ng-click="Counter()">Click Me</button>
            <p><b>The button has been clicked {{x}} times.</b></p>
        </div>

        <script>
            angular.module('App1', [])
            .controller('controller1', ['$scope', function($scope) {
                $scope.x = 0;
                $scope.Counter = function() {
                $scope.x++;
                };
            }]);
        </script>
    </body>
</html>

-----------------  OR  ---------------------

<!DOCTYPE html>

<html>
    <head>
        <title>AngularJs Click Event Function Example</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

        <script type="text/javascript">

            var module1 = angular.module('App1', []);

            module1.controller('Controller1', function ($scope) {
            $scope.result = 0;

            $scope.count = function () {
            $scope.result = $scope.result + 1;
            }
            });          
        </script>
    </head>

    <body>
        <div ng-app="App1" ng-controller="Controller1">
            <h2>AngularJs Click Event Function Example</h2>

            <input type="button" style="cursor:pointer" value="Counter" ng-click ="count()"/>
            <br /><br />

            <span style="color:Red"><B>Number of Times Button Clicked: {{result}}</B></span>
        </div>    
    </body>

</html>
Examples : A basic program of Counter on Click event (Parameterized) using AJS Modules, Directives, Expressions, and Controllers.
<!DOCTYPE html>

<html>
    <head>
        <title>AngularJs Click Event Function Example</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

        <script type="text/javascript">

            var module1 = angular.module('App1', []);

            module1.controller('Controller1', function ($scope) {
            
            $scope.msg = function (x) {
            $scope.result = x;
            }
            });          
        </script>
    </head>

    <body>
        <div ng-app="App1" ng-controller="Controller1">
            <h2>AngularJs Click Event Function Example</h2>

            <input type="button" style="cursor:pointer" value="Message Show" ng-click ="msg('Your site is CodersHelpline')"/>
            <br /><br />

            <span style="color:Red"><B>The Message is : {{result}}</B></span>
        </div>    
    </body>

</html>

Loading

Categories: AJS

0 Comments

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

AJS

Routing in AJS

Introduction of Routing in AJS The concept of Routing in AJS is done using ngRoute module helps us to navigate to different pages in our application, but remaining with SPA (Single Page Application), with no Read more…

AJS

Animations in AJS

Introduction of Animations in AJS Animations in AJS can breathe life into our web application by adding fluidity and visual appeal to various components. AngularJS animations are defined using CSS classes and JavaScript code. We Read more…

AJS

Forms in AJS

Introduction of Forms in AJS These are just some of the basic features of forms in AngularJS. Definition of Forms in AJS In AngularJS, forms are an essential part of building interactive web applications. AngularJS Read more…