AngularJS Interview Questions and Answers

Q1. What is AngularJS?

Ans: AngularJS is an open source client-side MV* (Model – View – Whatever) framework for creating dynamic web applications. It gives life to your static HTML and makes it dynamic with its magic. It extends HTML using directives, expression and data binding techniques to define a powerful HTML template.

Q2. Is AngularJS a framework, library or plugin?

Ans: The suitable answer is that it's a framework. As it's lightweight so people also get confused between library and framework.AngularJS is open source client-side MVC framework for creating dynamic web applications.

Q3. Is it the same as jQuery?

Ans:

NO jQuery is a great library for manipulating the DOM, providing a better user experience with animations and effects. You can create a website using jQuery but not a web application. jQuery is just a library to play around with HTML, whereas AngularJS is a framework to build a dynamic web app as it supports two data binding, MVC, allow testability, templates and many more. It is like AngularJS like a toolbox and jQuery is just a tool.

Q4. Does Angular use the jQuery library?

Ans:

YES, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.

Q5. Why AngularJS?

Ans: AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

• MVC implementation is done right.
• It extends HTML using directives, expression and data binding techniques to define a powerful HTML template.
• Two-way data-binding, form validations, routing supports, and inbuilt services.
• REST friendly.
• Dependency injection support.
• It helps you to structure and test your JavaScript code.

Want to acquire industry skills and gain complete knowledge of AngularJS? Enrol in Instructor-Led live AngularJS Training to get Job Ready!

Q6. What are the key features/concepts of Angular.js?

Ans: When you start learning AngularJS, you will come across the following terms and these are the features/concept of AngularJS.

• Scope
• Directives
• Expression
• Filters
• Data Bindings
• Model
• View
• Controller
• Modules
• Services
• Dependency Injection

Q7. Is AngularJS compatible with all modern browsers?

Ans: YES. AngularJS team run an extensive test suite against the following browsers: Safari, Chrome, Firefox, Opera 15, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).

Q8. What is the basic need to start with AngularJS?

Ans: To start with AngularJS, one needs to make a reference to angular.js. The latest version of AngularJS can be downloaded from AngularJS.com. You can either the required js file and then host them locally or you can also use Google CDN for referencing it.

Want to acquire industry skills and gain complete knowledge of AngularJS? Enrol in Instructor-Led live AngularJS Training to get Job Ready!

Q9. How does the AngularJS framework initialize itself?

Ans: AngularJS has a self-executing anonymous function present in angular.js code, which does the initialization of AngularJS. Here is how below it looks,

(function(window, document, undefined) {

if (window.angular.bootstrap) {
    //AngularJS is already loaded, so we can return here...
    console.log('WARNING: Tried to load angular more than once.');
    return;
  }
 
  //try to bind to jquery now so that one can write angular.element().read()
  //but we will rebind on bootstrap again.
  bindJQuery();
 
  publishExternalAPI(angular);
 
  jqLite(document).ready(function() {
    angularInit(document, bootstrap);
  });
 
})(window, document);

Above function first, check if Angular has already been set up. If it has, we return here to prevent Angular from trying to initialize itself a second time. And then it binds jQuery (if present) and publishes external API Finally angularInit() method does the trick for the initialization of AngularJS.

Q10. What is bootstrapping in AngularJS?

Ans: Bootstrapping in AngularJS is nothing but just initializing, or starting, your Angular app. AngularJS supports automatic bootstrapping as well as manual way as well.

Q11. What are templates in AngularJS?

Ans: In Angular, templates are written with HTML that contains Angular-specific elements and attributes. Angular combines the template with information from the model and controller to render the dynamic view that a user sees in the browser. In other words, if your HTML page is having some Angular-specific elements/attributes it becomes a template in AngularJS.

Q12. What are directives in AngularJS?

Ans: Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS to attach a specified behaviour to that DOM element or even transform the DOM element and its children. When AngularJS finds the directive at the time of rendering then it attaches the requested behavior to the DOM element. Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngClass.

Q13. Can we create our own directives?

Ans: YES. AngularJS allows us to create our own custom directive.

Q14. What are the different types or classifications of directives?

Ans: AngularJS directives can be classified into 4 different types.

• Element directives
• Attribute directives

<span ng-directive></span>

• CSS class directives

<span class="ng-directive: expression;"></span>

• Comment directives

Q15. What is the name of the directive used to bootstrap an angular app?

