AngularJS Interview Questions

Angular JS Interview Questions

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

Q2. Name the key features of AngularJS?

The key features of AngularJS are:

Scope
Controller
Model
View
Services
Data Binding
Directives
Filters
Testable

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

Data mining in classical template systems
Data binding in angular templates

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

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

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

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

Q8. 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 hard coded 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

AppModule.controller(“AppController”, function($scope, $window, $log,$http)
{
});

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

Q10. Define scope in AngularJS.

Scope is a special JavaScript object that plays the role of joining the controller (JavaScript) with the views (HTML). The controller sets properties on the scope and the view binds to them.

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

Q12. 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 5: – Define sections where to load the view.

Q13. What is SPA (Single Page Application)? Explain the SPA implement with Angular?

Single Page Applications are web applications that show/load a single HTML page and dynamically update/changes that page as the user interacts with the app. In an SPA the page never reloads, though parts of the page may refresh. This reduces the round trips to the server to a minimum. This way application gets faster than normal.

It’s a concept where we create a single shell page or master page and load the webpages inside that master page instead of loading pages from the server by doing post backs. Angular routes are used in Angular to emplement SPA.

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

Q15. 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 );

Example

<div ng-app=”Myapp”>
<div ng-controller=”exampleCtrl”>
<input type=”text” ng-model=”num.firstnumber” />
<input type=”text” ng-model=”num.secondnumber” />
<input type=”button” ng-click=”Factoryclick()” value=”Factoryclick” />
<input type=”button” ng-click=”servclick()” value=”Serviceclick” /> factory result {{facresult}} service result {{secresult}} </div>
</div>

var myapp = angular.module(‘Myapp’, []);
myapp.controller(‘exampleCtrl’, [‘$scope’, ‘$http’, ‘factories’, ‘services’, function (scope, http, fac, ser)
{
scope.Factoryclick = function ()
{
var firstnumber = parseInt(scope.num.firstnumber);
var secondnumber = parseInt(scope.num.secondnumber);
scope.facresult = fac.sumofnums(firstnumber, secondnumber);
}
scope.servclick = function ()
{
var firstnumber = parseInt(scope.num.firstnumber);
var secondnumber = parseInt(scope.num.secondnumber);
debugger;
scope.secresult = ser.sersumofnums(firstnumber, secondnumber);
}
}]);
myapp.factory(‘factories’, function ($http)
{
return {
sumofnums: function (a, b)
{
return a + b;
}
}
});
myapp.service(‘services’, function ($http)
{
debugger;
this.sersumofnums = function (a, b)
{
return a + b;
};
});

Q16. What is the difference between AngularJS and jQuery?

jQuery and AngularJS have some common features like Unit test runner, animation support, AJAX/JSONP but they also have some differences.

AngularJS came with RESTful API whereas we don’t have that in jQuery.
AngularJS supports the MVC pattern whereas jQuery doesn’t.
AngularJS has the feature called Two Way Data Binding whereas we don’t have that in jQuery.
Deep Linking Routing is supported by AngularJS whereas jQuery doesn’t.
The AngularJS file size is quite heavier than that of the jQuery file size.
We can prefer AngularJS only if we are developing a heavy web application.

Q17. What is AngularJS BootStrap Process?

Automatic Initialization

AngularJS initializes automatically upon DOMContentLoaded event or when the angular.js script is evaluated if at that time document.readyState is set to ‘complete’. At this point AngularJS looks for the ngApp directive which designates your application root. If the ngApp directive is found then AngularJS will:

load the module associated with the directive.
create the application injector
compile the DOM treating the ngApp directive as the root of the compilation. This allows you to tell it to treat only a portion of the DOM as an AngularJS application.

<!doctype html>
<html

I can add: {{ 1+2 }}.
<script src=”angular.js”>

As a best practice, consider adding an ng-strict-di directive on the same element as ng-app:

<!doctype html>
<html ng-app=”optionalModuleName” ng-strict-di>

I can add: {{ 1+2 }}.
<script src=”angular.js”>

This will ensure that all services in your application are properly annotated. See the dependency injection strict mode docs for more.

Manual Initialization

If you need to have more control over the initialization process, you can use a manual bootstrapping method instead. Examples of when you’d need to do this include using script loaders or the need to perform an operation before AngularJS compiles a page.

Here is an example of manually initializing AngularJS:

<!doctype html>

<div ng-controller=”MyController”>
Hello {{greetMe}}!

Note that we provided the name of our application module to be loaded into the injector as the second parameter of the angular.bootstrap function. Notice that angular.bootstrap will not create modules on the fly. You must create any custom modulesbefore you pass them as a parameter.

You should call angular.bootstrap() after you’ve loaded or defined your modules. You cannot add controllers, services, directives, etc after an application bootstraps.

Note: You should not use the ng-app directive when manually bootstrapping your app.

This is the sequence that your code should follow:

After the page and all of the code is loaded, find the root element of your AngularJS application, which is typically the root of the document.
Call angular.bootstrap to compile the element into an executable, bi-directionally bound application.

Q18. What is Constants in AngularJS?

Constant are like services in AngularJS in which we can define our global data. It is declared using “constant” keyword.

As we define our app-keys in Web.Config file for ASP.NET application, which further we can use anywhere in the application, likewise we can declare constant data in AngularJS globally that can be used throughout the application.

We can inject Constant everywhere in controller or service like any other dependency (e.g.$http).AngularJS uses Singleton structure for creating Constant dependency in our Angular application.

So, using the Constant you can create your Config.js file and it can be injected anywhere in your application.

Now, let’s start to define constant and will use it in controller.

First of all create angular module

var app = angular.module(‘ConstantApp’, [])

Then, create Config.js file and define Constant in it,

app.constant(‘config’,
{
appName: ‘Constants’,
appVersion: 2.0
});

Now, use the above to declare Constant in our controller,

app.controller(‘mainController’, function ($scope,config) {
$scope.ApplicationName = config.appName;
}

At last now consume this scope in our HTML view,

<title>{{ApplicationName}}</title>

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

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

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

Q22. How angular.module works?

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

var mainApp = angular.module(“mainApp”, []);

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.

Tags: AngularJS Interview Questions