User Name:


User Email:




This information will only be saved for the purposes of communicating with those who have provided this information voluntarily regarding our services.We will never sell your name or email address to anyone.
© 2018 - First Crazy Developer (Abhishek Kumar)
  

crazydeveloper AngularJS Interview Question

Q1: Directives can be applied to which all element type?
Ans: Following represents the element type and directive declaration style:
`E` – Element name: ``
`A` – Attribute (default): `

`
`C` – Class: `
`

`M` – Comment: ``
Q2. What is notion of “isolate” scope object when creating a custom directive? How is it different from the normal scope object?
Ans: When creating a custom directive, there is a property called as “scope” which can be assigned different values such as true/false or {}. When assigned with the value “{}”, then a new “isolate” scope is created. The ‘isolate’ scope differs from normal scope in that it does not prototypically inherit from the parent scope. This is useful when creating reusable components, which should not accidentally read or modify data in the parent scope.
Q3. What are different return types from compile function?
Ans: A compile function can have a return value which can be either a function or an object.
⦁    A (post-link) function: It is equivalent to registering the linking function via the `link` property of the config object when the compile function is empty.
⦁    An object with function(s) registered via `pre` and `post` properties. It allows you to control when a linking function should be called during the linking phase.
Q4. WHich API need to be invoked on the rootScope service to get the child scopes?
Ans: $new
Q5. Explain the relationship between scope.$apply & scope.$digest?
Ans: As an event such as text change in a textfield happens, the event is caught with an eventhandler which then invokes $apply method on the scope object. The $apply method in turn evaluates the expression and finally invokes $digest method on the scope object. Following code does it all:
$apply: function(expr) {
        try {
          beginPhase('$apply');
          return this.$eval(expr);
        } catch (e) {
          $exceptionHandler(e);
        } finally {
          clearPhase();
          try {
            $rootScope.$digest();
          } catch (e) {
            $exceptionHandler(e);
            throw e;
          }
        }
}
Q6. Which angular module is loaded by default?
Ans: ng
Q7. What angular function is used to manually start an application?
Ans: angular.bootstrap
Q8. Name some of the methods that could be called on a module instance? For example, say, you instantiated a module such as ‘var helloApp = angular.module( “helloApp”, [] );’. What are different methods that could be called on helloApp instance?
Ans: Following are some of the methods:
⦁    controller
⦁    factory
⦁    directive
⦁    filter
⦁    constant
⦁    service
⦁    provider
⦁    config
Q9. Which angular function is used to wrap a raw DOM element or HTML string as a jQuery element?
Ans: angular.element; If jQuery is available, `angular.element` is an alias for the jQuery function. If jQuery is not available, `angular.element` delegates to Angular’s built-in subset of jQuery, called “jQuery lite” or “jqLite.”
Q10. Write sample code representing an injector that could be used to kick off your application?
var $injector = angular.injector(['ng', 'appName']);
$injector.invoke(function($rootScope, $compile, $document){
    $compile($document)($rootScope);
    $rootScope.$digest();
});
Question:Describe what happens when Angular compiler comes across “ng-controller” directive?
Ans: As the Angular compiles the HTML and come across the “ng-controller” directive (e.g.,), it asks the injector to create an instance of controller and its dependencies. Injector then looks out for any mechanism that has been specified by the user for creating the controller. In order to specify how the controller (HelloCtrl in current example) needs to be instantiated, we define the controller in one of the following manner:
function HelloCtrl($scope) {
...the controller code goes here...
}
Following is another (recommended) way to instantiate the controller:
var helloApp = angular.module( "helloApp", [] );
helloApp.controller( "HelloCtrl", ['$scope', function( $scope ){
...the controller code goes here...
}]);
Thus, the injector uses one of the above mechanism to instantiate the controller.
Question:Describe what happens when Angular compiler comes across “ng-app” directive?
Ans: As Angular compiler comes across the “ng-app” directive, it looks out for the mechanism used by the user to instantiate the module. If not found, it instantiates the app with default module, “ng”. In case, it finds the following instantiation mechanism, it uses below to intantiate the application. Note that following is preferred way of loading an app along with other module dependencies.
var helloApp = angular.module( "helloApp", [] );
Question:What are various different ways of annotating the services/objects that injector uses to resolve the dependency?
Ans: Following are three different ways for annotating the code with the services information:
⦁    Implicitly from the function parameter names such as that demonstrated in following example. The function parameter names are the names of dependencies.
function MyController($scope, greeter) {
  // ...
}
⦁    Using the $inject property annotation. In the example below, the ordering of the values in the $inject array must match the ordering of the arguments to inject.
var MyController = function(renamed$scope, renamedGreeter) {
  ...
}
MyController['$inject'] = ['$scope', 'greeter'];
⦁    Using the inline array annotation. This is the recommended approach. In below, an array is passed to the controller function. In this array, elements consists of a list of strings (such as ‘$scope’, ‘greeter’ ) followed by function.
helloApp.controller( "HelloCtrl", ['$scope', 'greeter', function( $scope, greeter ) {
  ...
}]);
Question:Write the code representing Controller construction and representing dependency injection using inline array annotation?
Ans: Following code represents defining controller constructor while providing annotations for dependency services (depService in example below) using inline array:
helloApp.controller( "HelloCtrl", ['$scope', 'depService', function( $scope, depService ) {
  ...
}]);
Question:Write the code representing service construction recipe and representing dependency injection using inline array annotation?
Ans: Following code represents defining service constructor while providing annotations for dependency services (depService in example below) using inline array:
helloApp.factory( "serviceName", [ 'depService', function( depService ) {
  ...
}]);
Question:Write the code representing factory method for creating a custom directive while using inline array annotation for dependency injection?
Ans: Following code represents creation of custom directive while providing annotations for dependency services (depService) using inline array:
helloApp.directive('directiveName', ['depService', function(depService) {
    ...
  }])
