Friday, 20 July 2018

AngularJS Directives

AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.
AngularJS extends HTML with ng-directives.
The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-bind directive binds application data to the HTML view.

AngularJS Example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">

<p>Enter your Age:</p>
<p>Age: <input type="text" ng-model="ag"></p>
<p ng-bind="ag"></p>

</div>

</body>
</html>
Notes:
The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.
The ng-model directive binds the value of the input field to the application variable ag.
The ng-bind directive binds the content of the <p> element to the application variable ag.

Using Initialization
The ng-init directive initializes AngularJS application variables.

Example:
<!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="age=25">

<p>The age is <span ng-bind="age"></span></p>
</div>
</body>
</html>
Output:
The age is 25

Note:
You can use data-ng-, instead of ng-, if you want to make your page HTML valid.

Example:
<!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="age=25">
<p>The age is <span data-ng-bind="age"></span></p>
</div>
</body>
</html>
Output:
The age is 25


1 comment:

  1. Python is an open-source, high level, interpreted programming language which offers great opportunities for object-oriented programming. Choosing a python training program from Red Prism Group, which is best training institute for python in noida.

    ReplyDelete

Global Infrastructure and its components in AWS

You may operate your workloads wherever and however you choose with the AWS Global Infrastructure, and you'll use the same network, cont...