Basic Angular JS Interview Questions

AngularJS is a javascript framework which helps in developing web applications in MVC architectural pattern & SPA or Single page applications. It simplifies binding of the business logic with a view.It’s an open source framework but is supported by Google.

Angular directives are the attributes which are decorated on the html tags or elements of an html page. Directives have a prefix “ng-” and are used for dom manipulations & data binding. Some of the most common directives are : ng-app, ng-controller,ng-repeat,ng-if etc.

Angular provides the ability to create our own directives to implement our own custom templates or logic in our web application.

For example: Say you have a template consisting of some text boxes and a submit button which is getting used in every single page of your website. Inorder to reduce the re-work, we can simply create our directive which will produce the template when the custom directive is used as an attribute or an element in an html page. In this way we can create and apply a custom directive whic are very useful.

Custom directives gives us the ability to create our own directives. Its restriction property helps us to enforce the decision of how this custom directive should be used. The restriction property takes four values as input:

• E- If E is the value for the restriction property, the directive can only be used as an element in an html page,
• A- If A is used as a value, the directive can be used as an attribute in any html tag,
• C-If C is used, the directive gets triggered if same CSS class is used,
• M-If M is used, the directive gets triggered if same comment is used.

These four values can also be combined and used, for example : ‘EA’ if provided as a value will allow the directive to be used as an element as well as an attribute. ‘EAC’ can also be set as a value for restrict. “template” property is used in a directive if you have to inject a template in your html page.”template” property takes an html template as an input. The main objective of this property is to reduce the re-work involved in writing same code again and again.

A module is a block which defines the boundaries of an angular application.Outside a module ,the angular features and properties will not work. It is implemented by using the directive “ng-app” and is referenced just below the angular framework’s javascript files. It is defined in the following fashion : 

 var app = angular.module("myApp", []);

In this code snippet,”myApp” is the name of the module and is mandatory.The square brackets “[]”, help to inject dependencies in our angular application.

Only one module can be implemented in one HTML page. If multiple modules are implemented then angular only considers the module defined in the topmost element of the HTML page. The remaining modules are ignored.In order to have multiple modules in an HTML page, we have to manually bootstrap the modules except for the topmost module. To manually bootstrap the module $bootstrap is used.It is recommended by the angular team to use only one module per page in a web application.

Also, Read Latest Interview s and answers on React JS

A Controller is a plain javascript function which helps the data flow in an angular application and is responsible for binding the data to the view. A Controller is defined in an application by using ng-controller directive. It is defined in the following fashion: 

var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) {});

It is usually referenced after the module is referenced. $scope is passed as an argument to the controller which is helps controller point to the view it has to control. A controller is the key aspect which helps angular to develop applications in MVC architectural pattern.

Based on the expression’s boolean result, the ng-if directive removes or recreates the element in the dom. If the expression resolves to true it removes the element from the dom otherwise a clone of the element gets inserted.

Based on the expression’s boolean result,ng-show directive hides or shows the element in the dom. If the expression resolves to false it hides the element by adding ng-hide css class on the element otherwise the class is removed from the element.

Multiple controllers can be used in a single html page, provided they all belong to the same module. There are two ways we can have multiple controllers in a single html page, either by defining singular controllers or by defining controllers inside controllers i.e. nesting controllers. A controller can have a child controller as well as a parent controller.The child controller can access all the parent scope properties.

$scope is the object instance of the controller, it acts as a glue between view and model. $scope is passed as an arguement to the controller and is local to the controller it’s passed to. If controllers are nested, the child scope can access all the properties of parent scope.

$rootscope is the object instance of the module, it is the parent of all the scopes in an angular application. It acts as a global variable and can be accessed by any component of the web application.

$rootscope is the parent of all scopes while $scope is merely an object instance of a controller. $rootscope is global while $scope is local i.e. it’s available only to the controller it’s passed to.

$http is used to make ajax calls to the server. Using $http service we can send request to the server and in return we get respond and data. We can carry out all the CRUD operations using get, post, put and delete methods of $http service.

The separation of concerns in AngularJS is achieved by using a service. A Service is a singleton javascript object and gets instantiated only once during an applications lifetime. Services provide some very useful methods essential to implement some powerful angular concepts.

For example $http service provides methods like GET, POST, PUT and DELETE which help to contact the server and help perform CRUD operations. Angular also provides the ability to create custom services. A service can be created in the below fashion in an angular application :

angular.module('myModule', []).factory('serviceId', function() {
var shinyNewServiceInstance;
return shinyNewServiceInstance;
});

A factory(.factory) is a method on our module which takes a name and a function, that defines the factory. We can inject it in our controllers, directives, filters etc and use its properties or methods. A factory and service are the same i.e. their usage and purpose are the same. The one difference however in them is that service is a constructor function but a factory is not.

The most optimal way of transferring data between two controllers is by using a custom service. We achieve this result by creating a custom service with properties or functions which can be accessed by both the controllers.