Question:Write code representing run method that accepts a function which can be injected with services/values/constants components?
Ans: The run method accepts a function, which can be injected with “service”, “value” and “constant” components as dependencies. Following is the code sample assuming helloApp is the app name:
var helloApp = angular.module( "helloApp", [] );
helloApp.run(['depService', function(depService){
    ...
  }])
Question: Write code representing config method that accepts a function which can be injected with provider and constant components?
Ans: The config method accepts a function, which can be injected with “provider” and “constant” components as dependencies. Following is the code sample assuming helloApp is the app name:
var helloApp = angular.module( "helloApp", [] );
helloApp.config(['depProvider', function(depProvider){
    ...
  }])
Question:Which components type can not be injected into “run” method?
Ans: “provider” types can not be injected into “run” method.
Question:Which components type can not be injected into “config” method?
Ans: “service” and “value” component types can not be injected into “config” method.
Question:Can ‘$scope’ be injected while creating service using “factory” method?
Ans: No.


  Please feel free to suggest/comment if you disagree with any of the answers below.
⦁    Can the angular application be initialized on only HTML element or ANY element?
Ans: ANY element
⦁    Can an HTML page have multiple “ng-app” directive for bootstrapping multiple AngularJS application?
Ans: Yes
⦁    With more than one ng-app in an HTML document (an HTML page), are they automatically initialized? Describe the angularJS application initialization process with multiple ng-app in an HTML document/page.
Ans: Only one AngularJS application can be auto-bootstrapped. The first ‘ng-app’ found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document, one must manually bootstrap them using angular bootstrap service.
⦁    Describe the steps involved in bootstrapping an angular application?
Ans: Following steps are involved in bootstrapping the angular application:
⦁    Determine the element consisting of ng prefixes with “app”
⦁    Check whethar an angular app already exists on the element
⦁    Compile & link with the help of dependencies such as rootScope injected (used for linking).
⦁    Can angular applications (ng-app) be nested within each other?
Ans: No
⦁    What are various possible prefixes such as “ng-” using which Angular directives (for example, ng-app) can be defined?
Ans: “ng-“, “data-ng-“, “ng:”, “x-ng-“
⦁    What are various possible ways in which angular application can be initialized?
Ans: On an element, one could either put simply the attribute such as (ng-app, data-ng-app, ng:app, x-ng-app) or put the named attribute such as (ng-app=”demoApp”).
⦁    What angular function is used to manually start up an angular application?
Ans: angular.bootstrap
⦁    Can multiple angular applications be bootstrapped using same element?
Ans: No. An error is thrown such as “App Already Bootstrapped with this Element”
⦁    At framework level, how does Angular retrieve the matching elements for processing?
Ans: Makes use of jqLite(element) function. If jQuery is used, jQuery(element) is used by way of assigning jQuery to jqLite variable.>


crazydeveloper Home Page 27 April 2015

Become a Fan