Ans: ng-app directive is used to auto-bootstrap an AngularJS application. The ng-app directive defines the root element of the application and is typically present in the root element of the page 

e.g. on the <body>  or <html> tags.

Q16. Can AngularJS have multiple ng-app directives on a single page?

Ans: The answer is NO. Only one AngularJS application can be auto-bootstrapped per HTML document.

The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application.

If you have placed another ng-app directive then it will not be processed by AngularJS.

You need to manually bootstrap the second app, instead of using the second ng-app directive.

Q17. Can angular applications (ng-app) be nested within each other?

Ans: NO. AngularJS applications cannot be nested within each other.

Q18. Can you bootstrap multiple angular applications on the same element?

Ans: NO. If you try to do that then it will show an error "App Already Bootstrapped with this Element". This usually happens when you accidentally use both ng-app and angular.bootstrap to bootstrap an application. You can also get this error if you accidentally load AngularJS itself more than once.

Q19. In how many different ways, you can define a directive and what is the best practice?

Ans: Angular generally prefers camelCase for directives. But since HTML is not case-sensitive so it refers to directive in DOM in lower case form, delimited by dash (eg. ng-app). But when Angular complies then it normalizes the directives.  

Below are examples of valid directive declarations.

• ng-model
• ngModel
• ng: model
• ng_model
• data-ng-model
• x-ng-model

The normalization process is as follows:

1. Strip x- and data- from the front of the element/attributes.

2. Convert the :, -, or _-delimited name to camelCase.

The best practice is to use dash-delimited (ng-model) or direct camelCaseform (ngModel).

If you are using an HTML validation tool, then it is advised to use data- pre-fixed version. And it also answers another question which is the "Difference between ng-* and data-ng-*".

Q20. Mention some angularJS directives and their purpose.

Ans: The beauty of AngularJS directives is that they are self-explanatory.

By just looking at the directive name, you will get an idea about the purpose and use of the directive.

Below are some mostly used directives.

• ng-app: Initializes application.
• ng-model: Binds HTML controls to application data.
• ng-Controller: Attaches a controller class to view.
• ng-repeat: Bind repeated data HTML elements. It is like a for loop.
• ng-if: Bind HTML elements with the condition.
• ng-show: Used to show the HTML elements.
• ng-hide: Used to hide the HTML elements.
• ng-class: Used to assign CSS class.
• ng-src: Used to pass the URL image etc.  

Event Listeners

ng-click: Click the event to bind on HTML elements.

ng-dbl click

Mouse event listeners

• ng-mousedown
• ng-mouseup
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover

Keyboard event listeners

• ng-keydown
• ng-keyup
• ng-keypress
• ng-change

Q21. What is Angular Expression?

Ans: Angular expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }}. For example, these are valid expressions in Angular:

• {{ 3+4 }}
• {{ a+b }}
• {{ user.name }}
• {{ items[index] }}

Checkout Our Blog on AngularJS Tutorial

Q22. How Angular expressions are different from JavaScript expressions?

Ans: Angular expressions are like JavaScript expressions but there are few differences.

Context: In Angular, the expressions are evaluated against a scope object, while the JavaScript expressions are evaluated against the global window object.

Forgiving: In Angular expression evaluation is forgiving to null and undefined, while in JavaScript undefined properties generate TypeError or ReferenceError.

No Control Flow Statements: Loops, conditionals or exceptions cannot be used in an Angular expression.

No Comma And Void Operators: You cannot use, (comma) or void in an  Angular expression. And You cannot create regular expressions in an  Angular expression.

Q23. What is the compilation process in Angular?

Ans: Once you have the markup, AngularJS needs to attach the functionality. This process is called "compilation" in Angular. Compiling includes rendering markup, replacing directives, attaching events to directives and creating a scope. AngularJS has a compiler service that traverses the DOM looking for attributes.

The compilation process happens in two phases.

Compilation: traverse the DOM and collect all of the directives and creation of the linking function.

Linking: combine the directives with a scope and produce a live view.

The linking function allows for the attaching of events and handling of scope. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model.

When you create a new directive, you can write compile and/or linking functions for it to attach your custom behaviour.

Q24. What is the scope of AngularJS?

Ans: A scope is an object that ties a view (a DOM element) to the controller. In the MVC framework, the scope object is your model. In other words, it is just a JavaScript object, which is used for communication between the controller and the view.

