List of AngularJS Directives

The following is the list of most commonly used AngularJS directives with their examples.

The examples of above codes are as follow:

Ng-app

It can be used with body tag or div tag to define the module.
1. <body ng-app="myapp" ng-controller="ctrl">
Ng-Bind

Example:

Ng-bind-template

Example:
1. <div ng-app="myApp" ng-bind-template="{{firstName}} {{lastName}}" ng-controller="myCtrl"></div>
3. <script>
4. var app = angular.module("myApp", []);
5. app.controller("myCtrl", function($scope) {
6. $scope.firstName = "Nikhil";
7. $scope.lastName = "kAPOOR";
8. });
9. </script>
Ng-change
1. <body ng-app="myApp">
2. <div ng-controller="myCtrl">
3. <input type="text" ng-change="myFunc()" ng-model="myValue" />
4. </div>
6. <script>
7. angular.module('myApp', [])
8. .controller('myCtrl', ['$scope', function($scope) {
9. $scope.myFunc = function() {
10. alert($scope.myValue);
11. };
12. • }]);
13. </script>
14. </body>
Ng-checked/Ng-required
1. <input type="checkbox" ng-checked=true ng-required>Uncheck Me!</input>
Ng-Class

Ng-controller
1. <body ng-app="myapp" ng-controller="ctrl">
Ng-disabled
1. <input type="button" ng-change="myFunc()" ng-disabled="true" />
Ng-include
1. <div ng-include="'myFile.htm'"></div>
Ng-init
1. <div ng-init="firstName='nikhil'">
2. {{firstname}}
3. </div>
Ng-if /Ng-model
1. Show Text <input type="checkbox" ng-model="showtext" ng-init="showtext= true">
3. <div ng-if="showtext">
4. <h1>Welcome</h1>
5. </div>
Ng-repeat
1. <tr ng-repeat="x in name ">
2. <td>
3. {{x}}
4. </td>
5. </tr>
Ng-hide/Show
1. <div ng-app="">
3. <p ng-show="true">I am visible.</p>
5. <p ng-show="false">I am not visible.</p>
7. </div>
Ng-src
1. <img ng-src="img.png"></img>
Ng-switch
1. <select ng-model="myVar">
2. <option value="1">1
3. <option value="2">2
4. </select>
6. <div ng-switch="myVar">
7. <div ng-switch-when="1">
8. <h1>1</h1>
9. </div>
10. <div ng-switch-when="2">
11. <h1>2</h1>
13. </div>
Ng-minlength/Ng-Maxlength
1. <input type="text" name="name" ng-minlength=0 ng-maxlength=5 />
Ng-options
1. <select ng-model="selectedName" ng-options="item for item in names"></select>
Thanks for reading the article, Happy Coding !!