AngularJS interview questions

Q-1. What Is AngularJS?

Answer.

It has been developed by one of the biggest technology giants Google. It is a JavaScript framework that helps you to create dynamic Web applications.

It supports to use HTML as the template language and enables the developer to create extended HTML tags that help to represent the application’s components more clearly. These tags make the code efficient by reducing the lines of code that a developer may need to write when using JavaScript.

It is open-source and licensed under the Apache License version 2.0.

It helps to develop a maintainable architecture that is easy to test at the client-end.

Q-2. What Are The Main Features Of AngularJS?

Answer.

Here is the list of AngularJS features that makes it the hottest tech for web dev.

Data-binding – Handles synchronization of data across model, controllers, and view.

Scope – Object representing the model, acts as a glue layer between controller and view.

Controllers – JS functions bound to the scope object.

Services – Substitutable objects that are wired together using dependency injection. e.g. $location service.

Filters – Formats the value of an expression for displaying to the user. e.g., uppercase, lowercase.

Directives – These are extended HTML attributes start with the “ng-” prefix. e.g., ng-app directive used to initialize the angular app.

Templates – HTML code including AngularJS specific elements and attributes.

Routing – It’s an approach to switch views.

MVC pattern – A design pattern made up of three parts.

Model – Represents data, could be static data from a JSON file or dynamic data from a database.

View – Renders data for the user.

Controller – Gives control over the model and view for collating information to the user.

Deep linking – Enables the encoding of the application state in the URL and vice versa.

Dependency injection – A design pattern to let the components injected into each other as dependencies.

Q-3. Explain The Reasons That Compel A Web Developer To Choose AngularJS For His Web Development Project?

Answer.

Following are some of the key reasons to choose AngularJS as you web development framework:

It uses MVC design pattern which allows segregating an application into different components (called Model, View, and Controller) thus making it easy to maintain.

It allows the HTML to extend by adding directives to the HTML markup. This feature helps in defining dynamic templates which can include new attributes, tags, and expressions.

It allows the creation of user-defined directives and reusable components. These directives help the developer to concentrate on creating logic, thus enabling them to work efficiently.

It supports two-way data binding, i.e., enables automatic synchronization of data between model and view components. Thus, any update in the model gets reflected in the view automatically. And there is no need to add any Javascript code or event listeners to reflect the data changes.

It encapsulates the behavior of your application in controllers which gets instantiated with the help of dependency injection.

It supports built-in services to perform routine tasks for web applications. For example, it provides $http service to communicate with REST service.

It makes the development and testing of the application’s JavaScript code easy.

Also, AngularJS has a mature community to help the developers. It has broad support over the internet.

Q-4. List Down The Popular AngularJS IDE Plugins/Extensions For Web Development?

Answer.

Here is a list of IDE Plugins and Extensions which can enhance the way you code with AngularJS:

Sublime Text

WebStorm

Eclipse

Netbeans

Visual Studio 2012/2013 Express or higher

TextMate

Brackets

ATOM

Q-5. Explain The Steps Involved In The Boot Process For AngularJS?

Answer.

Whenever a web page loads in the browser, following steps execute in the background.

First, the HTML file containing the code gets loaded into the browser. After that, the JavaScript file mentioned in the HTML code gets loaded. It then creates a global object for angular. Now, the JavaScript which displays the controller functions gets executed.

In this step, AngularJS browses the complete HTML code to locate the views. If the same is available, then Angular links it to the corresponding controller function.

In this step, AngularJS initiates the execution of required controller functions. Next, it populates the views with data from the model identified by the controller. With this the page is ready.

Q-6. What Browsers Do AngularJS Support?

Answer.

AngularJS works fine with the latest versions of Safari, Chrome, Firefox, Opera 15+, and IE9+ (Internet Explorer).

It also supports various mobile browsers like Android, Chrome Mobile, iOS Safari, and Opera Mobile.

Note: Versions 1.3 and later of AngularJS dropped support for Internet Explorer 8.

Q-7. What Are The Security Features Provided By AngularJS?

Answer.

AngularJS provides built-in protection from the following security flaws.

It prevents cross-site scripting attacks: Cross-site scripting is a technique where anyone can send a request from client side and can get the confidential information easily.

It prevents HTML injection attacks.

It prevents XSRF protection for server-side communication: “Auth token” mechanism can handle it. When the user logins for the first time a user id and password is sent to the server, and it will, in turn, return an auth token. Now, this token does the authentication in the future transactions.

Q-8. What Are The Web Application Security Risks That A Web Developer Should Avoid While Doing Development Using AngularJS?

Answer.

Following are the most critical web application development flaws that a developer should take care of:

Injection attack.

Broken Authentication and Session Management.

Cross-Site Scripting (XSS)

Insecure direct object references.

