Angular Interview Question With Answer!

What is AngularJS?

AngularJS is a MVC (Model view Controller) javascript framework used for creating (SPA) 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

Why AngularJS?

enerally HTML used to declaring static content but it stagger when declaring dynamic views in web-applications. With the help of AngularJS you can extend HTML DOM in your application. AngularJS helps you to organize your JavaScript codebase. AngularJS extraordinarily expressive, readable, and quick to develop.

What are the main key features of AngularJS?

AngularJS main five (5) key features are Two way Data Binding, Templates, MVC (Model, view and Controller). DI (Dependency Injection) and last but not least Directives. Apart from main five key features AngualrJS lots of stuff for more click on know more it will redirect you to Conceptual overview of AngualrJS

What is $scope in Angularjs?

scope-angularjs

Simple term $scope is glue between your AngularJS application controller and view. In AngularJs scope is an object that refers to the AngularJs application model. It’s an execution context for expressions. Scopes are arranged in hierarchical structure which performer the DOM structure of the AngularJS application

What is data binding (one way and two way) in AngularJS

one-way-and-two-way-data-binding

Simple term $scope is glue between your AngularJS application controller and view. In AngularJs scope is an object that refers to the AngularJs application model. It’s an execution context for expressions. Scopes are arranged in hierarchical structure which performer the DOM structure of the AngularJS application

Explain architecture of SPA

architecture-spa

Single-Page Applications (SPAs) are Web based applications that load a single HTML page and dynamically change the content when the page interacts by users with the application. Most of the work happens on the client side through AngularJS. With help of SPA (Single-Page Applications) you can go offline and see the content. Caching gets lot easier and more beneficial

What is Directive in AngularJS?

angularjs-directive

A directive is something that introduces new syntax. We can say a high level it’s markers on DOM (Document Object Model) element (ie. attribute, element, comment or CSS class) that inform AngularJS’s HTML to attach specified behavior to that DOM (Document Object Model) element. Directives are special attributes start with ng-prefix. AngularJS comes with built-in directives like ngBind, ngModel, ngApp and ngClass. You can create your own directives also. Directives are the most important components of any AngularJS application

Explain AngularJS Digest Life Cycle

angularjs-digest-life-cycle

The digest loop is responsible to update DOM elements with the changes made to the model as well as executing any registered watcher functions in AngularJS application. The $digest loop is fired when the browser receives an event that can be managed by the angular context. This loop is made up of two smaller loops (One $evalAsync queue and $watch)

The $digest loop keeps iterating until the $evalAsync queue is empty and the $watch list does not detect any changes in the model. The $evalAsync queue contains those tasks which are scheduled by $evalAsync() function from a directive or controller.

The $watch list contains watches correspondence to each DOM element which is bound to the $scope object. These watches are resolved in the $digest loop through a process called dirty checking. The dirty checking is a process which checks whether a value has changed, if the value has changed, it set the $scope as dirty. If the $scope is dirty, another $digest loop is triggered.

When you do the changes to the scope outside the angular context, you have to call $apply() function explicitly on the scope to trigger $digest cycle

What is auto bootstrap process in AngularJS?

angularjs-auto-bootstrap-process

You can manually initialized your angular application by using angular.bootstrap() function. angular.bootstrap() function takes the modules as parameters and should be called within angular.element(document).ready() function. When DOM is ready for manipulation then angular.element(document).ready() function fired Manual initialization provides you more control on how and when to initialize angular App. It is useful when you want to perform any other operation before Angular wakes up and compile the page.

You should not use the ng-app directive when manually bootstrapping your application. You should not mix up the automatic and manual way of bootstrapping your application. Define your modules, controller, services etc. before manually bootstrapping your application

Explain what is DI (Dependency Injection) works in AngularJS

angular-dependency-injection

Each AngularJS application includes an $injector object. The $injector is responsible for dependency management and for dependency lookups. Here as above diagram that shows how DI works in AngularJS.

To manage the responsibility of dependency creation, each Angular application has an injector. The injector is a service locator that is responsible for construction and lookup of dependencies. The injector is a service locator that is responsible.

