Mostly asked AngularJS Interview Questions and Answers

Here, i have share about Mostly asked AngularJS Interview Questions and Answers for freshers & experienced developers. Its very helpful for you to confidentially attend the interview.

mostly asked angularjs interview questions

After reading this article, you have some idea in develop the AngularJS application and also face the any type of complicated questions.

1.What is AngularJS?

AngularJS has been introduced by the giant, Google. It is a framework that helps you to create dynamic Web apps. Normally, AngularJS uses HTML as the backbone. AngularJS creates extended HTML tags that can be used as normal HTML tags. These tags will help you to write an efficient code. The interesting fact is that you can reduce the lines of code you may need to write when you use normal JavaScript.

AngularJS is an open-source JavaScript framework developed by Google. It is a structural framework for dynamic Web apps. It is easy to update and get information from your HTML document. It helps in writing a proper maintainable architecture, that can be tested at a client side code.

Some features

1.This framework is developed on MVC (Model-View-Controller) design pattern.
2.It provides full featured SPA (Single Page Application) framework.
3.It supports Dependency Injection.
4.It supports two-way data binding.
5.It provides routing features.
6.Testing was designed right from the beginning; so you can build robust tests.
7.For DOM manipulation, jqLite is built-in; which is kind of like the Mini-Me of jQuery.
8.Separation of the client side of an Application from the Server side.
9.The AngularJS framework uses Plain Old JavaScript Objects(POJO), it doesn’t need the better or setter functions.

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

Built-in features

1.ngBind,
2.ngModel
3.ngClass
4.ngApp
5.ngInit
6.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.

3.What are expressions in AngularJS?

Expressions in AngularJS are just like JavaScript code snippets. JavaScript code is usually written inside double braces: {{expression}}. In other words, Angular Expressions are JavaScript code snippets with limited sub-set. Expressions are included in the HTML elements.

Like JavaScript expressions, AngularJS expressions can also have various valid expressions. We can use the operators between numbers and strings, literals, objects and arrarys inside the expression {{ }}.

4.What is $scope in AngularJS?

$scope in AngularJS is an object which refers to an application model. It is an object that binds view (DOM element) with the controller. In controller, model data is accessed via $scope object. As we know, AngularJS supports MV* pattern, $scope object becomes the model of MV*.

The $scope is a special JavaScript object. Both View and controller have access to the scope object. It can be used for communication between view and controller. Scope object contains both data and functions. Every AngularJS application has a $rootScope that is the top most scope created on the DOM element which contains the ng-app directive. It can watch expressions and propagate events.

5.What is “$rootScope” in AngularJS?

A scope provides a separation between View and its Model. Every application has a $rootScope provided by AngularJS and every other scope is its child scope. Using rootscope we can set the value in one controller and read it from the other controller.

6.What is SPA (Single page application) in AngularJS?

Single-Page Applications (SPAs) are web applications that load a single HTML page and dynamically update that page as the user interacts with the app. SPAs use AJAX and HTML to create fluid and responsive web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript.

A single HTML page here means UI response page from the server. The source can be ASP, ASP.NET, ASP.NET MVC, JSP and so on.

A single-page web application, however, is delivered as one page to the browser and typically does not require the page to be reloaded as the user navigates to various parts of the application. This results in faster navigation, more efficient network transfers, and better overall performance for the end user.

7.How to implement routing in AngularJS?

Routing is a core feature in AngularJS. This feature is useful in building SPA (Single Page Application) with multiple views. In SPA application, all views are different Html files and we use Routing to load different parts of the application and it’s helpful to divide the application logically and make it manageable. In other words, Routing helps us to divide our application in logical views and bind them with different controllers.

8.How many types of data binding in AngularJS?

Data binding is a very powerful feature of the software development technologies. Data binding is the connection bridge between view and business logic (view model) of the application. Data binding in AngularJs is the automatic synchronization between the model and view. When the model changes, the view is automatically updated and vice versa. AngularJs support one-way binding as well as two-way binding.

Binding Directives in AngularJs

1.ng-bind
2.ng-bind-html
3.ng-bind-template
4.ng-non-bindable
5.ng-model

9.What is a Factory method in AngularJS?

AngularJS Factory: the purpose of Factory is also the 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.

10.How are validations implemented in AngularJS?

One of the coolest features of AngularJS is client-side validation. There are so many form directives available in AngularJS. We will talk about some of them here, we will also explain custom validation. Using it you can create your own validations.

11.What is $rootscope and how do we use it?