Q25. What is $rootscope in AngularJS?

Ans: 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. Since $rootScope is global, which means that anything you add here, automatically becomes available in $scope in all controllers. To add something in$rootScope, you need to use the app.run function which ensures that it will run prior to the rest of the app. You may say that the "run" function is like the "main" method of the angular app.

app.run(function($rootScope) {  $rootScope.name = "AngularJS"; });

And then you can use in your view. (via expression)

<body ng-app="myApp">  <h1>Hello {{ name }}!</h1> </body>

Q26. What are controllers in AngularJS?

Ans: In Angular, a Controller is a JavaScript constructor function. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. The job of a controller is to pass data from the model to the view or the view can ask for something from the controller, and the controller turns to the model and takes that thing, and hands it back to the view.

var myApp = angular.module('myApp', []);

myApp.controller('MyController', ['$scope', function($scope) {    $scope.website = 'jquerybyexample.net';  } ]);

And then in your HTML using ng-controller directive,

<div ng-controller="MyController">  <h1>My website address is {{ website }}!</h1> </div>

Q27. What is the difference between $scope and scope in AngularJS?

Ans: $scope is used while defining a controller (see previous question) whereas the scope is used while creating a link function for the custom directive. The common part is that they both refer to scope object in AngularJS, but the difference is that$scope uses dependency injection where scope doesn't. When the arguments are passed-in via dependency injection, their position doesn't matter. So for example, a controller defined as ($scope as the first parameter)

myApp.controller('MyController', ['$scope', function($scope, $http) { OR ($scope is second parameter)

myApp.controller('MyController', ['$scope', function($http, $scope) {

In both cases, the position of $scope doesn't matter to AngularJS. Because AngularJS uses the argument name to get something out of the dependency-injection container and later use it.

But in the case of the link function, the position of the scope does matter because it doesn't use DI. The very first parameter has to be scope and that's what AngularJS expects.

app.directive("myDirective", function() {  return {    scope: {};    link: function(scope, element, attrs) {      // code goes here.    }  }; });

However, you can name it anything of your choice. In the below code, foo is your scope object.

link: function(foo, bar, baz) {  // code goes here. }

Q28. What is MVC Architecture in AngularJS?

Ans: In AngularJS, scope objects are treated as Models. The View is the display of the model that is your data.

And the model gets initialized within a JavaScript constructor function, called Controller in AngularJS. Let's take a look at the below code to understand it better.

<!DOCTYPE html> <html> <head>  

<script data-require="angular.js@*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>  

<link rel="stylesheet" href="style.css" />  

<script>    var myApp = angular.module('myApp', []);    

myApp.controller('MyController',

['$scope',      function($scope) {        $scope.website = 'jquerybyexample.net';      }    ]);  

</script> </head>

<body ng-app="myApp">  

<div ng-controller="MyController">    

<h1>My website address is {{ website }}</h1>;  

</div> </body> </html>

Here MyController is a Controller and $scope (Model) is populated within Controller.

And later on in the div element $scope object data is displayed (View).

Q29. Can we have nested controllers in AngularJS?

Ans: YES. We can create nested controllers in AngularJS. Nested controllers are defined in a hierarchical manner while using in View. Take a look at the below code.

Here the hierarchy is "MainCtrl -> SubCtrl -> SubCtrl1".

<div ng-controller="MainCtrl">  

<p>{{message}} {{name}}!</p>  

<div ng-controller="SubCtrl">    

<p>Hello {{name}}!</p>    

<div ng-controller="SubCtrl2">      

<p>{{message}} {{name}}! Your username is  {{username}}.

</p>    </div>  </div> </div>

Q30. In case of nested controllers, does the $scope object shared across all controllers?

Ans: YES. The $scope object is shared across all controllers and it happens due to scope inheritance. Since the ng-controller directive creates a new child scope, we get a hierarchy of scopes that inherit from each other. So if we define a property on a parent scope, the child scope can manipulate the property. And if the property is not present in the child scope, then the parent scope property's value is used. Let's consider, the previous question HTML where there are 3 controllers. And here is the AngularJS code to define these controllers.

var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', ['$scope',  function($scope) {    $scope.message = 'Welcome';    

$scope.name = 'Jon';  } ]);

myApp.controller('SubCtrl', ['$scope',  function($scope) {    $scope.name = 'Adams';  }