Question:Can you define multiple restrict options on a directive?
You can also specify multiple restrict options to support more than one methods of directive invocation as an element or an attribute. Make sure all are specified in the restrict keyword as: restrict: 'EA'
Question:What is auto bootstrap process in AngularJS? OR How AngularJS is initialized automatically?
Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is downloaded to the browser and the document.readyState is set to complete. At this point AngularJS looks for the ng-app directive which is the root of angular app compilation and tells about AngularJS part within DOM. When the ng-app directive is found then Angular will:
1. Load the module associated with the directive.
2. Create the application injector.
3. Compile the DOM starting from the ng-app root element.
This process is called auto-bootstrapping.
Example <html>
<body ng-app="myApp">
<div ng-controller="Ctrl"> Hello {{msg}}! </div>
<script src="lib/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl', function ($scope) { $scope.msg = 'World'; });
</script>
/body>
</html>Question:What directives are used to show and hide HTML elements in AngularJS?
ng-show and ng-hide directives are used to show and hide HTML elements in the AngularJS based on an expression. When the expression is true for ng-show or ng-hide, HTML element(s) are shown or hidden from the page. When the expression is false for ng-show or ng-hide, HTML element(s) are hidden or shown on the page.<div ng-controller="MyCtrl"> <div ng-show="data.isShow">ng-show Visible</div> <div ng-hide="data.isHide">ng-hide Invisible</div> </div><script> var app = angular.module("app", []); app.controller("MyCtrl", function ($scope) { $scope.data = {}; $scope.data.isShow = true; $scope.data.isHide = true; }); </script>
Question:Explain directives ng-if, ng-switch and ng-repeat?
ng-if – This directive can add / remove HTML elements from the DOM based on an expression. If the expression is true, it add HTML elements to DOM, otherwise HTML elements are removed from the DOM.<div ng-controller="MyCtrl"> <div ng-if="data.isVisible">ng-if Visible</div> </div> <script> var app = angular.module("app", []); app.controller("MyCtrl", function ($scope) { $scope.data = {}; $scope.data.isVisible = true; }); </script>ng-switch – This directive can add / remove HTML elements from the DOM conditionally based on scope expression.<div ng-controller="MyCtrl"> <div ng-switch on="data.case"> <div ng-switch-when="1">Shown when case is 1</div> <div ng-switch-when="2">Shown when case is 2</div> <div ng-switch-default>Shown when case is anything else than 1 and 2</div> </div> </div> <script> var app = angular.module("app", []); app.controller("MyCtrl", function ($scope) { $scope.data = {}; $scope.data.case = true; }); </script>ng-repeat - This directive is used to iterate over a collection of items and generate HTML from it.<div ng-controller="MyCtrl"> <ul> <li ng-repeat="name in names"> {{ name }} </li> </ul> </div> <script> var app = angular.module("app", []); app.controller("MyCtrl", function ($scope) { $scope.names = ['Shailendra', 'Deepak', 'Kamal']; }); </script>
Question:What are ng-repeat special variables?
The ng-repeat directive has a set of special variables which you are useful while iterating the collection. These variables are as follows:
- $index
- $first
- $middle
- $last<html>
<head>
<script src="lib/angular.js"></script>
<script>
var app = angular.module("app", []);
app.controller("ctrl", function ($scope) {
$scope.friends = [
{ name: 'shailendra', gender: 'boy' },
{ name: 'kiran', gender: 'girl' },
{ name: 'deepak', gender: 'boy' },
{ name: 'pooja', gender: 'girl' }
];
});
</script>
</head>
<body ng-app="app">
<div ng-controller="ctrl">
ul class="example-animate-container">
<li ng-repeat="friend in friends">
[{{$index + 1}}] {{friend.name}} is a {{friend.gender}}.
<span ng-if="$first">
(first element found) </span>
<span ng-if="$middle"> (middle element found) </span>
<span ng-if="$last"> (last element found) </span> </li>
</ul>
</div>
</body>
</html>
The $index contains the index of the element being iterated. The $first, $middle and $last returns a boolean value depending on whether the current item is the first, middle or last element in the collection being iterated.