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.
Examples : A basic program of Directives Examples in AJS.
<html>
   <head>
      <title>Angular JavaScript Directives Examples</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 directives :</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 directives :

.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 directives :</p>
         
           <div ng-repeat="x in values">
             {{ x }}
           </div>
         
      </div>   
      
   </body>
</html>

Output:

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

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 directives :</p>

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

Output:

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

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

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…

AJS

Filters in AJS

Introduction of Filters in AJS  Filters in AJS enable us to apply common formatting tasks with minimal effort, improving code readability and maintainability. Definition of Filters in AJS Angular filters are a powerful feature that Read more…

AJS

Expressions and Controllers in AJS

Expressions and Controllers in AJS (A) Expressions in AJS Link for AJS Expressions Program Examples AngularJS expressions are pure JavaScript expressions and output the data where they are used. Expressions in AJS are meant to Read more…