Categories: Interview questionsJavascript

AngularJS Interview Questions – Set 4

ATG interview questions

The article represents another set of 10 interview questions primarily related with dependency injection. Following are another set of questions that have already been published earlier.

Question Set

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.,<body ng-controller=”HelloCtrl”>), 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.

Feel free to suggest/comment on above interview questions. Watch out this space for more questions’ sets.

Author
Recent Posts

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin.
Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

View Comments

Jose Manuel Jimenez says:

August 4, 2014 at 3:58 pm

Great set of questions. Maybe in your last example:

var helloApp = angular.module( "helloApp", [] );
helloApp.config(['depProvider', function(depProvider){
...
}])

It may worth mentioning that the injected service's name is 'dep':

angular.module("helloApp").provider('dep', function() { ... });
- Ajitesh Kumar says:
  
  August 4, 2014 at 8:32 pm
  
  Thanks Jose for your comment.