AngularJS Coding Interview Questions And Answers Pdf

1. What is the controller?
Answer:

  1. As the name suggests, the controller controls the flow of data in the application.
  2. It is defined using the ng-controller directive.
  3. A controller is a JavaScript object, it contains the properties and functions.
  4. Inside each controller, $scope is the parameter which refers to model and controllers control these models.

2. What is a controller in AngularJS?
Answer: A controller is a set of JavaScript functions which is bound to a specified scope, the ng-controller directive.

3. How do you disable a button depending on a checkbox’s state?
Answer: Using the ng-disabled directive.

4. What is Representational State Transfer (REST) in AngularJS?
Answer: 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.

5. What are the attributes which can be used during the creation of a new AngularJS Directives?

Answer: Restrict, Template URL, Template, Replace, Transclude, Scope, Require, Controller, Link and Compile.
These are some of the popular questions asked in AngularJS interviews. Always be prepared to answer all types of questions — technical skills, interpersonal, leadership or methodology. If you are someone who has recently started your career in web development, you can always get certified in one of the technical courses like AngularJS to get the requisite coding skills and methodologies.

6. AngularJS Factory?
Answer: Value Service is simple to write, but they may lack many essential features. So, the next service type we will look at is “Factory” service. After its creation, we can even inject other services into it. Unlike Value service, we cannot add any dependency to it.

Let’s take an example to create a Factory service.

app.factory(“username”,function(){
var name=”John”;
return {
name:name

The above code shows that Factory service takes “function” as an argument. We can inject any number of dependencies or methods in this “function” as required by this service. This function must return some object. In our example, it returns an object with the property name. Now, let us look, as to how we can use this service:

Code to use “Factory”:

The function returns an object from service which has a property name so we can access it and use it anywhere. Let’s see how we can use it in the controller:

app.controller(“MainController”,function($scope, username)
$scope.username=username.name;

We are assigning the username from factory service to our scope username.

7. How can you decrease the digest cycle time?
Answer: Digest cycle time can be decreased by decreasing the number of watchers.

8. How do you share data between controllers?
Answer: By creating an AngularJS service that will hold the data and inject it inside of the controllers.

9. Name the types of linking function?
Answer: The two types of linking functions are pre-linking function and post-linking functions.

10. What is the SPA (Single page application) in AngularJS?
Answer: 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.

11. Which directive is used to hide elements from the HTML DOM by removing them from that DOM and not changing their styling?
Answer:

of Directive

12. When should you use an attribute versus an element?
Answer: An attribute is used when we are decorating an existing element with new functionality.

An element is used when we are creating a component that is in control of the template.

13. What is DDO (Directive Definition Object)?
Answer: DDO is an object used while creating a custom directive.

14. What is the Provider Method in AngularJS?
Answer: The Module.provider method allows taking more control over the way that a service object is created or configured.

15. Explain what is scope in AngularJS?
Answer: The application model is referred to as scope, which acts between the application controller and the view, in order to connect them. Scopes can watch expressions and propagate events and are arranged in the hierarchical structure which can also impersonate the Document Object Model(DOM) structure of the application.

16. Is AngularJS a framework, library or a plugin?
Answer: AngularJS is an open source client-side MVC framework for creating dynamic web applications.

17. Explain what is services in AngularJS?
Answer: The services in SVR Technologies are the singleton objects or functions, used for carrying out specific tasks. Angular JS holds business logic and these functions are known as controllers, directive, filters and so on.

18. What is string interpolation in Angular.js?
Answer: Using interpolate service, the compiler matches the text and attributes in the compilation process in order to check the embedded expressions. These expressions are updated and registered as watches, as a part of the normal digest cycle.

19. Explain the concept of scope hierarchy? How many scopes can an application have?
Answer: Each angular application consists of a root scope but can have several child scopes. The application can have multiple scopes as child controllers and directives create new child scopes. When new scopes are created they are added as children of their parent scope, they also create a hierarchical structure similar to DOM.

20. Explain what is a factory method in AngularJS?
Answer: The factory method is used for creating the directive. When compiler matches the directive for the first time, the factory method is invoked once. The factory method is invoked using $injector.invoke.

21. What is the model?
Answer:

  1. Model is JavaScript object and it binds view data into the model through the directives such as text field, text area and selects, etc.
  2. It provides validation behaviors by required, number, URL, email, min and max length, etc.

22. Global variables in AngularJS?
Answer: You’ve got basically 2 options for “global” variables:
use a$rootScope https://docs.angularjs.org/api/ng.$rootScope
use a servicehttps://docs.angularjs.org/guide/services
$rootScope is a parent of all scopes so values exposed there will be visible in all templates and controllers. Using the $rootScope is very easy as you can simply inject it into any controller and change values in this scope. It might be convenient but has all the problems of global variables.
Services are singletons that you can inject to any controller and expose their values in a controller’s scope. Services, being singletons are still ‘global’ but you’ve got far better control over where those are used and exposed.
Using services is a bit more complex, but not that much, here is an example:
var myApp = angular.module(‘myApp’,[]);
myApp.factory(‘UserService’, function() {

23. How does the $resource `get` function work synchronously in AngularJS ?
Answer: $resource is not synchronous although this syntax might suggest that it is:

$scope.twitterResult = $scope.twitter.get();
What is going on here is that call to the AngularJS will after calling to twitter.get(), return immediately with the result being an empty array. Then, when the async call is finished and real data arrives from the server, the array will get updated with data. AngularJS will simply keep a reference to an array returned and will fill it in when data are available.
Here is the fragment of $resource implementation where the “magic” happens https://github.com/angular/angular.js/blob/master/src/ngResource/resource.js#L372

This is described in the $resource documentation as well:

It is important to realize that invoking a $resource object method immediately returns an empty reference (object or array depending on isArray). Once the data is returned from the server the existing reference is populated with the actual data. This is a useful trick since usually the resource is assigned to a model which is then rendered by the view. Having an empty object results in no rendering, once the data arrives from the server then the object is populated with the data and the view automatically re-renders itself showing the new data. This means that in most case one never has to write a callback function for the action methods.

24. Distinguish between factory, service & provider?
Answer:

Factory: When you’re using a Factory you create an object, add properties to it, then return that same object. When you pass this service into your controller, those properties on the object will now be available in that controller through your factory.

Service: When you’re using Service, it’s instantiated with the ‘new’ keyword. Because of that, you’ll add properties to ‘this’ and the service will return ‘this’. When you pass the service into your controller, those properties on ‘this’ will now be available on that controller through your service.

Providers: Providers are the only service you can pass into your .config() function. Use a provider when you want to provide a module-wide configuration for your service object before making it available.

25. Explain what are directives? Mention some of the most commonly used directives in AngularJS application?
Answer: Anything that introduces new syntax, are called directives. They are like markers on the Document Object Model(DOM) element that incorporates a special behavior to it. Directives are the most important components in AngularJS application. Some of the commonly used directives are ng-model, ng-bind, ng-repeat ng-App, ng-show, etc.

26. Explain what is the injector?
Answer: An injector is a service locator as defined by a provider, instantiate types, invoke methods and load modules. The injector is used to retrieve object instances. The single injector present per Angular application helps to lookup an object instance by its name.

27. Who created Angular JS?
Answer: Initially, Angular JS was developed by Misko Hevery and Adam Abrons and later developed by Google.

28. How to make an ajax call using Angular JS?
Answer: To make ajax call, AngularJS provides ‘$https’ control which provides the service to read data from the server. A database call initiates the server to fetch the desired records. Once the data is ready, $https can be used to get the data from the server in the following manner:

functionstudentController($scope,$https)
varurl=”data.txt”;
$https.get(url).success(function(response){
$scope.students= response;

29. What is the use of $routeProvider in AngularJS? What is $rootScope ?
Answer: $routeProvider is the key service which sets the configuration of URLs, attaches a controller with the same and maps them to the corresponding HTML page or ng-template,

The scope is a special JavaScript object, that contains the model data. The role of joining the controller with the views is done by scope. Model data is accessed via $scope object In controllers. $rootScope is the parent of all of the scope variables. 

30. What is DI (Dependency Injection) and how an object or function can get a hold of its dependencies?
Answer: DI or Dependency Injection is a software design pattern that deals with how code gets hold of its dependencies. In order to retrieve elements of the application, the operation “config” uses dependency injection which is required to be configured when the module gets loaded.

The ways that object used to hold of its dependencies are:

  • Typically, dependency can be created using the new operator.
  • Dependency can be looked up, by referring to a global variable.
  • Dependency can be passed to where it is required.

31. Explain directives? What are inbuilt directives available in AngularJS?
Answer:

  1. AngularJS extends Html with new attributes called directives.
  2. Directives attach special behavior to DOM elements.
  3. Commonly used directives are ng-App, ng-controller, ng-model, ng-bind, ng-repeat, ng-show, ng-disable, etc. We can use our own customized directives too.

32. What are the different types of directives?
Answer: There are four types of directives available in AngularJS.

  • Element directives.
  • Attribute directives.
  • CSS class directives.
  • Comment directives

33. What are the advantages of using AngularJS?
Answer:

  1. Supports MVC design pattern.
  2. Can do two ways of data binding.
  3. It has pre-defined form validations.
  4. Supports filters.
  5. Can add custom directive.
  6. Support dependency injection.
  7. Supports REST full services.
  8. Supports animations.

34. List Down The Popular AngularJS IDE Plugins/Extensions For Web Development?
Answer: Here is a list of IDE Plugins and Extensions which can enhance the way you code with AngularJS:

  • Sublime Text
  • WebStorm
  • Eclipse
  • Netbeans
  • Visual Studio 2012/2013 Express or higher
  • TextMate
  • Brackets
  • `ATOM

35. What Is the Singleton Pattern? How Does Angular Use It?
Answer: A singleton pattern is an approach that we adopt to limit the instantiation of a class to have only one object. In Angular, the dependency injection and the services implement the singleton pattern.

Technically, if we call the “new Class()” two times without following the singleton pattern, the outcome will be two objects of the same class. Whereas a singleton enabled class will create the object first time and return the same object onwards.

36. Does Angular use the jQuery library?
Answer: Yes, Angular can use jQuery if it’s present in the app when the application is being bootstrapped. If jQuery is not present in the script path, Angular falls back to its own implementation of the subset of jQuery that we call SQLite.

37. What is the role of ng-app, ng-init and ng-model directives?
Answer:

  • ng-app: Initialize the angular app.
  • ng-init: Initialize the angular app data.
  • ng-model: Bind the HTML elements like input, select, text area to angular app model.

38. What is $ digest?
Answer: This function iterates through all watches and checks if any of the watched variables has changed. If a watched variable has changed, a corresponding listener function is called. The listener function does whatever work it needs to do.

Thus, the $digest() function is what triggers the data binding to update

39. When To Use Factory?
Answer: It is just a collection of functions, like a class. Hence, it can be instantiated in different controllers when you are using it with a constructor function.

40. Explain AngularJS Application Life-Cycle?
Answer: Understanding the life cycle of an AngularJS application makes it easier to learn about the way to design and implement the code. The apps life cycle consists of the following three phases- bootstrap, compilation, and runtime.
These three phases of the life cycle occur each time a web page of an AngularJS application gets loaded into the browser. Let’s learn about each of the three stages in detail:

  • The Bootstrap Phase – In this phase, the browser downloads the AngularJS javascript library. After this, AngularJS initializes its necessary components and the modules to which the ng-app directive points. Now that the module has loaded, required dependencies are injected into it and become available to the code within that module.
  • The Compilation Phase – The second phase of the AngularJS life cycle is the HTML compilation stage. Initially, when a web page loads in the browser, a static form of the DOM gets loaded. During the compilation phase, this static DOM gets replaced with a dynamic DOM which represents the app view. There are two main steps – first, is traversing the static DOM and collecting all the directives. These directives are now linked to the appropriate JavaScript functionality which lies either in the AngularJS built-in library or custom directive code. The combination of directives and the scope, produce the dynamic or live view.
  • The Runtime Data Binding Phase – This is the final phase of the AngularJS application. It remains until the user reloads or navigates to a different web page. At this point, any changes in the scope get reflected in the view, and any changes in the view are directly updated in the scope, making the scope the single source of data for the view.

This shows that AngularJS behaves differently from traditional methods of binding data. The traditional methods combine a template with data, received from the engine and then manipulate the DOM each time there is any change in the data.

However, AngularJS compiles the DOM only once and then links the compiled template as necessary, making it much more efficient than the traditional methods.

41. Explain AngularJS Scope Life-Cycle?
Answer: After the angular app gets loaded into the browser, scope data passes through different stages called as its life cycle. Learning about this cycle helps us to understand the interaction between scope and other AngularJS components.

The scope data traverses through the following phases.

  • Creation – This phase initializes the scope. During the bootstrap process, the $injector creates the root scope of the application. And during template linking, some directives create new child scopes. A digest loop also gets created in this phase that interacts with the browser event loop. This loop is responsible for updating DOM elements with the changes made to the model as well as executing any registered watcher functions.
  • Watcher registration – This phase registers watchers for scope created in the above point. These watches propagate the model changes to the DOM elements, automatically. We can also register our own watcher’s on a scope by using the $watch() function.
  • Model mutation – This phase occurs when there is any change in the scope data. When we do any modification in the angular app code, the scope function <$apply()> updates the model and then calls the <$digest()> function to update the DOM elements and the registered watches. However, when we change the scope of the angular code like within controllers or services, angular internally calls <$apply()> function for us. But, when we do the changes to the scope outside the angular code, we have to call the <$apply()> function explicitly on the scope, to force the model and DOM to be updated correctly.
  • Mutation observation – This phase occurs, when the digest loop execute the $digest() function at the end of $apply() call. When the $digest() function executes, it evaluates all watches for model changes. If there is a change in the value, $digest() calls the $watch listener and updates the DOM elements.
  • Scope destruction – This phase occurs when the child scopes that are no longer needed, are removed from the browser’s memory by using the $destroy() function. It is the responsibility of the child scope creator to destroy them via scope.$destroy() API. This stops the propagation of $digest calls into the child scopes and enables the browsers’ garbage collector to reclaim the unused memory.

42. What is $https and $log services in AngularJS?
Answer: 1. $https service is a core Angular service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object or via JSONP

2. $log services for logging. Default implementation safely writes the message into the browser’s console

43. When should we use an attribute versus an element in custom directives?
Answer:

  1. Need to use an element when we are creating a component that is in control of the template.
  2. And use an attribute when we are decorating an existing element with new functionality.

44. Explain The Reasons That Compel A Web Developer To Choose AngularJS For His Web Development Project?
Answer: Following are some of the key reasons to choose AngularJS as your web development framework:

  • It uses an MVC design pattern which allows segregating an application into different components (called Model, View, and Controller) thus making it easy to maintain.
  • It allows the HTML to extend by adding directives to the HTML markup. This feature helps in defining dynamic templates which can include new attributes, tags, and expressions.
  • It allows the creation of user-defined directives and reusable components. These directives help the developer to concentrate on creating logic, thus enabling them to work efficiently.
  • It supports two-way data binding, i.e., enables automatic synchronization of data between model and view components. Thus, any update in the model gets reflected in the view automatically. And there is no need to add any Javascript code or event listeners to reflect the data changes.
  • It encapsulates the behavior of your application in controllers which gets instantiated with the help of dependency injection.
  • It supports built-in services to perform routine tasks for web applications. For example, it provides $https service to communicate with the REST service.
  • It makes the development and testing of the application’s JavaScript code easy.
  • Also, AngularJS has a mature community to help developers. It has broad support over the internet.

45. When creating a directive, it can be used in several different ways in the view. Which ways for using a directive do you know? How do you define the way your directive will be used?
Answer: When you create a directive, it can be used as an attribute, element or class name. To define which way to use, you need to set the restrict option in your directive declaration.

The restrict option is typically set to:

‘A’ – only matches attribute name ‘E’ – only matches element name
‘C’ – only matches the class name

These restrictions can all be combined as needed:

‘AEC’ – matches either attribute or element or class name

For more information, feel free to check out the AngularJS documentation.

46. Explain data binding in AngularJS?
Answer: According to AngularJS.org, “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.”

There are two ways of data-binding:

  • Data mining in classical template systems
  • Data binding in angular templates

47. What are the basic steps to unit test an AngularJS filter?
Answer:
Inject the module that contains the filter.

Provide any mocks that the filter relies on.

Get an instance of the filter using $filter(‘yourFilterName’).

Assert your expectations.

Dependency injection is a powerful software design pattern that Angular employs to compose responsibilities through an intrinsic interface. However, for those new to the process, it can be puzzling where you need to configure and mock these dependencies when creating your isolated unit tests. The open-source project “Angular Test Patterns” is a free resource that is focused on dispelling such confusion through high-quality examples.

This question is useful since it can give you a feel for how familiar the candidate is with automated testing (TDD, BDD, E2E), as well as open up a conversation about approaches to code quality.

48. Is it a good or bad practice to use AngularJS together with jQuery?
Answer: It is definitely a bad practice. We need to stay away from jQuery and try to realize the solution with an AngularJS approach. jQuery takes a traditional imperative approach to manipulate the DOM, and is an imperative approach, it is up to the programmer to express the individual steps leading up to the desired outcome.

AngularJS, however, takes a declarative approach to DOM manipulation. Here, instead of worrying about all of the steps by step details regarding how to do the desired outcome, we are just declaring what we want and AngularJS worries about the rest, taking care of everything for us.

49. How would you specify that a scope variable should have one-time binding only?
Answer: By using “::” in front of it. This allows you to check if the candidate is aware of the available variable bindings in AngularJS.

Explain how $scope.$apply() works

$scope.$ apply re-evaluates all the declared ng-models and applies the change to any that have been altered (i.e. assigned to a new value) Explanation: scope.scope.apply() is one of the core angular functions that should never be used explicitly, it forces the angular engine to run on all the watched variables and all external variables and apply the changes on their values.

50. What are the advantages of AngularJS?
Answer: allows us to create a single page application
follows MVC pattern
predefined form validations
supports animation
open source
cross-browser compliant
supports two-way data binding
its code is unit-testable

51. What is the usage of controllers in AngularJS?
Answer:

AngularJS Controllers are used to:

Set up the initial state of the $scope object, and
Add behavior to the $scope object.

52. What is AngularJS and what are some of its advantages?
Answer: This question might seem basic at first glance, but what you’re really doing is giving the developer a chance to show you what they know about your chosen framework. AngularJS is a powerful JavaScript-based development framework designed to create dynamic single-page applications with fewer lines of code. Some of the key advantages that you’ll want to look for in their response are listed below.

  • Data binding is as easy as writing in your code.
  • AngularJS was made for CRUD applications, which happen to represent the majority of web apps (excluding DOM manipulation-intensive applications like games and GUI editors).
  • It separates DOM manipulation from app logic, making code modular and easy to test.
  • It’s a comprehensive client-side solution in that it decouples the client-side from the server-side development effort.
  • It saves months of development time by freeing the developer from having to write repetitive low-level DOM manipulation tasks, manually registering callbacks, and otherwise automating most AJAX application tasks.
  • It’s great for providing a “desktop-like” experience to the end-user.

53. What is dependency injection and how does it work?
Answer: AngularJS was designed to highlight the power of dependency injection, a software design pattern that places an emphasis on giving components of their dependencies instead of hard coding 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.

Note: Browse latest AngularJs Interview Questions and Angular Tutorial Videos. Here you can check Angular Training details and Angularjs Training Videos for self learning. Contact +91 988 502 2027 for more information.

Related Posts

Leave a Comment

Scroll to Top