AngularJS Directives

AngularJS / AngularJS Directives

AngularJS Directives are HTML attributes with an ng prefix.

Directive	Details
ng-app	Defines AngularJS application
ng-controller	Defines the controller which control AngularJS applications.
ng-model	Binds input field value to the application variable name.
ng-bind	Binds application data to the HTML view.
ng-init	Used to initializes AngularJS application variables.
ng-repeat	Repeats an HTML element

ng-app Directive defines AngularJS application.

Program Name

Write a AngularJS program for ng-app Directive.

Theory
ng-app Directive defines AngularJS application.

Program Code


<html>
<head>
<title>Hello World AngularJS Application</title>
</head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
         
<body>
<h1>Hello World AngularJS Application</h1>      
<div ng-app = "app9">
Enter a Name: <input type = "text" ng-model = "name"><br /><br />
Hello <span ng-bind = "name"></span><br /><br />
Hello <p ng-bind = "name"></p><br /><br />
Hello {{name}}
</div>  
</body>
</html>

Input

wisdom materials

Output

ng-init Directive is Used to initializes AngularJS application variables.

Program Name

Write a AngularJS program for ng-init Directive.

Theory
ng-init Used to initializes AngularJS application variables.

Program Code

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
<h1>AngularJS ng-init Directive </h1>      

<div ng-app="" ng-init="Name='wisdom materials'">
ng-init Directive: <span ng-bind="Name"></span>
</div>

Input

wisdom materials

Output

AngularJS Expressions

AngularJS Expressions written inside	{{ expression }} / : ng-bind="expression"
Example	{{ 2 + 3 }}

AngularJS Expressions are used for calculations

Program Name

Write a AngularJS program for AngularJS Expressions.

Theory
AngularJS Expressions are used for calculations.

Program Code


<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
AngularJS expressions<br />     

<div ng-app="">
2+3 = {{ 2 +3 }}
</div>

Input

wisdom materials

Output

AngularJS expressions
2+3=5

Example 2

Program Name

Write a AngularJS program for AngularJS Expressions.

Theory
AngularJS Expressions are used for calculations.

Program Code


<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<h1>AngularJS expressions </h1>      

<div ng-app="">
Name: <input type="text" ng-model="name"><br /><br />
Entered Name = {{name}}
</div>

Input

wisdom materials

Output

ng-model Directive binds input field value to the application variable name.

Addition of Two Numbers Program in AngularJS

Program Name

Write a Addition of Two Numbers Program in AngularJS.

Theory
Addition of Two Numbers Program in AngularJS

Program Code


<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>

<div ng-app="">
<b>Addition of Two Numbers Program in AngularJS</b><br /><br />
First Number:<input type="number" ng-model="a" /><br /><br />
Second Number:<input type="number" ng-model="b" /><br /><br />
Sum: {{ a + b }}
</div><br /><br /><br /><br />

Input

wisdom materials

Output

Addition of Two Numbers Program in AngularJS

Program Name

Write a Addition of Two Numbers Program in AngularJS.

Theory
Addition of Two Numbers Program in AngularJS

Program Code


<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
<b>Addition of Two Numbers Program in AngularJS</b><br /><br />
First Number:<input type="number" ng-model="n1" /><br /><br />
Second Number:<input type="number" ng-model="n2" /><br /><br />
Sum: {{ n1+n2 }}
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.n1 = 1;
        $scope.n2 = 2;
    });
</script>

Input

wisdom materials

Output

Addition of Two Numbers Program in AngularJS

Program Name

Write a Addition of Two Numbers Program in AngularJS.

Theory
Addition of Two Numbers Program in AngularJS

Program Code


<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>

<div ng-app="myApp" ng-controller="myCtrl">
<b>Addition of Two Numbers Program in AngularJS</b><br /><br />
First Number:<input type="text" ng-model="n1" /><br /><br />
Second Number:<input type="text" ng-model="n2" /><br /><br />
Sum: {{ n1+n2 }}
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.n1 = "1";
        $scope.n2 = "2";
    });
</script>

Input

wisdom materials

Output

Example color

Program Name

Write a color Program in AngularJS.

Theory
color Program in AngularJS

Program Code


<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>

<div ng-app="" ng-init="mycolor='yellow'">
<input style="background-color:{{mycolor}}" ng-model="mycolor">
</div>

Input

wisdom materials

Output

Addition of Two Numbers Program in AngularJS =Data Binding

Program Name

Write a Addition of Two Numbers Program in AngularJS.

Theory
color Program in AngularJS

Program Code


<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<div ng-app="" ng-init="n1=4;n2=5">
sum=n1*n2= {{ n1 * n2 }}
here n1=4 and n2=5
</div>

Input

n1=4 and n2=5

Output

sum=n1*n2= 20

Addition of texts Program in AngularJS

Program Name

Write a Addition of texts Program in AngularJS

Theory
Addition of texts Program in AngularJS

Program Code


<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>

<div ng-app="" ng-init="firstName='wisdom';lastName='materials'">
combined text = {{ firstName + " " + lastName }}
</div>

Input

wisdom materials

Output

combined text = wisdom materials

Home Back