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:
    1. <body ng-app="myapp" ng-controller="ctrl">
    2. {{studentname}}
    4. <script>
    5. angular.module('myapp', []).controller('ctrl', function ($scope) {
    6. $scope.studentname = "Nikhil";
    7. });
    8. </script>
    9. </body>
  • 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
    1. <style>
    2. .world {
    3. background-color: lightblue;
    4. }
    6. .earth {
    7. background-color: coral;
    8. }
    9. </style>
    10. <body ng-app="">
    11. <select ng-model="home">
    12. <option value="world">Blue</option>
    13. <option value="earth">Orange</option>
    14. </select>
    16. <div ng-class="home">
    17. <h1>Choose from option to change color</h1>
    18. <p></p>
    19. </div>
  • Ng-cloak
    1. <body ng-app="" ng-cloak>
  • Ng-click
    1. <body ng-app="myApp">
    2. <div ng-controller="myCtrl">
    3. <input type="button" ng-change="myFunc()"/>
    4. </div>
    5. <script>
    6. angular.module('myApp', [])
    7. .controller('myCtrl', ['$scope', function($scope) {
    8. $scope.myFunc = function() {
    9. alert(“Function Called”);
    10. };
    11. }]);
    12. </script>
  • 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 !!