AngularJS Interview Questions

1. What are the advantages of using Angular.js framework?

Angular.js framework has the following advantages:

• Supports two way data-binding
• Supports MVC pattern
• Support static template and angular template
• Can add custom directive
• Supports REST full services
• Supports form validations
• Support both client and server communication
• Support dependency injection

Applying Animations

Event Handlers

2. Name the key features of AngularJS?

The key features of AngularJS are:

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

3. Explain data binding in AngularJS.

Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.

There are two ways of data binding:

1. Data mining in classical template systems
2. Data binding in angular templates

4. 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:

• 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  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:

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

5. What are Controllers in AngularJS?

Controllers are Javascript functions which provide data and logic to HTML UI. As the name suggests, they control how data flows from the server to HTML UI.

6. What is Angular Expression? How do you differentiate between Angular expressions and JavaScript expressions?

Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to JavaScript.

For example,

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

The main differences between Angular expressions and JavaScript expressions are:

• Context: The expressions are evaluated against a scope object in Angular, while Javascript expressions are evaluated against the global window
• Forgiving: In Angular expression, the evaluation is forgiving to null and undefined whereas in JavaScript undefined properties generate TypeError or ReferenceError
• No Control Flow Statements: We cannot use loops, conditionals or exceptions in an Angular expression
• Filters: In Angular unlike JavaScript, we can use filters to format data before displaying it

7. What is the difference between AngularJS and backbone.js?

AngularJS combines the functionalities of most third party libraries and supports individual functionalities required to develop HTML5 Apps.  While Backbone.js does these jobs individually.

8. Explain what is Dependency Injection in AngularJS?

Dependency Injection is one of the best features of AngularJS. It is a software design pattern in which objects are passed as dependencies. It helps us to remove hardcoded dependencies and makes dependencies configurable. Using Dependency Injection, we can make components maintainable, reusable and testable.

Dependency Injection is required for the following

• Separating the process of creation and consumption of dependencies.
• It allows us to create independent development of the dependencies.
• We can change the dependencies when required.
• It allows injecting mock objects as dependencies for testing

AngularJS uses dependency with several types

• Value
• Factory
• Service
• Provider
• Constant

A simple case of dependency injection in Angular js

9. What is factory method in AngularJS?

Factory method is used for creating a directive.  It is invoked when the compiler matches the directive for the first time. We can invoke the factory method using $injector.invoke.

Syntax: module.factory( 'factoryName', function );

Result: When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory.

10. What is $rootscope in AngularJS?

Every application has a single root scope. All other scopes are descendant scopes of the root scope. Scopes provide separation between the model and the view, via a mechanism for watching the model for changes. They also provide event emission/broadcast and subscription facility.

11. How to implement routing in AngularJS?

t 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 sections where to load the view.

12. What is service in AngularJS?

• It provides a method to keep data across the lifetime of the Angular app.
• It provides a method to communicate data across the controllers in a consistent way.
• This is a singleton object and it is instantiated only once per application.
• It is used to organize and share data and functions across the application.

Two main execution characteristics of Angular services are that they are singleton and lazy instantiated. Angular only creates an instance of a service when an application component depends on it. On the other hand each application component dependent on the service work with the single instance of the service created by Angular.

13. Explain difference between Service and Factory in AngularJS

AngularJS Service is used for sharing utility functions with the service reference in the controller. Service is singleton in nature so for once service only one instance is created in the browser and the same reference is used throughout the page.

Service syntax:module.service( 'serviceName', function );  

 The purpose of AngularJS Factory is also same as Service however in this case we create a new object and add functions as properties of this object and at the end we return this object.

Factories:module.factory( 'factoryName', function );  

14. What is deep linking in AngularJS?

Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.

15. What are the disadvantages of AngularJS?

Following are the disadvantages of AngularJS.

• Not Secure − Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.
• Not degradable − If your application user disables JavaScript then user will just see the basic page and nothing more.

16. Which are the core directives of AngularJS?

Following are the three core directives of AngularJS.

• ng-app − This directive defines and links an AngularJS application to HTML.
• ng-model − This directive binds the values of AngularJS application data to HTML input controls.
• ng-bind − This directive binds the AngularJS Application data to HTML tags.

17. How angular.module works?

Angular.module is used to create AngularJS modules along with its dependent modules. Consider the following example:

Here we've declared an application mainApp module using angular.module function. We've passed an empty array to it. This array generally contains dependent modules declared earlier.