80+ AngularJS Interview Questions

Top 80 AngularJS interview Questions and Answers.

Read AngularJS interview questions including topic advanced topics like Dependency injection, Two-way binding, Dependency injection, scope in angularJS

1. What is AngularJS? List some benefits of using AngularJS?
2. List some Pros an Cons of angular js?
3. What is Angular Module? How to create a Module in Angular js?
4. What is Angular Controller?
5. What is $scope?
6. What is $rootscope? How is it different from the scope?
7. What is the difference between $scope and scope?
8. What are Angular Expressions?
9. List the major browsers Supported by Angular js?
10. How to enable HTML5 mod in Angular 1.x?
11. List some of the built-in validators in Angular JS?
12. What is Angular’s prefixes $ and $$?
13. What are directives? How to create and use custom Directive in Angular js.
14. How can you invoke a directive in Angular Js?
15. Explain ng-repeat directive in Angular Js.
16. What are Constants in Angular? How to create and use Constants in Angular Js?
17. What is a Service? why we use a service in Angular Js?
18. Explain $q service, deferred and promises?
19. What are Filters in Angular js? List some filters in Angular js.?
20. In angular js which service obj is not the singleton?
21. What are Compile, Pre, and Post linking in AngularJS?
22. List some Built in directives available in angular 1.x?
23. What is Data binding? Explain different types of Data binding mechanism used in Angular js.
24. What is a Factory in angular Js, how it is different from a service?
25. How to create a service using Factory?
26. Explain digest cycle in AngularJS?
27. What is Dependency Injection, How it works in Angular js?
28. How can you use Jquery with Angular Js?
29. List some commonly used services in Angular js.
30. How to hide or show a div in Angular js.
31. Explain ng-include directive?
32. How to disable a control or element in Angular js.
33. How to create a service in Angular js?
34. What is internationalization in angular js?
35. What is Interpolation in angular Js.
36. Explain Event in Angular js. List some events you have worked in Angular js?
37. Explain Routing in Angular Js?
38. Explain UI Routing in AngularJS?
39. What is different between ng routing and UI routing?
40. What is a dynamic route in Angular js and how do you implement it?
41. List and explain different types of directive available in Angular Js?
42. How  Angular.js is different from Jquery?
43. Explain Bootstrapping in Angular Js?
44. What is a provider in Angular JS?
45. How to disable right click event in Angular js?
46. What is the difference between $evalAsync and $timeout?
47. What is Isolate Scope and why it is required?
48. What are scopeless controller? why to use them?
49. What is $emit, $broadcast and $on in AngularJS?
50. What is different between ng-model and ng-bind?
51. How to format a date in Angular js?
52. How to do Animation in AngularJS?
53. What is the use of ng-cloak directive?
54. How $location is different from window.location?
55. What is the difference between ‘this’ vs $scope in AngularJS controllers?
56. How to send an Http post request in Angular js?
57. Write a code to upload an image in Angular js?
58. How to use $scope.$watch and $scope.$apply in AngularJS?
59. How to set focus on the input field in Angular 1.x?
60. How to use Multiple ng-app within a page in AngularJS?
61. How to access parent scope from child controller in AngularJs?
62. How to do email and Phone no validation is AngularJs?
63. What is the difference between link and compile in AngularJS?
64. How can you get Url parameters in Controller?
65. How to implement caching in Angular 1.x?
66. Explain the use of Ng-If, Ng-Switch, And Ng-Repeat directives?
67. How to change start and end symbols used for AngularJS expressions?
68. How to validate an URL in AngularJs?
69. What is the use of $locale service in AngularJS?
70. What is transclusion in Angular Js?
71. List some nethods supported by $http service?
72. How to set and get and destroy cookies in ANgular Js?
73. What is the difference between a stateful and stateless component?
74. What is “track by” in AngularJS and how does it work?
75. Explain $templateCache in Angular Js?
76. What is the difference between a unit and end-to-end (e2e) test?
77. List some testing Tools available in Angular JS?
78. Explain .config() and .run() methods AngularJS?
79. What is a Mocked Service in Angular Js? How to use it?
80. What is a locale ID in Angular JS?

1. What is Angular JS?

AngularJS is a JavaScript framework that is used for making rich, extensible web applications. It runs on plain JavaScript and HTML, so you don’t need any other dependencies to make it work.AngularJS is perfect for Single Page Applications (SPA). It is basically used for binding JavaScript objects with HTML UI elements.

2. Explain the architecture of AngularJS?

AngularJS is architecture on 3 components. They are

• The Template (View)
• The Scope (Model)
• The Controller (Controller)

AngularJS extends HTML attributes with Directives and binds data to HTML with Expressions.

3. What is the Template in AngularJS?

The template is the HTML portion of the angular app. It is exactly like a static HTML page, except that templates contain additional syntax which allows data to be injected in it in order to provide a customized user experience.

4. What is the scope in AngularJS?

The scope is the object that represents the “model” of your application. It contains fields that store data which is presented to the user via the template, as well as functions which can be called when the user performs certain actions such as clicking a button.

5. What is the controller in AngularJS?

The controller is a function which generally takes an empty scope object as a parameter and adds to it the fields and functions that will be later exposed to the user via the view.

6. Explain Directives in AngularJs?

AngularJS directives are extended HTML attributes with the prefix ng-
The 3 main directives of angular js are

• ng-app:- directive is used to flag the HTML element that Angular should consider to be the root element of our application. Angular uses spinal-case for its custom attributes and camelCase for the corresponding directives which implement them.
• ng-model:- directive allows us to bind values of HTML controls (input, select, textarea) 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:- directive binds application modal data to the HTML view.

7. List some tools for testing AngularJS applications?

For testing AngularJS applications there are certain tools that you should use that will make testing much easier to set up and run.

Karma

Karma is a JavaScript command line tool that can be used to spawn a web server which loads your application’s source code and executes your tests. You can configure Karma to run against a number of browsers, which is useful for being confident that your application works on all browsers you need to support. Karma is executed on the command line and will display the results of your tests on the command line once they have run in the browser.

Karma is a NodeJS application and should be installed through NPM/YARN. Full installation instructions are available on the Karma website.

Jasmine

Jasmine is a behavior-driven development framework for JavaScript that has become the most popular choice for testing AngularJS applications. Jasmine provides functions to help with structuring your tests and also making assertions. As your tests grow, keeping them well structured and documented is vital, and Jasmine helps achieve this.

Jasmine comes with a number of matches that help you make a variety of assertions. You should read the Jasmine documentation to see what they are. To use Jasmine with Karma, we use the karma-jasmine test runner.

angular-mocks

AngularJS also provides the ngMock module, which provides mocking for your tests. This is used to inject and mock AngularJS services within unit tests. In addition, it is able to extend other modules so they are synchronous. Having tests synchronous keeps them much cleaner and easier to work with. One of the most useful parts of ngMock is $httpBackend, which lets us mock XHR requests in tests and return sample data instead.

Source:https://docs.angularjs.org/guide/unit-testing

8. How do you share data between controllers in AngularJs?

We can share data by creating a service,
Services are 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

9. Explain AngularJS digest cycle?

AngularJS digest cycle is the process behind Angular JS data binding.
In each digest cycle, Angular compares the old and the new version of the scope model values. The digest cycle is triggered automatically. We can also use $apply() if we want to trigger the digest cycle manually.

10. What is internationalization in Angularjs?

Internationalization is a way to show locale-specific information on a website.It is used to create multilingual language websites.

11. Difference between AngularJS and JavaScript Expressions

Below are some major difference between AngularJS and JavaScript Expressions

• Both can contain literals, operators, and variables.
• AngularJS expressions can be written in HTML but JavaScript expressions are not.
• AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.
• AngularJS expressions support filters, while JavaScript expressions do not.

12. Explain basic steps to set up an Angular app?

• Create an angular.module
• Assign a controller to the module
• Link your module to HTML with ng-app
• Link the controller to HTML with ng-controller directive

13. What are Angular Modules?

Angular Modules are place where we write code of our Angular application.Writing Modules makes our code more maintainable, testable, and readable. All dependencies for our app are defined in modules.

14.Explain Directive scopes?

There are three types of directive scopes available in Angular.

• Parent Scope: is default scope
• Child Scope:  If the properties and functions you set on the scope are not relevant to other directives and the parent, you should probably create a new child scope.
• Isolated Scope: Isolated Scope is used if the directive you are going to build is self-contained and reusable. Does not inherit from parent scope, used for private/internal use.

15. How to isolate a directive’s Scope in Angular?

You can isolate a directive’s Scope by passing an object to the scope option of directive.
This tells the directive to keep scope inside of itself and not to inherit or share with other scopes.

16. What is the difference between one-way binding and two-way binding ?

In One-Way data binding, view (UI part) not updates automatically when data model changed. We need to write custom code to make it updated every time.
ng-bind has one-way data binding.

While in two way binding scope variable will change it’s value every time its data model changed is assigned to a different value.

17. How would you make an Angular service return a promise? Write a code snippet as an example

To add promise functionality to a service, we inject the “$q” dependency in the service, and then use it like so:

angular.factory('testService', function($q){
return {
getName: function(){
var deferred = $q.defer();

//API call here that returns data
testAPI.getName().then(function(name){
deferred.resolve(name)
})

return deferred.promise;
}
}
})

The $q library is a helper provider that implements promises and deferred objects to enable asynchronous functionality

Source: https://docs.angularjs.org/api/ng/service/$q

18. Explain the role of $routeProvider in AngularJS?

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 (if applicable).

19. Explain how does Angular implement two-way binding?

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.

20. What is dependency injection and how does it work?

AngularJS was designed to highlight the power of dependency injection, a software design pattern that places an emphasis on giving components their dependencies instead of hardcoding them within the component. For example, if you had a controller that needed to access a list of customers, you would store the actual list of customers in a service that can be injected into the controller instead of hardcoding the list of customers into the code of the controller itself. In AngularJS you can inject values, factories, services, providers, and constants.

21. What is $rootscope? How is it different from the scope?

In Angular JS $rootscope and $scope both are an object which is used for sharing data from the controller to view.
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.

22. What is the difference between $scope and scope?

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

23. What are Angular Expressions?

Angular js Expression is JavaScript alike code snippets used to bind expression data in view or HTML. Angular expressions are written inside two curly braces.

{{a+b}}

24. List the major browsers Supported by Angular js?

Below are some major browsers supported by Angular js

• Mozilla Firefox
• Google Chrome
• Microsft Edge
• IE 10,11
• IE Mobile,
• Safari, iOS
• Android: Nougat (7.0) Marshmallow (6.0)

25. How to enable HTML5 mode in Angular 1.x?

html5Mode method of $locationProvider module is used to enable HTML5 mode in Angular 1.x. For creating pretty URLs and removing # from URLs html5Mode need to true.

Enabling html5Mode to true in Angular 1.x.

angular.module('myApp', [])

    .config(function($routeProvider, $locationProvider) {

        $routeProvider
            .when('/', {
                templateUrl : 'partials/home.html',
                controller : mainController
            })
            

        // use the HTML5 History API
        $locationProvider.html5Mode(true);
    });

26. List some of the built-in validators in Angular JS?

Angular js supports all standard HTML5 attributes to validate input.Below are few built-in validators in Angular js.

• required
• min
• max
• type=”number” OR type=”email”

27. What is Angular’s prefixes $ and $$?

Angular uses these prefixes to prevent accidental code collision with users code.
$ prefix is used with public objects whereas $$ prefix is used with a public object.

28. What are directives? How to create and use custom Directive in Angular js.

In angular Directives are used to extend the attributes of Html elements.
Creating custom directive in Angular js.
Angular js Directives are restricted to element and attribute and created using a directive function.Here is sample code to create a directive in Angular js.

var app = angular.module("myApp", []);
app.controller('AppController', function($scope) {
    var users=[];
    var user1={};
    user1.firstName="Satyam";
    user1.lastName="Kumar";
    users.push(user1);
    var user2={};
    user2.firstName="Ravi";
    user2.lastName="Sankar";
    user2.push(user2);
    $scope.users=students;
});
app.directive('user', function() {
    //define the directive object
    var directive = {};
    //restrict = E, implies that directive is Element directive
    directive.restrict = 'E';
    //element will be replaced by this text/html
    directive.template = "First Name: {{user.firstName}} , Last Name: {{user.lastName}}";
    var linkFunction = function($scope, element, attributes) {
        element.css("background-color", "#e1e1e1");
    }
    directive.link=linkFunction;
    return directive;
});

As Above directive is restricted to Element directive, so you can use this directive as an element only.
Usage:

<div ng-app="app">
 <h1>Custom Directive Demo</h1>
 <div ng-controller="UserController">
 <div ng-repeat="user in users">
 <user></user>
 </div>
 </div>
</div>

29. How to access parent scope from child controller in Angular JS?

In angular there is a scope variable called $parent (i.e. $scope.$parent). $parent is used to access parent scope from child controller in Angular JS.
Example:

<div ng-controller="ParentCtrl">
    <h1>{{ name }}</h1>
    <p>{{ address }}</p>
    <div ng-controller="ChildCtrl">
        <h1>{{ title }}</h1>
        <input type="text" ng-model="$parent.address" />
</div>

30. How to do email and Phone no. validation in Angular JS?

Angular form validation and ng-pattern directive can be used to validate the email and phone number in Angular JS.

31. What is the difference between a link and compile in Angular JS?

Compile function: To template DOM manipulation and to gather all the directives, the compile function is used.
Link function: To register DOM listeners as well as for the instance DOM manipulation, the Link function is used.

32. How can you get URL parameters in Controller?

The RouteProvider and the RouteParams can be used to get the URL parameters in the controller.
As the route wires up the URL to the controller and RouteParams can be passed to the controller to get the URL parameters.

33. How to enable caching in Angular 1.x?

Caching can be enabled by setting the config.cache value or the default cache value to TRUE or to a cache object that is created with $cacheFactory.
In case you want to cache all the responses, then you can set the default cache value to TRUE.
And, if you want to cache a specific response, then you can set the config.cache value to TRUE.

34. Explain the use of Ng-If, Ng-Switch, And Ng-Repeat directives?

ng-if – This directive removes a portion of the DOM tree, which is based on the expression.
In case the expression is assigned to ng-if, it evaluates to a false value, and then the element is deleted from the DOM tree, or else a clone of the element is reinserted into the DOM.
ng-switch – This directive is used based on a scope expression to conditionally swap DOM structure on the template.
The ng-switch default directive will be preserved at the specific location in a template.
ng-repeat – This directive is used to instantiate the template once per item from a collection.
Each template which is instantiated gets its own scope where the given loop variable is set to the current collection of item.

35.How to change start and end symbols used for AngularJS expressions?

Passing the $interpolateprovider in the config can help us change the start and end symbols used in our Angular JS expressions.

36. List some difference between Angularjs and Angular 2?

Difference between AngularJS and Angular 2
Angular js or Angular 1.x is based on MVC Architecture	Angular 2 is based on service/ components
Javascript is used to write applications in Angular js.	Typescript (superset of javascript) is used to write application in Angular2.
Controller are used to write logics and interact with Model and view.	In Angular 2 Controllers are totally elminated and Components take its place.
Angular 1 is created for developing Single page web-applications.	In Angular 2 can used for developing native applications for mobile platform like React Native as well interative web applications.
Angularjs is easy to setup, you just need to include angular.js library to start.	Angular 2 is dependent on other modules/ package.It give little brainstrom to install and run Angular 2.
In Angularjs ng-app directive is used bootstrap the app.	ng-app is removed in Angular 2. You need to call Angular2 bootstrap method to bootstrap your application.

37.How to validate an URL in Angular JS?

Adding the regex directly to the ng pattern to the attribute can help you validate the URL in Angular JS.

38.What is the use of $locale service in Angular JS?

locale service provides with the localization rules for Angular JS components.

39.What is transclusion in Angular JS?

The transclusion in Angular JS will allow you to move the original children of a directive to a specific location inside a new template.The ng directive marks the insertion point for the transcluded DOM of the very near parent directive that uses transclusion.
ng-transclude or ng-transclude-slot attribute directives are used for transclusion in Angular JS.