AngularJS

Question:What is $scope and $rootScope? 
Answer$scope - A $scope is a JavaScript object which is used for communication between controller and view. Basically, $scope binds a view (DOM element) to the model and functions defined in a controller.

$rootScope - The $rootScope is the top-most scope. An app can have only one $rootScope which will be shared among all the components of an app. Hence it acts like a global variable. All other $scopes are children of the $rootScope.

Report

Question:What directives are used to show and hide HTML elements in AngularJS? 
Answerng-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>

Report

Question:Explain directives ng-if, ng-switch and ng-repeat? 
Answerng-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>

Report

Question:What are ng-repeat special variables? 
AnswerThe 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.

Report

Question:What is data binding in AngularJS? 
AnswerAngularJS data-binding is the most useful feature which saves you from writing boilerplate code (i.e. the sections of code which is included in many places with little or no alteration). Now, developers are not responsible for manually manipulating the DOM elements and attributes to reflect model changes. AngularJS provides two-way data-binding to handle the synchronization of data between model and view.

Report

First Prev 5 6 7 8 9 Next Last