by Santhakumar Munuswamy
Posted on 31 December 2015
AngularJS
This article explains understand the Directives with a sample application and its usage of Directives discussion to here. In my previous article, we saw understanding the controller with an sample application. Here are the series of article written on AngularJS,
What is Directives?
Directives is a main feature in AngularJs. It can be used in element name, attributes, comment and as well as css class.
We can able to used in built-in directives and can able to create an own directives like custom directives.
Directive Type
We can able to implement the following types of directives in AngularJs
- Element directives
- Attribute directives
- CSS Class directives
- Comment directives
Angular is provide a couple of in-build directives on application stand point in the following
ng-App Directive
ng-apps directive is associated in the root element of the application. It is basically placed near the root element on the page like body or html tag
ng-Controller Directive
ng-controller directive is associated a controller class to the view
Angular is provide a few of in-build directives on binding stand point in the following
- ng-bind
- ng-model
- ng-init
- ng-src
- ng-style
ng-bind Directive
ng-bind attribute enable to replace the text value for the particular element with value and update the value in when the value has been changed
How to use ng-bind for the attribute
<Any
ng-bind=”expression”>
</Any>
How to use ng-bind for the CSS Class
<Any class=”ng-bind: expression;”> </Any>
ng-init Directive
ng-init directive enable to evaluate an expression in the current scope
How to use ng-init for the attribute
<Any
ng-init=”expression”>
</Any>
How to use ng-init for the CSS Class
<Any class=”ng-init: expression;”> </Any>
ng-model Directive
ng-model directive is bind an input fields to a property on the scope of the current controller
Angular is provide a few of in-build directives on operation stand point in the following
- ng-change
- ng-checked
- ng-click
- ng-href
- ng-selected
Step 1:
Open Visual Studio 2015 and go to file menu and point the new and then click new project. New ASP.NET project window will open, you can select a ASP.NET Web Application and Type Project Name AngularJsDirectivesDemo, Choose the project location path and then click OK button.
New ASP.NET project window will open, you can select a Empty Template with No Authentication and then click OK button.
Go to Solution Explorer and right click the project name and then click Manage NuGet Packages.
NuGet Package Manager window will open and you can type AngularJS and browse. Also selectAngularJS.Core and click Install button.
Preview window will open and you can see the AngularJS version installing details and click OK button. After it is successfully installed in AngularJS, you can see the following,
You can see AngularJsControllerDemo project structure as in the following screenshot.
Add SimpleDirectives.html
Go to Solution Explorer and right click the project name and point Add then click the HTML Page. You can type the item name SimpleDirectives.html and click OK button
Step 2: SimpleDirectives.html code here, ng-model, ng-bind and ng-init
- <!DOCTYPE html>
- <html>
- <head>
- <title> San2debug.net | AngularJs Controller Application Demo </title>
- <meta charset="utf-8" />
- <script src="Scripts/angular.min.js"></script>
- </head>
- <body>
- <h2>AngularJs Directive Application Demo</h2>
- <div ng-app="">
- First Name: <input type="text" ng-model="firstName" /><br /><br />
- Last Name: <input type="text" ng-model="lastName" /><br /><br />
- <hr />
- Welcome {{firstName}} {{lastName}}
- </div>
- </body>
- </html>
- <!DOCTYPE html>
- <html>
- <head>
- <title> San2debug.net | AngularJs Controller Application Demo </title>
- <meta charset="utf-8" />
- <script src="Scripts/angular.min.js"></script>
- </head>
- <body>
- <h2>AngularJs Directive "ng-init" Application Demo</h2>
- <div ng-app="" ng-init="firstName='Vishanth'">
- First Name: <input type="text" ng-model="firstName" /><br /><br />
- Last Name: <input type="text" ng-model="lastName" /><br /><br />
- <hr />
- Welcome <span ng-bind="firstName" ></span> {{lastName}} </div>
- </body>
- </html>
- <!DOCTYPE html>
- <html>
- <head>
- <title> San2debug.net | AngularJs Student Mark Sheet Demo </title>
- <meta charset="utf-8" />
- <script src="Scripts/angular.min.js"></script>
- </head>
- <body>
- <center>
- <h2>Student Mark Sheet</h2>
- <table ng-app="" width="500px" cellpadding="3" cellspacing="6" border="1">
- <tr>
- <td>Tamil:</td><td> <input type="number" ng-model="tamil" /><br /></td>
- </tr>
- <tr>
- <td>English:</td>
- <td> <input type="number" ng-model="english" /><br /></td>
- </tr>
- <tr>
- <td>Maths: </td>
- <td><input type="number" ng-model="maths" /><br /></td>
- </tr>
- <tr>
- <td>Science: </td>
- <td><input type="number" ng-model="science" /><br /></td>
- </tr>
- <tr>
- <td>Social Science</td>
- <td> <input type="number" ng-model="socialscience" /><br /></td>
- </tr>
- <tr>
- <td><strong>Total Marks</strong></td>
- <td> {{tamil + english + maths + science + socialscience }}</td>
- </tr>
-
- </table>
- </center>
- </body>
- </html>
Steps 3: AngularJS Controller Application demo output as in the following screenshot,
Conclusion:
This article helps you to understand the Directives with a sample application using Visual Studio 2015.Thank you for reading my articles. Kindly share your comments or suggestion