AngularJS Interview Questions

1. What is AngularJS?

AngularJS is an open-source JavaScript framework originally developed by Google. It is a structural framework for dynamic Web apps. It is easy to update and get information from your HTML document. It helps in writing a proper maintainable architecture, that can be tested at a client side code.

• This framework is developed on MVC (Model-View-Controller) design pattern.
• It provides full featured SPA (Single Page Application) framework.
• It supports Dependency Injection.
• It supports two-way data binding.
• It provides routing features.
• Testing was designed right from the beginning; so you can build robust tests.
• For DOM manipulation, jqLite is built-in; which is kind of like the Mini-Me of jQuery.
• Separation of the client side of an Application from the Server side.
• The AngularJS framework uses Plain Old JavaScript Objects(POJO), it doesn’t need the getter or setter functions.

You can build Angular apps using any HTML editor or a developer IDE such as Visual Studio or Visual Studio Code. know more at Angular js online training

2. What are directives in AngularJS?

AngularJS directives are only used to extend HTML and DOM elements’ behavior. These are the special attributes, that start with ng- prefix, that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element.

AngularJS has a set of built-in directives like

• ngBind,
• ngModel
• ngClass
• ngApp
• ngInit
• ngRepeat

We can create our own directives for Angular to use them in our AngularJS Application with the controllers and services too. In this article, we’ll learn about some most important built-in directives like: ng-app, ng-init, ng-model, ng-bind and ng-repeat.

ng-app

It is the most important directive for an Angular Application, which is used to indicate starting of an Angular Application to AngularJS HTML compiler ($compile), like a “Main()” function in any compile time language like C#, Java or C++ etc. If we do not use this directive first and directly try to write other directives, it gives an error.

ng-init

ng-init directive is used to initialize an AngularJS Application data variable’s inline statement, so that we can use those in the specified block where we declare them. It is like a local member of that ng-app and it can be a value or a collection of the values and as an array, it directly supports JSON data.

ng-model

ng-model directive is used to define the model/variables value to be used in AngularJS Application’s HTML controls like <input type=’text’/> and it also provides two-way binding behavior with the model value. In some cases, it’s also used for databinding.

ng-bind

ng-bind directive is also used to bind the model/variable’s value to AngularJS Applications HTML controls as well as with HTML tags attributes like: <p/>, <span/> and more, but it does not support two way binding. We can just see the output of the model values.

ng-repeat

ng-repeat directive is used to repeat HTML statements. Ng-repeat works the same as for each loop in C#, Java or PHP on a specific collection item like an array.

3. What are expressions in AngularJS?

Expressions in AngularJS are just like JavaScript code snippets. JavaScript code is usually written inside double braces. {{expression}}. In other words, Angular Expressions are JavaScript code snippets with limited sub-set. Expressions are included in the HTML elements.

Like JavaScript expressions, AngularJS expressions can also have various valid expressions. We can use the operators between numbers and strings, literals, objects and arrarys inside the expression {{ }}. For example,

• {{ 2 + 2 }} (numbers)
• {{Name + “ “ + email}} (string)
• {{ Country.Name }} (object)
• {{ fact[4] }} (array)

4. What is currency filter in AngularJS

One of the filters in AngularJS is the Currency Filter. This “currency” filter includes the “$” Dollar Symbol as the default. So we can use the following code as the html template format of Currency Filter.

{{ currency_expression | currency : symbol : fractionSize}}

How to use Currency Filter in AngularJS

There are two ways by which we can use Currency Filter.

• Default
• If we did not provide any currency symbol then by default Dollar-Sign will be used; we can use it as follows:
• <! — by default →
• Default Currency {{amount | currency}}
• User Defined
• To use different type of currency symbols we have to define our own symbol by using the unicode or Hexa-Decimal code of that Currency.
• E.g. — For Example If we want to define Indian Currency Symbol then we have to use (Unicode-value) or (Hexa-Decimal value)
  Indian Currency {{amount | currency:”&# 8377"}}

5. What is $scope in AngularJS?

$scope in AngularJS is an object which refers to an application model. It is an object that binds view (DOM element) with the controller. In controller, model data is accessed via $scope object. As we know, AngularJS supports MV* pattern, $scope object becomes the model of MV*. know more at Angular js training

The $scope is a special JavaScript object. Both View and controller have access to the scope object. It can be used for communication between view and controller. Scope object contains both data and functions. Every AngularJS application has a $rootScope that is the top most scope created on the DOM element which contains the ng-app directive. It can watch expressions and propagate events.

contains the ng-app directive. It can watch expressions and propagate events.

Characteristics of scope object

• It provides the APIs to observe model (example $watch).
• It can be nested, so that it limits access to the properties. Nested scopes are either child scope or isolated scope.
• It provides the APIs to propagate any model changes from the outside of “Angular realm” (example $apply).
• It provides context against the expression to be evaluated.

Example

In the following example, I have created three controllers: parentController, firstChildControllerand secondChildController and defined one property in each controller; parentName, level1name, and level2name respectively. Here controllers are attached with DOM elements in a nested way.

As described above, AngularJS evaluates expressions with current associated scope and then it searches in parent scope and so on until the root scope is reached.

6. What is “$rootScope” in AngularJS?

A scope provides a separation between View and its Model. Every application has a $rootScope provided by AngularJS and every other scope is its child scope.

Using $Rootscope

Using rootscope we can set the value in one controller and read it from the other controller.

The following is the sample code snippet,

7. What is SPA (Single page application) in AngularJS?

Single-Page Applications (SPAs) are web applications that load a single HTML page and dynamically update that page as the user interacts with the app. SPAs use AJAX and HTML to create fluid and responsive web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript.

A single HTML page here means UI response page from the server. The source can be ASP, ASP.NET, ASP.NET MVC, JSP and so on.

A single-page web application, however, is delivered as one page to the browser and typically does not require the page to be reloaded as the user navigates to various parts of the application. This results in faster navigation, more efficient network transfers, and better overall performance for the end user.

Key Points of Single-Page Applications

• The application is responsive in the UI with no page flicker
• The Back/Forward buttons work as expected
• More JavaScript than actual HTML
• Dynamic data loading from the server-side API works with restful web service with JSON format
• Rich interaction among UI components
• Fewer data transfers from the server and most of the page processes in the UI occurs client-side.
• The application contains tabs and subtabs with multiple HTML containers on the click of the tabs or subtabs and the specific portions of the page that are loaded into the page (the page will be one using the application)
• Applications written in AngularJS are cross-browser compliant. Angular automatically handles the JavaScript code suitable for each browser.
• know more at Angular js online course

8. How to implement routing in AngularJS?

Routing is a core feature in AngularJS. This feature is useful in building SPA (Single Page Application) with multiple views. In SPA application, all views are different Html files and we use Routing to load different parts of the application and it’s helpful to divide the application logically and make it manageable. In other words, Routing helps us to divide our application in logical views and bind them with different controllers.

How to add routing

The$routeProvider definition contained by the module is called “ngRoute”. In app.js file, I have defined an angular app using “angular. Module” method. After creating module, we need to configure the routes. The “config” method is used to configure $routeProvider. Using “when” and “otherwise” method of $routeProvider, we can define the route for our AngularJS application.