The application developer needs to provide annotation information that the injector uses in order to resolve the dependencies. Throughout Angular, certain API functions are invoked using the injector, as per the API documentation. The injector needs to know what services to inject into the function.

What is $broadcast and $emit event in AngularJS?

$broadcast-$emit-angularjs

In AngularJS application $broadcast dispatches an event downwards but $emit dispatches an event upwards as shown in the diagram

$rootScope.$broadcast is a method that lets pretty much everything hear it. This would be the equivalent of mother is yelling that dinner is ready so everyone in the house hears it.

$rootScope.$emit only lets other $rootScope listeners catch it. This is good when you don’t want every $scope to get it. Mostly a high level communication. Simple example it as adults discussing to each other in a room so the kids can’t hear them.

$scope.$broadcast is for the $scope itself and its children. $scope. $emit is when you want that $scope and all its parents and $rootScope to hear the event.

What is service and factory (Difference) in AngularJS?

service-factory-angularjs

Service and Factory both are singleton object or function in AngularJS application.

Service provider function create a service object by using ‘new’ keyword and you can add properties to it by using this keyword, then it return this.

Factory allows us to add some logic before creating the object we require. It differs from service in a way where it allows us to pass the function which factory then invokes and returns the result.

Using the Angular scope $destroy event and method

With Angular scopes, you have access to a $destroy event that can be used to watch $scope events in AngularJS application. This is used for cleanup, and gives you a final opportunity to access any data on a scope. Scopes also have a (rarely used) $destroy method that allows you to manually destroy a scope in your AngularJS application.

The $watch list contains watches correspondence to each DOM element which is bound to the $scope object. These watches are resolved in the $digest loop through a process called dirty checking. The dirty checking is a process which checks whether a value has changed, if the value has changed, it set the $scope as dirty. If the $scope is dirty, another $digest loop is triggered.

Explain what is expression in AngularJS and difference between AngularJS and Javascript

expressions-angularjs

With the help of expressions we can manipulate the DOM values in AngularJS application. Angular expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }}. Expression used to bind application data to HTML. Expression behave like ng-bind directives. Expression and gives you output where they written in your HTML files.

  • Context : In Angular, the expressions are evaluated against a scope object, while the Javascript expressions are evaluated against the global window
  • Forgiving: In Angular expression evaluation is forgiving to null and undefined, while in Javascript undefined properties generates TypeError or ReferenceError
  • No Control Flow Statements: Loops, conditionals or exceptions cannot be used in an angular expression
  • Filters: To format data before displaying it you can use filters

What makes AngularJS better to your application?

Registering Callbacks: There is no need to register callbacks in AngularJS. This makes your code simple and easy to debug.

Control HTML DOM programmatically: All the application that are created using Angular never have to manipulate the DOM although it can be done if it is required
Transfer data to and from the UI: AngularJS helps to eliminate almost all of the boiler plate like validating the form, displaying validation errors, returning to an internal model and so on which occurs due to flow of marshalling data.

No initialization code: With AngularJS you can bootstrap your app easily using services, which auto-injected into your application

Is AngularJS is a Plugins, library or framework?

AngularJS is a Framework not a library or a plugins (browser plugin). AngularJS is 100% client side and 100% JavaScript so it’s definitely not a plugin. It is support all desktop, mobile and tablet browsers. It’s much lighter weight than a typical other frameworks.

What is ng-app, ng-init and ng-model?

  • ng-app – To initialize the Angular Application
  • ng-init – To initialize the Angular Application data
  • ng-model – To bind the html tags (input, select, textarea) to Angular Application Data

Explain how to improve performance of ng-repeat in AngularJS

Bind once aims to go some of the way towards reducde this by allowing you to decrease the number of expressions being watched, making the digest loop faster and your application more performant. with help of the (::) double colon in expression.

With help of bind once within the ng-repeat rather than when defining it to only bind once specific expression

You could also use bind once (ng-repeat=”item in ::items”) within the ng-repeat rather than when defining it to only bind once specific expressions.

In Angular 1.2 a new addition was made to the syntax of ngRepeat: It’s amazingly awesome track by clause. Track by allows you to specify your own key for ngRepeat to identify objects by, instead of just generating unique IDs. So if you use track by in ng-repeat you can improve the performance.