To implement auto refresh in Angularjs ,we can use $interval service. $interval executes a particular function after a specified period of time. Thus we can call a function that makes ajax calls to a server after a particular period of time making auto refresh possible.

Javascript is a light weight front end scripting language used for carrying out simple functions like changing colors, redirecting to new web pages etc. JQuery is a javascript library used for dom manipulations, enhancing browser compatibility and easing the front ed development. AngularJS is a javascript framework which helps in developing LOB web applications in MVC architectural pattern.It is idle for developing Single page applications or SPA’s.

Angular expressions are placed inside curly brackets {{expressions}}. Angular checks these expressions & resolve the expressions into a unit value.

Angular filters are arguments passed to the angular expressions using pipe characters.The main use of filters is to format or alter the data and present it in a customized manner. The following in built filters are provided by angularjs framework : uppercase, lowercase, currency, filter,orderby etc.

AngularJS achieves the separation of concerns using”Services”. Services are nothing but singleton objects which gets instantiated only once in an applications life cycle and are mainly used to separate a unit of logic which is needed almost everywhere in the application.

In Angularjs, directives by default inherit all the properties from the parent scope, and while creating a custom directive one may need some parent scope properties. There is a possibility that the parent scope at some point in the application lifecycle may get removed/deleted, on the removal of that property the custom directive becomes completely useless.

So to make a custom directive that can access the parent scope properties and at the same time does not rely on it we use isolated scope.

AngularJS is an MVC framework and one of it’s most powerful feature is two-way data binding, which means that model and view are in sync all the time. If there is a change in the model value, the view gets updated automatically. Angular achieves this by running a loop known as digest cycle. Digest cycle goes through the following steps to update the view if a model has changed or vice versa :

• Step 1: Whenever an end user triggers some kind of event like typing, button click etc, such an activity leads to the change of model data.
• Step 2: Angular framework then checks whether the old value and the new value are same. If the values have not changed, it does nothing but if the values have changed then Digest cycle gets invoked.
• Step 3: Digest cycle then runs through all the scope objects of the controller and checks whether any scope object has been affected due to the model change. Every scope object has watchers, these watchers listen whether the model has changed or not.Digest cycle informs these watchers about model change and then finally these watchers synchronize the view with the model data.
• Step 4: When watchers synchronize the view with the model data, there is a possibility that model may get updated again. To make sure that this change in model gets synchronized with the view, angular runs the digest cycle once again. This second loop of digest cycle is termed as “Dirty Checking”.

Two-way data binding is a feature provided by the angular framework using which the view and model of an MVC application are in sync all the time i.e. change in view updates model and vice versa. To achieve two-way data binding “ng-model” directive is used. By default, ng-model provides the two-way data model functionality. In order to achieve one-way data binding, ng-model can be used in below fashion: ng-model=”::object.value”

The working of digest cycle involves going to each and every watcher and informing it about the model change. This task will consume more time if the number of watchers will increase. Angular team has recommended implementing not more than 2000 watchers per page. To check the performance implications of digest cycle, we can use online tools like Batarang. These tools are mere extensions of google chrome & show the time taken by each digest cycle on a single page.

The following are the best practices to be followed while working with AngularJS framework. Following these methods increase the performance of the angular application.

1. Remove unnecessary watchers and thus reduce digest cycle time.
2. Use two way binding only if essential, otherwise prefer one-way binding.Especially in case of ng-repeat.
3. Implement caching of DOM.

Digest cycle can be forced to run by using $apply() method.

Read 80+ AngularJS Interview s for beginners.

One of the most powerful features of AngularJS is data binding.In data binding, the controller binds the data with the view. In AngularJS binding is of two types, one-way binding and two-way binding.In one way binding, the change in the model does not affect view or vice versa.But in two way binding, the change in model adjusts the view accordingly.

Dependency Injection or DI, is a design pattern of injecting objects into the angular components instead of angular components creating for themselves. The advantage of this is, we can separate our web application in multiple logical units, we can reuse these multiple logical units anywhere in our application. In angular dependency injection is the main concept without which angular does not work. For example, In order to use services(built-in or custom or both) we have to inject these services in our controller as shown below.

angular.controller('myCntrl',function($scope,$http)
{
 //Use your $http service here 

});

Single page applications or SPA’s are web applications in which the html page gets loaded once and then it gets dynamically updated as the user engages with the web application. The purpose of SPA is to provide a more native app like experience to the user being a web application. Ajax plays an important role, as in SPA’s we do not load the entire page for web components say for example html templates, instead make an ajax call and get the templates needed. The big advantage of a SPA is it’s ability to update UI without doing a server round trip, this reduces a lot of time and server load.

HTML programming language is used to create angular template.

Factory method in Angularjs is a simple function that allows us to add some logic to create an object and return it. The factory is used to create reusable code.