$rootscope provides access to the top of the scope hierarchy, a scope provides a separation between View and its Model. Every application has a $rootScope provided by AngularJS and every other scope is its child scope.

12.Why are we using AngularJS and what are the advantages of AngularJS?

As we know AngularJS follows the MVW* pattern and it allows us to build well-structured, testable, and maintainable front end applications.

W* means “whatever,” in place of which we use C (controller) or VM (view model).

Why we are using AngularJS:
1.As we know AngularJS is based on MVC pattern; it helps us to organize our web apps or web application properly.
2.It helps to make responsive and well organized web applications that are more expansive and readable.
3It follows two way data binding. Two way data binding helps us so that any changes in model will be updated view and vice-versa without any manipulation on DOM or events.
4.AngularJS supports create your own directive that makes reusable components to be used according to your requirement. It is also abstract DOM manipulation logic.
5.It supports services and dependency injection which we can easily inject in our controller and provides some utility code as per our requirement.

Advantages of AngularJS:
1.AngularJS has code reusability that allows us to write code & reuse it as required as Custom directive.
2.AngularJS supports powerful data binding; it is two way data binding with the help of HTML & scope.
3.AngularJS is easily customizable as per our requirement. Here we can create own custom components like directive and services.
4.AngularJS has good support over the internet and over time it has new changes available for developers. It also supports IE, Opera, Safari, and Chrome.
5.AngularJS has inbuilt form validation & template with all old plain html.
6.AngularJS has easily testable Unit testing, it doesn’t need to load all the app, just loading that specific module is enough to start unit testing.

13.What is Representational State Transfer(REST) in AngularJS.

REST is a style of API that operates over HTTP requests. The requested URL identifies the data to be operated on, and the HTTP method identifies the operation that is to be performed. REST is a style of API rather than a formal specification, and there is a lot of debate and disagreement about what is and isn’t RESTful, a term used to indicate an API that follows the REST style. AngularJS is pretty flexible about how RESTful web services are consumed.

You should use the services that I describe in this article when you are performing data operations on a RESTful API. You may initially prefer to use the $http service to make Ajax requests, especially if you are coming from a jQuery background. To that end, I describe the use of $http at the start of the article, before explaining its limitations when used with REST and the advantages of using the $resource service as an alternative. For this, we first need to create a RESTful web API.

14.Why we use $http service or ajax request in AngualrJS?

Ajax is the foundation of the modern web application, and you will use the services that I describe in this article every time that you need to communicate with a server without causing the browser to load new content and, in doing so, dump your AngularJS application.

That said, if you are consuming data from a RESTful API, then you should use the $resource service. I will describe REST and $resource in the next article, but the short version is that $resource provides a higher-level API that is built on the services I describe in this article and makes it easier to perform common data operations.

15.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).

16.What is bootstrapping in AngularJS?

Bootstrapping in AngularJS is nothing but initializing, or starting the Angular app. AngularJS supports automatic and manual bootstrapping.

1.Automatic Bootstrapping: this is done by adding ng-app directive to the root of the application, typically on the tag or tag if you want angular to bootstrap your application automatically. When angularJS finds ng-app directive, it loads the module associated with it and then compiles the DOM.

2.Manual Bootstrapping: Manual bootstrapping provides you more control on how and when to initialize your angular App. It is useful where you want to perform any other operation before Angular wakes up and compile the page.

17.Which types of component can we create a custom directive?

AngularJS provides support to create custom directives for the following:

Element directives: Directive activates when a matching element is encountered.
Attribulte: Directive activates when a matching attribute is encountered.
CSS: Directive activates when a matching css style is encountered.
Comment: Directive activates when a matching comment is encountered.

18.What is constant in AngularJS

constants are used to pass values at config phase considering the fact that value cannot be used to be passed during config phase.

mainApp.constant(“configParam”, “constant value”);

19.What is a service?

Services are JavaScript functions and are responsible to do specific tasks only. Each service is responsible for a specific task for example, $http is used to make ajax call to get the server data. $route is used to define the routing information and so on. Inbuilt services are always prefixed with $ symbol.

20.How to make an ajax call using Angular JS?

AngularJS provides $http control which works as a service to make ajax call to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format. Once the data is ready, $http can be used to get the data from server in the following manner:


function studentController($scope,$http) {
var url = "data.txt";
$http.get(url).success( function(response) {
$scope.students = response;
});
}

If you are fresher then interviewer does not expect you will answer very complex questions, rather you have to make your basics concepts very strong.