AngularJS Interview Questions Part 5

21. What is the use of routing AngularJS?

Answer:

Routing is a core feature in AngularJS which is useful in building SPA (Single Page Application) with multiple views.

Routing helps you to divide your application in logical views and binds them with different controllers.

The ngRoute module helps your application to become a Single Page Application.

Example:

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    <body ng-app="myApp">
    <a href="#!red">Red</a>
    <a href="#!green">Green</a>
    <a href="#!blue">Blue</a>
    <div ng-view></div>
    <script>
        var app = angular.module("myApp", ["ngRoute"]);
        app.config(function($routeProvider)
        {
            $routeProvider
            .when("/red", {
                templateUrl : "red.htm"
            })
            .when("/green", {
                templateUrl : "green.htm"
            })
            .when("/blue", {
                templateUrl : "blue.htm"
            });
        });
    </script>
    </body>
</html>


routing

22. What are the types of Linking function?

Answer:

There are two types of linking functions,

1. Pre-linking: This function is executed before the child elements are linked.  It is not considered as the safe way for DOM transformation.

2. Post linking: This function is executed after the child elements are linked. It is safe to do DOM transformation by post-linking function

23. What are the different types of Custom Directives in AngularJS?

Answer:

In AngularJS, custom directives are used in AngularJS to extend the functionality of HTML. These directives are defined using 'directive' function.

There are four different kinds of custom directives,

1. Element directives (E)
2. Attribute directives (A)
3. CSS class directives ©
4. Comment directives (M)

Element directive activates when a matching element is encountered.

Attribute directive activates when a matching attribute is encountered.

CSS directive activates when a matching CSS style is encountered.

Comment directive activates when a matching comment is encountered.

Example:

<html>    
   <head>
      <title>Angular JS Custom Directives</title>
   </head>     
   <body>
      <h2>Custom Directive Example</h2>
       
      <div ng-app = "mainApp" ng-controller = "EmployeeController">
         <emp name = "Mangala"></emp><br/>
         <emp name = "Shruti"></emp>
      </div>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script>
         var mainApp = angular.module("mainApp", []);           
         mainApp.directive('emp', function() {
            var directive = {};
            directive.restrict = 'E';
            directive.template = "emp: <b>{{emp.name}}</b> , emp: <b>{{emp.empid}}</b>";              
            directive.scope = {
               emp : "=name"
            }              
            directive.compile = function(element, attributes) {
               element.css("border", "1px solid #cccccc");                 
               var linkFunction = function($scope, element, attributes) {
                  element.html("Employee: <b>"+$scope.emp.name +"</b> , Employee Id: <b>"+$scope.emp.empid+"</b><br/>");
                  element.css("background-color", "#ff00ff");
               }
               return linkFunction;
            }              
            return directive;
         });           
         mainApp.controller('EmployeeController', function($scope) {
            $scope.Mangala = {};
            $scope.Mangala.name = "Mangala";
            $scope.Mangala.empid  = 101;
            $scope.Shruti = {};
            $scope.Shruti.name = "Shruti";
            $scope.Shruti.empid  = 102;
         });
      </script>        
   </body>
</html>


custom directive

24. What do you know about singleton pattern?

Answer:

Singleton pattern is an approach that we adopt to limit the instantiation of a class to have only one object.

AngularJS services are always singletons which means that, once AngularJS constructs a service object, the same instance is reused throughout your app.

A service is a singleton. AngularJS instantiates the service object only once and all other components share the same instance.

25. What is the purpose of Angular prefixes $ and $$?

Answer:

AngularJS prefixes the names of public objects with $ and the names of private objects with $$.

The $ and $$ are used to prevent accidental name collisions within the code. Use of these literals ($ or $$) for any other reason is not recommended.