Use track by with this Syntax: ng-repeat=”name in names track by name.id”

Explain .config() and .run() in AngularJS

We can specify functions to run at configuration and run time for a module by calling the config and run methods. These functions are injectable with dependencies just like the factory functions.

config(): config block executed in AngularJS application during the provider registrations and configuration phase only providers and constants inject in this block. It is used to prevent accidental instantiation of service before they have been fully configured.

run(): Run block is executed after the config block. We use this to inject instances and constants. This is just like main() method in other language This block is a great place to put event handlers that need to be executed at the root level for the application. i.e. authentication handlers

Is Angularjs a templating system?

templates-angularjs

We can say that AngularJS does look like just another templating system at the highest level. It’s very good comfortable for application development because of the bidirectional data binding. The template is compiled in the browser and the compilation step produce a live view. This means always view with the model and the model with the view constantly sync.

We use ng-include directive for the templating in the AngularJS application

Explain what is string interpolation in Angular.js ?

string-interpolation-angularjs

With the help of expressions we can manipulate the DOM values in AngularJS application. Angular expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }}. Expression used to bind application data to HTML. Expression behave like ng-bind directives. Expression and gives you output where they written in your HTML files

What is the difference between MVC, MVW and MVVM in AngularJS?

mvc-mvvm-angularjs

MVC (Model – View – Controller) : MVC is very well known design pattern in software industry. MVC full form is very simple M stands for Model, V stands for View and C stands for Controller. MVC software design pattern was introduced in 1970s. It’s force to separate model and controller logic and deoupled from the user interface means view which shown to user on the screen. With help of this concept the maintenance and testing of the AngularJS application and other application become simpler and more easier.

Please check the above diagram how the MVC design pattern work with AngularJS and if you want to deep dive into the same. Click on “Know More” button.

MVW (Model – View – Whatever) :MVW full form is very simple M stands for Model, V stand for View and W stands for Whatever. Being able to categorize a framework and put it into one of the MV* buckets has some advantages. It can help developers get more comfortable with its apis by making it easier to create a mental model that represents the application that is being built with the framework. AngularJS to be MVW framework – Model-View-Whatever. Where Whatever stands for “whatever works for you”.

MVVM (Model – View – View – Model): MVVM design pattern supported by AngularJS application. MVVM full form is very simple M stands for Model, V stands for the View, again V stands for the View and M stands for the Model. It’s supports two-way data binding between view and view model. It supports two-way data binding mesna when view updates model gets updated and model updated view can update. In a simple term the view model uses the observer pattern to notify changes in the view model to model. Here you can find many-to-one relationship between View and ViewModel means many View can mapped to one ViewModel.

Explain what is Routing in AngularJS?

routing-angularjs

With help of AngularJS routes you can create different URLs for your different pages based on your application/website. While you have different URLs for different content enables the user to bookmark URLs to specific content/page, and send those URLs to other user or friends. In AngularJS this called Routes.

Without page reloading you can navigate to the different page/URLs with help of ngRoute module.

In above diagram we create two Route url /ShowUsers and /AddNewUser. Each points to a specific view and is managed by a controller.

Explain the steps for the compilation process of HTML happens?

Using the standard browser API, first the HTML is parsed into DOM

By using the call to the $compile () method, compilation of the DOM is performed. The method traverses the DOM and matches the directives.

Link the template with scope by calling the linking function returned from the previous step

What is the difference between link and compile in AngularJS?

Compile
While traverse the DOM tree looking for directives like (elements / attributes / classes / comments). Each compilation of a directive may modify its template, or modify its contents which has not been compiled yet in AngularJS.

Once a directive is matched, it returns a linking function, which is used in a later phase to link elements together. At the end of the compile phase, we have a list of compiled directives and their corresponding linking functions.

Link
When the link function is called, the template has already been bound to a scope, and added as a child of the element. The link function is your opportunity to manipulate the DOM further and setup change listeners. It is used for registering DOM listeners as well as instance DOM manipulation. It is executed once the template has been cloned

Didn't Find the Q & A?

Please fill free to contact, we will get back to you soon!

Send Question