AngularJS Interview Questions | Freshers & Experienced

The $routeProvider is used to configure roots within an AngularJS application. It can be used to link a URL with a corresponding HTML page or template, and a controller. Whereas the $locationProvider is used to configure how the application deep linking paths are stored.

The difference between Factory and Service methods can be stated as factories are functions that return the object, while services are constructor functions of the object which are instantiated with the new keyword.

In AngularJS, $http is a core service that is used for reading data from remote servers. It is also used to communicate with the remote HTTP service via the browser's XMLHttpRequest object or via JSONP. Whereas the $q is integrated with the $rootScope. It helps you run functions asynchronously, and use their return values when they are done processing.

In AngularJS, the controller is a JavaScript function that maintains the application data and behavior using $scope object. The syntax ng-controller="myCtrl" attribute is an AngularJS directive is used to define a controller.

ng-model - ng-model directive allows us to bind values of HTML controls (input, select, text area) to application data. When using ngModel, not only change in the scope reflected in the view but changes in the view are reflected back into the scope.

ng-bind - ng-bind directive binds application modal data to the HTML view. It is used to bind/replace the text content of any particular HTML element with the value that is entered in the given expression.

In Angular, the link function is used to define a link against which either we can define a function or we have the option to assign an object which will have pre & post function in directives. It basically deals with linking scope to the DOM.

In Angular Js, the Promises is a $q service provides promises. Basically, a promise is a placeholder for a future value. It serves the same function as callbacks but has a nicer syntax and makes it easier to handle errors. For example, AJAX calls using the $http service are the most common scenarios where promises are used.

In angular, a box model is basically a CSS box model is a container that contains multiple properties including borders, margin, padding, and the content itself. It is used to create the design and layout of web pages.

In Angular, asynchronous is basically an operation that returns an object called a promise. It means that the work will get done; the code promises to complete the task, whether the result is a success or an error.

We can share data by creating a service, Services are the easiest, fastest, and cleaner way to share data between controllers in AngularJs.There are also other ways to share data between controllers, they are:

• Using Events
• $parent, nextSibling, controllerAs
• Using the $rootScope

In Angular JS, angular. copy() is a function that is used when we want to retain the value of an object which we are copying to another variable. It duplicates the variable in a deep way.

The different types of directives available in AngularJS are as follows:

Attribute directives - Directive is active when the matching attribute is found. 

Element directives - Directive is active when the matching element is found. 

Component directives - Directive is active when the matching component is found. 

CSS class directives - Directive is active when matching CSS style is found.

In Angular Js, Filters are a type of function that allows us to format the data to display on UI without changing the original format and can be used with an expression or directives using a pipe. AngularJS consists of a collection of built-in filters, but it is easy to define your own as well.

In Angular Js, AuthGuard is basically a class that implements the interface CanActivate, to decide whether the user has access/permission to view a specific page/route/path in the application or not. It uses the authentication service to check if the user is logged in, if they are logged in it checks if their role is authorized to access the requested route.

HTTP Interceptors are the Angular Services that allow intercepting incoming or outgoing HTTP requests using the HttpClient by intercepting the HTTP request. You can even modify or change the value of the request.

In Angular JS, generally, $rootscope and $scope both are an object which is used for sharing data from the controller to view. But The main difference between $rootscope and $scope is that $rootscope is available globally to across all the controllers whereas $scope is available only in controllers that have created it along with its children controllers.

Pre-compile elements are consist of those elements that are required before compilation while post-compile elements are consist of those elements that are required after compilation. Whereas the link function is used to define a link against which either we can define a function or we have the option to assign an object.

AngularJS Compilation process is a process that begins after your HTML page is fully loaded such that it then traverses the DOM and collects all of the directives.

In Angular js $scope is used whenever we have to use dependency injection or D.I. whereas the scope is used for directive linking.

In angular js, the $rootScope can be accessed in view by injecting $rootScope in the controller.

        var app = angular.module('myApp', []);
	app.controller('myController',function($scope,$rootScope){
		//We can access $rootScope now
	});

The default route can be defined by adding the following condition when defining the $routeProvider service. The below syntax just simply means to redirect to a different page if any of the existing routes don't match.

You can filter the selected checkbox using AngularJS with the help of the following steps:

• Have a $scope. filter = {} object to hold the state of each filter. 
• Associate each checkbox with the corresponding property using ng-model 
• Have a function that decides if a wine should be displayed or not.
• Use that function to filter the items based on their category.

In Angular JS, Data-binding is basically the automatic synchronization of data between the model and view components. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.

In Angular JS, the compiler is basically used to convert the Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code.

E2E Testing stands for End to end testing that refers to a software testing method that involves testing an application's workflow from beginning to end. The purpose of End to end testing is to simulate the real user scenario and validate the system under test and its components for integration and data integrity.

The CSS classes used by AngularJS are as follows :

ng-valid - Angular will set this CSS class if the input field is valid without errors.

ng-invalid - Angular will set this CSS class if the input does not pass validations.

ng-pristine - Angular will set this CSS class if a user has not interacted with the control yet.

ng-dirty - Angular will set this CSS class if the value of the form field has been changed.

ng-touched - Angular will set this CSS class if a user tabbed out from the input control.

ng-untouched - Angular will set this CSS class if a user has not tabbed out from the input control.

ng-submitted - Angular will set this CSS class if the form has been submitted.

Difference between Angular 2 and Angular 4

Pros of Angular 4:

• Faster: Every update is meant to be an improvement of its previous versions and so does Angular 4. It is faster, flexible, and lighter than the older versions. It is designed to have a better performance for the smaller as well as larger applications
• Web Components: Usually applications have a closed system for modularizing, but Angular 4 changed this approach.  Instead, Angular 4 emphasizes emerging web standards, which means it can use any web component without any wrapper coding.
• Performance: Angular 4 has much better performance than Angular 1 and 2 because it doesn't perform deep object comparison. This means if there is any modification in the array like addition or deletion, then change detection wouldn't detect it. This same goes for the object properties but if they are not directly bound from the view.
• Choice in seeds: In Angular 4, you will get many different seeds and boilerplates for your applications'. Be ready to choose one as you are going to get the confusion between all of them. Some of these seeds and boilerplates are Angular CLI, Angular NgCLI, Angular seed, and many more.
• Faster debugging:  With the new release, bug fixing and testing is very fast. A bundle of amazing features is ready to boost the performance of the newer version. Along with that, Angular 4 has easier APIs, lazy loading which made the bugging easier and simple. 
• Deployment: As testing and designing are faster so deployment is much faster in comparison with previous versions.

Cons of Angular 4:

• Lagging UI: The UI of Angular 4 lags when there are more than 200 watchers. This shows that the complexity of Angular 4 is very much restricted. 
• Difficult in learning: It is a bit difficult for you to learn if you haven’t used this language before. You have to spend a lot of time learning this.
• Confusion: There are a variety of ways to do the same thing so there is always confusion about which is a better way. Hence, programmers need to understand the components very carefully.