angularjs interview questions and answers


share this interview article on:

What is AngularJS?

AngularJS is an open-source JavaScript framework developed by Google.  It is a framework that helps you to create dynamic Web apps.

AngularJS uses HTML as the backbone. AngularJS creates extended HTML tags that can be used as normal HTML tags. These tags will help you to write an efficient code. The interesting fact is that you can reduce the lines of code  you may need to write when you use normal JavaScript.

 

Why to use AngularJS?

There are following reasons to choose AngularJS as a web development framework:

  1. . It is based on MVC pattern which helps you to organize your web apps or web application properly.
  2.   It provides full featured SPA (Single Page Application) framework.
  3.   It supports two-way data binding i.e. connects your HTML (views) to your JavaScript objects (models) seamlessly. In this way any change in model will update the view and vice versa without any DOM   manipulation or event handling.
  4.   It supports dependency injection which helps you to test your angular app code very easily.
  5.   It saves months of development time by freeing the developer from having to write repetitive low-level DOM manipulation tasks, manually registering callbacks, and otherwise automating most AJAX       application tasks.
  6.   It’s great for providing a “desktop-like” experience to the end user.

 

Is AngularJS a library,framework,plugin or a browser extension?

AngularJS is a first class JavaScript framework which allows you to build well structured, easily testable, and maintainable front-end applications. It is not a library since library provides you limited functionality or has dependencies to other libraries. It is not a plugin or browser extension since it is based on JavaScript and compatible with both desktop and mobile browsers.

 

Explain 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

  • ng-app
  • ng-init
  • ng-model
  • ng-bind
  • 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 used to put values to the variables to be used in the application.

ng-model

This directive is used to bind the value of HTML controls (input, select, text area) to application data. It is responsible for binding the view into the model, which other directives such as input, text area, and select require. It supports two-way data binding.

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.

 

What Are Expressions In AngularJS?

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: it can contain literals, operators, and variables.

For example –

 

{{ 2 + 2 }} (numbers)

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

{{ Country.Name }} (object)

{{ fact[4] }} (array)

 

What Are Filters? Explain Different Filters Provided By AngularJS?

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:

<p> {{ bid | currency }} </p>

 

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 a 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.

 

What is $scope in AngularJS?

The scope is the binding part between the HTML (view) and the JavaScript (controller).

The scope is an object with the available properties and methods.

The scope is available for both the view and the controller.

When you make a controller in AngularJS, you pass the $scope object as an argument:

 

What Is Data Binding? How Many Types Of Data Binding Directives Are Provided By AngularJS?

Data binding is the connection bridge between view and business logic (view model) of the application. Data binding in AngularJs is the automatic synchronization between the model and view. When the model changes, the view is automatically updated and vice versa. AngularJs support one-way binding as well as two-way binding.

AngularJS provides the following data binding directives:

1) <ng-bind>- It updates the text content of the specified HTML element with the value of the given expression. This text content gets updated when there is any change in the expression. It is very similar to double curly markup ( {{expression }}) but less verbose.

It has the following Syntax.

<ANY ELEMENT ng-bind="expression"> </ANY ELEMENT>

2) <ng-bind-html>- It evaluates the expression and inserts the HTML content into the element in a secure way. To use this functionality, it has to use $sanitize service. For this, it is mandatory that $sanitize is available.

It has the following Syntax.

<ANY ELEMENT ng-bind-html=" expression "> </ANY ELEMENT>

3) <ng-bind-template>- It replaces the element text content with the interpolation of the template. It can contain multiple double curly markups.

It has the following Syntax.

<ANY ELEMENT ng-bind-template=" {{expression1}} {{expression2}} … {{expressionn}} "> </ANY ELEMENT>

4) <ng-non-bindable>- This directive informs AngularJS, not to compile or bind the contents of the current DOM element. It is useful in the case when the user wants to display the expression only and do not want to execute it.

It has the following Syntax.

<ANY ELEMENT ng-non-bindable > </ANY ELEMENT>

5) <ng-model>- This directive can be bound with input, select, text area or any custom form control. It provides two-way data binding. It also provides validation behavior. It also retains the state of the control (like valid/invalid, touched/untouched and so on).

It has the following Syntax.

<input ng-bind="expression"/>



Related Interview Questions

ADS

Tags: