New AngularJS Experienced Interview Questions And Answers

New AngularJS Experienced Interview Questions And Answers

1. What are the services in AngularJS?
Answer: Services are objects that can be used to store and share data across the application. AngularJS offers many built-in services such as $https i.e. used to make XMLHttpRequest.

2. What is the Model View Controller (MVC)?
Answer:  MVC is a common design pattern used in developing software that consists of three parts: the model, view, and controller. The model is the lowest level of the pattern and is responsible for maintaining data. The view is the part of the application that is presented to the user. The controller is the code that governs all interactions between the model and the view.

3. Explain why there are two “destroy” events associated with the termination of scope in AngularJS?
Answer: The first $destroy is an AngularJS event associated with components like controllers or link functions. The second is actually a quite/jQuery event associated with the removal of a node, which may occur without a scope teardown.

4. AngularJS – How to use $routeParams in generating the templateUrl?
Answer:  I couldn’t find a way to inject and use the $routeParams service (which I would assume would be a better solution) I tried this thinking it might work:
angular.module(‘myApp’, []).
config(function ($routeProvider, $routeParams) {
$routeProvider.when(‘/:primary nav/:secondary nav’, {
templateUrl: ‘resources/angular/templates/nav/’+$routeParams.primaryNav+’/’+$routeParams.secondaryNav+’.html’

Which yielded this error: Unknown provider: $routeParams from myApp
If something like that isn’t possible you can change your templateUrl to point to a partial Html file that just has ng-include and then set the URL in your controller using $routeParams like this:

Skip code block
angular.module(‘myApp’, []).
config(function ($routeProvider) {
$routeProvider.when(‘/:primary nav/:secondary nav’, {
templateUrl: ‘resources/angular/templates/nav/urlRouter.html’,
controller: ‘RouteController’

function RouteController($scope, $routeParams) {
$scope.templateUrl= ‘resources/angular/templates/nav/’+$routeParams.primaryNav+’/’+$routeParams.secondaryNav+’.html’;

With this as your urlRouter.html5. In Angular Seed project, what is the point of index-async.html ?_text]Answer:
I don’t see an app/index.ajax.html. I’m assuming you mean app/index-async.html.
The two files are interchangeable, and you can use either one to build your application. index-async.html loads scripts asynchronously, which might give you a faster bootstrap time. index.htmlloads scripts synchronously, which is often a bit slower, but the intention is that the code is easier to understand for someone learning to use the framework.

6. Explain the role of $routeProvider in AngularJS?
Answer:  The $routeProvider is used to configure roots within an AngularJS application. It can be used to link a URL with a corresponding HTML page or template, and a controller (if applicable).  (Interview Questions and Answers)

7. How experienced are you with e2e testing? Explain how e2e testing of AngularJS applications works?
Answer:  End-to-end (e2e) testing is the practice of testing an application from start to finish to determine whether all the components are working together properly. If unit tests are the first line of defense against bugs within the individual components, e2e testing can be thought of as the safety net that catches issues related to integration and flows within an application. The AngularJS team built Protractor, a Node.js application that can simulate user interactions and help developers test the overall health of their AngularJS applications. It’s a good idea to ask an applicant about past experiences using Protractor to perform e2e testing on AngularJS applications. (AngularJs Training Online)

8. How to assign alternate class to rows in Angular JS?
Answer:
You should be using the angular directives ngClassEven and ngClassOdd for this.
Have a look at the documentation section for how to use them
HTTP://DOCS.ANGULARJS.ORG/API/NG.DIRECTIVE:NGCLASSEVEN
HTTP://DOCS.ANGULARJS.ORG/API/NG.DIRECTIVE:NGCLASSODD
Hope this helps.

9. AngularJS Provider?
Answer:  It is the parent of all the service types supported by AngularJS, except the “Constant” that we will discuss in the next section. It is the core of all the service types. Thus we can say that other services work on top of it. It allows us to create a configurable service that must implement the <$get> method. (Company)

We use this service to expose the API that is responsible for doing the application-wide configuration. The configuration should complete before starting the application.

Let’s take an example.

app.provider(‘authentication’, function() {
var username = “John”;
return {
set: function(newUserName) {
username = newUserName;

$get: function() {
function getUserName() {
return username;

return {
getUserName: getUserName

This example initializes a provider with its name as “authentication.” It also implements a <$get> function, which returns a method “getUsername” which in turn returns the private variable called username. This also has a setter, using it we can set the username on application startup as follows:

app.config([“authenticationProvider”, function(authenticationProvider) {
authenticationProvider.set(“Mihir”);

10. Is there a way to make AngularJS load partials in the beginning and not at when needed?
Answer:  Concatenate all templates into 1 big file. If using Visual Studio 2013, download Web essentials – it adds a right-click menu to create an HTML Bundle.
Add the code that this guy wrote to change the angular $templatecache service – it’s only a small piece of code and it works: Vojta Jina’s Gist
It’s $https.get that should be changed to use your bundle file:
allTplPromise = $https.get(‘templates/templateBundle.min.html’).then(
Your routes templateUrl should look like this:
$routeProvider.when(
“/about”, {
controller: “,
templateUrl: “about.html”

11. AngularJS dependency injection of value inside of the module.config?
Answer: The problem is that you are trying to inject a value object helpers in the config block of an AngularJS module and this is not allowed. You can only inject constants and providers in the config block.
The AngularJS documentation (section: “Module Loading & Dependencies”) gives the insight into this:
A module is a collection of configuration and runs blocks which get applied to the application during the bootstrap process. In its simplest form the module consists of a collection of two kinds of blocks:
Configuration blocks – get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.
Run blocks – get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.

12. Format Date time in Angular JS?
Answer: As the original string doesn’t include the “T” demarker, the default implementation in Angular doesn’t recognize it as a date. You can force it using new Date, but that is a bit of a pain on an array. Since you can pipe filters together, you might be able to use a filter to convert your input to a date and then apply the date: filter on the converted data. Create a new custom filter as follows:
app.
.filter(“state”, function () {
return function (input) {
return new Date(input);

Then in your markup, you can pipe the filters together:
{{item.myDateTimeString | state | date:’short date’}}

13. How to create angularjs filter which outputs HTML?
Answer: I think ng-class is directive you need for this job and is safer then rendering to the class attribute.
in your case just add object string with the id strings as the class and the value as the evaluated expression
‘icon-ok’:!phone.connectivity.infrared,
‘icon-remove’: phone.connectivity.infrared

on a side note, you should only use directives (built-in and custom) to manipulate Html/dom and if you needed a more complex HTML to render you should look at directive instead.

14. AngularJS – Access to child scope?
Answer: Scopes in AngularJS use prototypal inheritance when looking up a property in a child scope the interpreter will look up the prototype chain starting from the child and continue to the parents until it finds the property, not the other way around.
While the jam-‘s answer is the best way to handle this case, for future reference it is possible to access child scopes using a scope’s $childHead, $childTail, $nextSibling and $prevSibling members. These aren’t documented so they might change without notice, but they’re there if you really need to traverse scopes.
// get $childHeadfirst and then iterate that scope’s $nextSiblings
for(var cs = scope.$childHead; cs; cs = cs.$nextSibling) {
// cs is child scope

15. $routeParams doesn’t work in resolve function?
Answer: You need to use $route.current.params.key instead. The $routeParams is updated only after a route is changed. So your code should look along those lines:
NoteController.resolve = {
note: function($route, Note) {
return Note.get($route.current.params.key);

16. how to access the angular $scope variable in browsers console?
Answer:
Pick an element in the HTML panel of the developer tools and type this in the console
angular.element($0).scope()
In webkit $0 is a reference to the selected DOM node in the elements tab, so by doing this you get the selected DOM node scope printed out in the console
Addons/Extensions
There are some very useful Chrome Extensions that you might want to checkout:

Playing with JS Fiddle
When working with jsfiddle you can open the fiddle in show mode by adding /show at the end of the url. When running like this you have access to the angular global. You can try it here
https://jsfiddle.net/jaimem/Yatbt/show
jQuery Lite
If you load jQuery before angular, angular.element can be passed a jQuery selector. So you could inspect the scope of a controller with
angular.element(‘[ng-controller=ctrl]’).scope()
Of a button
angular.element(‘button:eq(1)’).scope()
… and so on.
You might actually want to use a global function to make it easier
window.SC = function(selector){
return angular.element(selector).scope();

Now you could do this
SC(‘button: eq(10)’)
SC(‘button:eq(10)’).row // -> value of scope.row
check here: https://jsfiddle.net/jaimem/DvRaR/1/show/

17. How to preventDefault on anchor tags?
Answer:
UPDATE: I’ve since changed my mind on this solution. After more development and time spent working on this, I believe a better solution to this problem is to do the following:
Click Here
And then update your css to have an extra rule:

cursor: pointer;

It’s much more simple and provides the exact same functionality and is much more efficient. Hope that might be helpful to anyone else looking up this solution in the future.

18. Difference between service, directive, and module?
Answer:  Think of a module as being a place to wire up a number of other things, such as directives, services, constants, etc. Modules can be injected into other modules giving you a high level of reuse.
When writing an angular app, you would have a top-level module which is your application code (sans templates)

services are mainly a way to communicate between controllers, but you can inject one service into another. services are often used as a way to get to your data stores and people will wrap the angular apps such as resource. This technique is useful since it makes testing (particularly mocking) quite easy. You can have services for doing other things like authentication, logging, etc.
directives are used for creating widgets or wrapping existing things like jquery plugins. Wrapping existing plugins can be a challenge and the reason you would do this is to establish a two-way data binding between the plugins and angular. If you don’t need two-way data binding then you don’t need to wrap them.

directives are also a place to do DOM manipulation, catching DOM-events, etc. You should not be doing DOM-related stuff in controllers or services. creating directives can get pretty complex, IMHO, I recommend first looking to API for something that will do what you are looking to do OR ask angular google groups for advice.

19. Confused about service vs factory?
Answer:
All angular services are singletons:
Docs (see Services as singletons): https://docs.angularjs.org/guide/services
Lastly, it is important to realize that all Angular services are application singletons. This means that there is only one instance of a given service per injector.
Basically the difference between the service and factory is as follows:
Skip code block
app.service(‘myService’, function() {
// service is just a constructor function
// that will be called with ‘new’
this.sayHello = function(name) {
return “Hi ” + name + “!”;

app.factory(‘myFactory’, function() {
// factory returns an object
// you can run some code before
return {
sayHello : function(name) {
return “Hi ” + name + “!”;

20. List out the differences between config and run methods in AngularJS?
Answer:
Config Block – Constants and providers can be injected into config blocks and this block can be created using the config method.
Run Block – Run block will be executed after the config block. The run block is used to inject constants and instances and this block can be created using the run method.
Eg :

angular.module(‘myTestModule’, []).
config(function (injectables) {
// config block

run(function (injectables) {
// run block