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.
- <body ng-app="myapp" ng-controller="ctrl">
- Ng-Bind
Example:
- <body ng-app="myapp" ng-controller="ctrl">
- {{studentname}}
-
- <script>
- angular.module('myapp', []).controller('ctrl', function ($scope) {
- $scope.studentname = "Nikhil";
- });
- </script>
- </body>
- Ng-bind-template
Example:
- <div ng-app="myApp" ng-bind-template="{{firstName}} {{lastName}}" ng-controller="myCtrl"></div>
-
- <script>
- var app = angular.module("myApp", []);
- app.controller("myCtrl", function($scope) {
- $scope.firstName = "Nikhil";
- $scope.lastName = "kAPOOR";
- });
- </script>
- Ng-change
- <body ng-app="myApp">
- <div ng-controller="myCtrl">
- <input type="text" ng-change="myFunc()" ng-model="myValue" />
- </div>
-
- <script>
- angular.module('myApp', [])
- .controller('myCtrl', ['$scope', function($scope) {
- $scope.myFunc = function() {
- alert($scope.myValue);
- };
- • }]);
- </script>
- </body>
- Ng-checked/Ng-required
- <input type="checkbox" ng-checked=true ng-required>Uncheck Me!</input>
- Ng-Class
- <style>
- .world {
- background-color: lightblue;
- }
-
- .earth {
- background-color: coral;
- }
- </style>
- <body ng-app="">
- <select ng-model="home">
- <option value="world">Blue</option>
- <option value="earth">Orange</option>
- </select>
-
- <div ng-class="home">
- <h1>Choose from option to change color</h1>
- <p></p>
- </div>
- Ng-cloak
- <body ng-app="" ng-cloak>
- Ng-click
- <body ng-app="myApp">
- <div ng-controller="myCtrl">
- <input type="button" ng-change="myFunc()"/>
- </div>
- <script>
- angular.module('myApp', [])
- .controller('myCtrl', ['$scope', function($scope) {
- $scope.myFunc = function() {
- alert(“Function Called”);
- };
- }]);
- </script>
- Ng-controller
- <body ng-app="myapp" ng-controller="ctrl">
- Ng-disabled
- <input type="button" ng-change="myFunc()" ng-disabled="true" />
- Ng-include
- <div ng-include="'myFile.htm'"></div>
- Ng-init
- <div ng-init="firstName='nikhil'">
- {{firstname}}
- </div>
- Ng-if /Ng-model
- Show Text <input type="checkbox" ng-model="showtext" ng-init="showtext= true">
-
- <div ng-if="showtext">
- <h1>Welcome</h1>
- </div>
- Ng-repeat
- <tr ng-repeat="x in name ">
- <td>
- {{x}}
- </td>
- </tr>
- Ng-hide/Show
- <div ng-app="">
-
- <p ng-show="true">I am visible.</p>
-
- <p ng-show="false">I am not visible.</p>
-
- </div>
- Ng-src
- <img ng-src="img.png"></img>
- Ng-switch
- <select ng-model="myVar">
- <option value="1">1
- <option value="2">2
- </select>
-
- <div ng-switch="myVar">
- <div ng-switch-when="1">
- <h1>1</h1>
- </div>
- <div ng-switch-when="2">
- <h1>2</h1>
-
- </div>
- Ng-minlength/Ng-Maxlength
- <input type="text" name="name" ng-minlength=0 ng-maxlength=5 />
- Ng-options
- <select ng-model="selectedName" ng-options="item for item in names"></select>
Thanks for reading the article, Happy Coding !!