AngularJS Interview Questions & Answers


AngularJS Interview Questions & Answers

1. What is AngularJS?

AngularJS is a javascript framework used for creating single web page applications.  It allows you to use HTML as your template language and enables you to extend HTML’s syntax to express your application’s components clearly.

2. Explain what are the key features of AngularJS?

The key features of AngularJS are

  • Scope
  • Controller
  • View
  • Model
  • Services
  • Data Binding
  • Directives
  • Testable
  • Filters

3. What is scope in AngularJS?

Scopes are objects that refer to the model. They act as glue between controller and view.

4. What are the controllers in AngularJS?

Controllers are JavaScript functions that are bound to a particular scope. They are the prime actors in AngularJS framework and carry functions to operate on data and decide which view is to be updated to show the updated model based data.

5. What are the services in AngularJS?

AngularJS come with several built-in services. For example $https: service is used to make XMLHttpRequests (Ajax calls). Services are singleton objects which are instantiated only once in app.

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

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

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.

8. Why AngularJS?

AngularJS lets us extend HTML vocabulary for our application resulting in an expressive, readable, and quick to develop environment . Some of the advantages are:

  •     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, inbuilt services.
  •     REST friendly.
  •     Dependency injection support.
  •     It helps you to structure and test your JavaScript code.

9. Is AngularJS compatible with all browsers?

Yes AngularJS is compatible with the following browsers: Safari, Chrome, Firefox, Opera 15, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).

10. How to implement routing in AngularJS?

It is a five-step process:

  • Step 1: – Add the “Angular-route.js” file to your view.
  • Step 2: – Inject “ngroute” functionality while creating Angular app object.
  • Step 3: – Configure the route provider.
  • Step 4: – Define hyperlinks.
  • Step 5: – Define sections where to load the view.

11. List Down The Popular AngularJS IDE Plugins/Extensions For Web Development?

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

12. Mention what are the advantages of using AngularJS ?

AngularJS has several advantages in web development.

  • AngularJS supports MVC pattern
  • Can do two ways data binding using AngularJS
  • It has per-defined form validations
  • It supports both client server communication
  • It supports animations

13. Who created Angular JS ?

Intially it was developed by Misko Hevery and Adam Abrons. Currently it is being developed by Google.

14. What Is The Difference Between One-Way Binding And Two-Way Binding?

The main difference between one-way binding and two-way binding is as follows.

  • In one-way binding, the scope variable in the HTML gets initialized with the first value its model specifies.
  • In two-way binding, the scope variable will change its value whenever the model gets a different value.

Leave a Reply

Your email address will not be published. Required fields are marked *

Reload Image