Security Misconfiguration.

Sensitive Data Exposure.

Missing Function Level Access Control.

Cross-Site Request Forgery (CSRF).

Using components that possess vulnerabilities.

In-validated redirects and forwards.

+ Top JavaScript Interview Questions

Q-9. Explain What Directives Are? Mention Some Of The Most Commonly Used Directives In AngularJS Application?

Answer.

AngularJS extends the behavior of HTML and DOM elements with new attributes called Directives. It directs the AngularJS’s HTML compiler ($compile) to attach a unique action to that DOM element. This AngularJS component starts with the prefix “ng.”

Following is the list of AngularJS built-in directives.

ng-bind – The ng-bind directive tells AngularJS to replace the content of an HTML element with the value of a given variable, or expression.

If there is any change in the value of the given variable or expression, then the content of the specified HTML element will also be updated accordingly. It supports one-way binding only.
ng-model – This directive is used to bind the value of HTML controls (input, select, text area) to application data. It is responsible for linking the view into the model. Directives such as ‘input’, ‘text area’, and ‘select’ require it. It supports two-way data binding.
ng-class – This directive dynamically binds one or more CSS classes to an HTML element. The value of the ng-class directive can be a string, an object, or an array.
ng-app – Just like the “Main()” function of Java language, this directive marks the beginning of the application to AngularJS’s HTML compiler ($compile). If we do not use this directive first, an error gets generated.
ng-init – This is used to initialize the application data so that we can use it in the block where it is declared. If an application requires local data like a single value or an array of values, this can be achieved using the ng-init directive.
ng-repeat – This repeats a set of HTML statements for the defined number of times. The set of HTML statements will be repeated once per item in a collection. This collection must be an array or an object.

We can even create custom directives and use them in our AngularJS Application.

Q-10. What Are Expressions In AngularJS?

Answer.

AngularJS binds data to HTML using Expressions. It can be written inside double braces: {{ expression}}or inside a directive as ng-bind=”expression”. AngularJS solves the expression and returns the result exactly where that expression is written.

AngularJS expressions are much like JavaScript expressions. They can include literals, operators, and variables.

For example –


{{ 2 + 2 }} (numbers)

{{Name + " " + email}} (string)

{{ Country.Name }} (object)

{{ fact[4] }} (array)

Q-11. What Are Filters? Explain Different Filters Provided By AngularJS?

Answer.

An AngularJS Filter changes or transforms the data before passing it to the view. These Filters work in combination with AngularJS expressions or directives. AngularJS uses pipe character (“|”) to add filters to the expressions or directives. For example:

 {{ bid | currency }}

The above example is an expression enclosed in the curly braces. The filter used in this expression is currency. Also important to note that filters are case-sensitive.

AngularJS provides following filters to transform data.

currency – It is used to format a number to a currency format.
date – It is required to format a date to a specified format.
filter – It chooses a subset of items from an array.
json – It formats an object to a JSON string.
limitTo – Its purpose is to create an array or string containing a specified number of elements/characters. The elements are selected, either from the beginning or the end of the source array or string. This depends on the value and sign (positive or negative) of the limit.
lowercase – This filter converts a string to lower case.
number – It formats a number as text.
orderBy – It enables to sort an array. By default, sorting of strings happens alphabetically. And sorting of numbers is done numerically. It also supports a comparator function where we can define what will be counted as a match or not.
uppercase – This filter converts a string to upper case.

Q-12. What Are Angular Prefixes $ And $$?

Answer.

To prevent accidental name collisions within the code, AngularJS prefixes the names of public objects with $ and the names of private objects with $$.

Use of these literals ($ or $$) for any other reason is not recommended.

Q-13. What Are Different Ways To Invoke A Directive?

Answer.

There are four different ways to invoke a directive in an angular application. They are as follows.

1) As an attribute:

 my-directive>

2) As a class:

 class="my-directive: expression;">

3) As an element:

4) As a comment:

Q-14. What Is Singleton Pattern? How Does Angular Use It?

Answer.

A singleton pattern is an approach that we adopt to limit the instantiation of a Class to have only one object. In Angular, the dependency injection and the services implement the singleton pattern.

Technically, if we call the “new Class()” two times without following the singleton pattern, the outcome will be two objects of the same class. Whereas a singleton enabled class will create the object first time and return the same object onwards.

Q-15. What Is $Scope In AngularJS?

Answer.

It is an application object. And behaves as the owner of the apps variables and functions. Scope object has access to both View and controller. Thus it works as a medium of communication between both of them. This object contains both data and functions. We can use it to access model data of the controller.

Following are the key characteristics of the scope object.

It provides observers to watch for all the model changes.

Provides the ability to propagate model changes through the application as well as outside the system to other associated components.

Scopes can be nested in such a way that they can isolate functionality and model properties.

Provides an execution environment in which expressions are evaluated.

Q-16. What Is “$RootScope” In AngularJS?

Answer.

Every AngularJS application has a “$rootScope” that is the top-most scope created on the DOM element. An app can have only one $rootScope which will be shared among all its components. It contains the ng-app directive. Every other scope is its child scope. It can watch expressions and propagate events. Using root scope, we can set the value in one controller and read it from the other controller.

Q-17. Explain The Concept Of Scope Hierarchy? How Many Scopes Can An Application Have?

Answer.

Every AngularJS application consists of one root scope but may have several child scopes. As child controllers and directives create new child scopes, they get attached to the application. These new scopes get added as children of their parent scope. Similar to DOM, they also create a hierarchical structure.

Q-18. What Is SPA (Single Page Application) In AngularJS?

Answer.

Single-Page Applications (SPAs) are web applications that fit on a single HTML page. It dynamically updates the web page as the user performs actions on the app.

SPAs use AJAX and HTML to create quick and responsive web apps. A single page load extracts all the web app code (JS, HTML, CSS).

Thus the user navigates to different parts of the application quickly as it happens without refreshing the whole page.

The main characteristics of Single-Page Applications are as follows.

Its UI is fast and responsive. Also, the Back/Forward buttons present in the UI work properly.
IT contains more JavaScript code than actual HTML as compared to other applications.
Dynamic data loading occurs from the server-side. The API uses restful web service with JSON format.
It allows to pre-load and cache all the app pages. Thus fewer data download requests are made towards the server.
Applications written in AngularJS are cross-browser compliant. It automatically handles the JavaScript code suitable for each browser.
Even if the user has lost the internet connection, then also the SPA can work. As all the pages load in the starting itself.

Q-19. What Is The Difference Between $Scope And Scope?

Answer.

It is mandatory to use <$scope> while defining a controller. However, the “scope” will be used to create a link function for the custom directive. Both of them refer to the “scope” object in AngularJS. The difference between them is that <$scope> uses dependency injection whereas “scope” does not.

Factory methods like controller, filter, service, etc. receive its arguments via dependency injection (DI). In DI, the order of passing the arguments does not matter. For example, a controller may be defined as (let’s set $scope as the first parameter in this case):


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

//rest of the code goes here }

OR ( if the $scope is the second parameter)


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

//rest of the code goes here }

Thus, AngularJS does not care for the position of “$scope” in both the cases. It uses the argument name to retrieve an object out of the dependency injection container.

But, in the case of directive linker function, the position of scope matters, as it does not use DI. The reason being that the supplied arguments are received by its caller. In this case, the very first parameter has to be the scope as per AngularJS syntax.


app.directive(“myDirective”, function() {

  return {

         scope: {};

         link: function(scope, element, attrs) {

        // code goes here.

                                                                          }

                };

              });

In the case of non-dependency injected arguments, we can also give a name to injected objects. The above code can be re-written as:


app.directive(“myDirective”, function() {

  return {

         scope: {};

         link: function(foo, bar, biz) {

        // code goes here.

                                                                          }

                };

              });

To summarize, in DI case, we pass the as <$scope> whereas, in non-DI cases, the is returned either as a scope or with any name.

+ Top HTML5 Interview Questions

Q-20. How Is AngularJS Compiled?

Answer.

Angular’s HTML compiler allows you to teach the browser, new HTML syntax. It enables the developer to attach new behaviors or attributes to any HTML element called as directives. AngularJS compilation process takes place in the web browser itself. It does not involve any server-side or pre-compilation step.

AngularJS uses <$compiler> service to compile the angular HTML page. Its compilation begins after the HTML page (static DOM) is fully loaded.

It occurs in two phases.

Compile – It looks into the entire DOM and collects all of the directives. The result is a linking function.

Link – It combines the directives with a scope and produces a live view. Any changes in the get reflected in the view, and any operations done by the user in the view gets reflected in the .

The concept of compile and link has come from C language. Here the code is compiled first and then linked.

Q-21. How Is AngularJS Compilation Different From Other JavaScript Frameworks?

Answer.

Javascript frameworks like backbone and jQuery process the template as a string and returns the result as a string. You have to dump this resulting string into the DOM where you wanted it with innerHTML().

AngularJS process the template in another way. It directly works on HTML DOM rather than strings and manipulates it as required. It uses two-way data binding between model and view to sync the data.

Q-22. What Is Ng-View In AngularJS?

Answer.

The ng-view tag creates a placeholder where an HTML or ng-template view can be placed based on the configuration.

Let’s take an example.





 ng-app = "testApp">


    


 ng-view>

In other words, ng-view is the directive that works as a container for angularJS to switch between views.

Coding Interview Q&A

Search This Blog