AngularJS Interview Questions and Answers

AngularJS Interview Questions and Answers

Last updated on 23rd Sep 2020, Blog, Interview Question

About author

Sanjay ( (Senior Architect in Angular JS, Infosys ) )

She is Possessing 10+ Years Of Experience in AngularJS. Her Passion lies in Developing Entrepreneurs & Activities. Also, Rendered her intelligence to the Enthusiastic JOB Seekers.

(5.0) | 16840 Ratings 870

To support you in this journey, we’ve drawn a list of most frequently asked AngularJS interview questions along with the answers which your interviewer expects at the time of the interview.

AngularJS is one of the most promising languages. Rich in feature set, this technology is worth working hard for. Below is the list of super 100 AngularJS interview questions and answers. These questions have been divided as per levels – beginner, intermediate, and advanced.

1. What are filters in AngularJS?

Ans:

 The main work of filters is to modify the data, so that it can be merged into an expression or directive by using a pipe character (it is used for applying filters in an angular symbol of a pipe which is (|) or this is the symbol).

 A filter formats the value of an expression for a display to the user. They can be used in view templates, controllers, or services, and we can easily create our own filter as well. A filter is a module provided by AngularJS. There are nine components of a filter which are provided by it.

Examples: currency, date, filter, JSON, limitTo, etc.

2.What is the use of a double-click event in AngularJs?

Ans:

 It allows you to specify the custom behavior on a double click event of the mouse on a web page. We can use it (ng-dblclick) as an attribute of the HTML element like,

  • <ANY_HTML_ELEMENT ng-dblclick=”{expression}”> 
  • … 
  • </ANY_HTML_ELEMENT>

3.What are the AngularJs Global API?

Ans:

It is a combination of global JavaScript functions which is used to perform tasks like comparing objects, iterating objects and converting data.

There are some common API functions like:

  • angular. lowercase: It converts a string to lowercase string.
  • angular. uppercase: It converts a string to uppercase string.
  • angular. isString: It will return true if the current reference is a string.
  • angular. isNumber: It will return true if the current reference is a number.

4. What is a provider method in AngularJs?

Ans:

A provider is an object which creates a service object by allowing it to take more control.

$get() method is used in the provider which returns the service object. The service name and the factory function are the arguments that are passed into the provider method. AngularJS uses $provide to register new providers.

Syntax:

  • serviceApp.provider(“logService”, function ())

5.What is AngularJs DOM?

Ans:

AngularJs have some directives which are used to encapsulate AngularJs application data to a disabled attribute of the HTML elements.

Example: ng-disabled directive encapsulates the application data to the disabled attributes of the HTML DOM element.

  • <div ng-app=”” ng-init=”mySwitch=true”>
  • <p>
  • <button ng-disabled=”mySwitch”>Click Me!</button>
  • </p>
  • <p>
  • <input type=”checkbox” ng-model=”mySwitch”/>Button
  • </p>
  • <p>
  • {{ mySwitch }}
  • </p>
  • </div>

6. What are the attributes that can be used during the creation of new AngularJs directives?

Ans:

There are several attributes that can be used during a new directive creation.

They include:

  1. 1. Template: It describes an inline template as a string.
  2. 2. Template URL: This attribute specifies the AngularJs HTML compiler to replace the custom directive inside a template with the HTML content located inside a separate file.
  3. 3. Replace: It replaces the current element if the condition is true if false appends this directive to the current element.
  4. 4. Transclude: It allows you to move the original children of a directive to a location inside the new template.
  5. 5. Scope: It creates a new scope for this directive rather than inheriting the parent scope.
  6. 6. Controller: It creates a controller which publishes an API for communicating across the directives.
  7. 7. Require: It requires another directive to be present to function the current directive efficiently.
  8. 8. Link: It modifies resulting in DOM element instances, adds event listeners, and sets up data binding.
  9. 9. Compile: It modifies the DOM template for features across copies of a directive, as when used in other directives. Your compile function can also return link functions to modify the resulting element instances.

7. Is AngularJS well-suited with all browsers?

Ans:

Yes, it is companionable with all browsers like Safari, Chrome, Mozilla, Opera, IE, etc. as well as mobile browsers.

8. Define services in AngularJS?

Ans:

AngularJS services are the singleton objects or functions which are used for carrying out definite tasks. It embraces some corporate ideas and these purposes can be called controllers, directive, filters and so on.

9. Explain the advantages of AngularJS?

Ans:

Advantages include:

  • It supports MVC form.
  • Organize two ways of data binding using AngularJS.
  • It supports mutual client-server communication.
  • It supports simulations.

10. What are angular filters?

Ans:

Angular filters are arguments passed to the angular expressions using pipe characters.The main use of filters is to format or alter the data and present it in a customized manner. The following in built filters are provided by angularjs framework.

Subscribe For Free Demo

Error: Contact form not found.

11. Name a few inbuilt angular filters?

Ans:

Currency, lowercase, uppercase, number, date are few inbuilt angular filters.

12. Who developed AngularJS?

Ans:

Google is the company that developed AngularJS. AngularJS is an open source project, which means it can be freely used, changed, and shared by anyone.

13.What is AngularJS?

Ans:

AngularJS is a javascript framework which helps in developing web applications in MVC architectural pattern & SPA or Single page applications. It simplifies binding of the business logic with a view.It’s an open source framework but is supported by Google.

14.What are directives in AngularJS?

Ans:

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.

AngularJS has a set of built-in directives like 

  • ngBind
  • ngModel
  • ngClass
  • ngApp
  • ngInit
  • ngRepeat

15. What are custom directives?

Ans:

Angular provides the ability to create our own directives to implement our own custom templates or logic in our web application.

16. What is the difference between ng-if, ng-show/ng-hide?

Ans:

Based on the expression’s boolean result, the ng-if directive removes or recreates the element in the dom. If the expression resolves to true it removes the element from the dom otherwise a clone of the element gets inserted.

Based on the expression’s boolean result,ng-show directive hides or shows the element in the dom. If the expression resolves to false it hides the element by adding ng-hide css class on the element otherwise the class is removed from the element.

 to new web pages etc. JQuery is a javascript library used for dom manipulations, enhancing browser compatibility and easing the front end development. AngularJS is a javascript framework which helps in developing LOB web applications in MVC.

17. What is $scope?

Ans:

$scope is the object instance of the controller, it acts as a glue between view and model. $scope is passed as an argument to the controller and is local to the controller it’s passed to. If controllers are nested, the child scope can access all the properties of parent scope.

18. What is $rootscope?

Ans:

$rootscope is the object instance of the module, it is the parent of all the scopes in an angular application. It acts as a global variable and can be accessed by any component of the web application.

19.What is the purpose of $rootscope?

Ans:

$rootScope helps in communication between different controllers of an application. AngularJS can have only one rootScope for an app.

20.Difference between $rootscope & $scope?

Ans:

$rootscope is the parent of all scopes while $scope is merely an object instance of a controller. $rootscope is global while $scope is local i.e. it’s available only to the controller it’s passed to.

21. Difference between Javascript,Jquery and AngularJS?

Ans:

Javascript is a light weight front end scripting language used for carrying out simple functions like changing colors, redirecting architectural pattern.It is idle for developing Single page applications or SPA’s.

22. What are angular expressions?

Ans:

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.

23.What is event handling in AngularJS?

Ans:

 When we want to create advanced AngularJS applications such as User Interaction Forms, then we need to handle DOM events like mouse clicks, moves, keyboard presses, change events and so on. AngularJS has a simple model for how to add event listeners. We can attach an event listener to an HTML element using one of the following AngularJS event listener directives. 

  • ng-click
  • ng-dbl-click
  • ng-mousedown
  • ng-mouseup
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-keydown
  • ng-keyup
  • ng-keypress
  • ng-change

24.Why do we need angular services?

Ans:

AngularJS achieves the separation of concerns using”Services”. Services are nothing but singleton objects which get instantiated only once in an application’s life cycle and are mainly used to separate a unit of logic which is needed almost everywhere in the application.

25. What is the language of the angular template?

Ans:

HTML programming language is used to create angular templates.

26. What is the factory method in angularjs?

Ans:

Factory method in Angularjs is a simple function that allows us to add some logic to create an object and return it. The factory is used to create reusable code.

27.What are the benefits of using AngularJS?

Ans:

1. Dependency Injection : Dependency Injection is something AngularJS does quite well. If you are new to Dependency Injection, don’t worry, we will discuss it in detail with examples in a later video.

2. Two Way Data-Binding : One of the most useful features in AngularJS is the Two Way Data-Binding. The Two Way Data-Binding, keeps the model and the view in sync at all times, that is a change in the model updates the view and a change in the view updates the model. 

3. Testing : Testing is an area where Angular really shines. Angular is designed with testing in mind right from the start. Angular makes it very easy to test any of its components through both unit testing and end to end testing. So there’s really no excuse for not testing any of your angular application code.

4. Model View Controller : With angular it is very easy to develop applications in a clean MVC way. All you have to do is split your application code into MVC components. The rest, that is managing those components and connecting them together is done by angular.

Many more benefits like controlling the behaviour of DOM elements using directives and the flexibility that angular filters provide.

28.What is a module in AngularJS?

Ans:

A module is a container for different parts of your application i.e controllers, services, directives, filters, etc. In this video we will also discuss controllers. We will discuss services, filters and directives in a later video.

29.Why is a module required?

Ans:

You can think of a module as a Main() method in other types of applications. For example, a Dot Net console application has a Main() method which is the entry point into the application and it wires together the different parts of the application.

Modules are the angular application’s equivalent of the Main() method. Modules declaratively specify how the angular application should be bootstrapped. 

30.How to create a module?

Ans:

Creating a module in angular is straightforward. Use the angular object’s module() method to create a module. The angular object is provided by angular script. The following example, creates a module. 

  • var myApp = angular.module(“myModule”, [])
  • The first parameter specifies the name of the module. 
  • The second parameter specifies the dependencies for this module
Course Curriculum

Get JOB Oriented Angular JS Training for Beginners By MNC Experts

  • Instructor-led Sessions
  • Real-life Case Studies
  • Assignments
Explore Curriculum

31.What is a controller in angular?

Ans:

In angular a controller is a JavaScript function. The job of the controller is to build a model for the view to display. The model is the data. In a real world application, the controller may call into a service to retrieve data from the database.

32.How to create a controller in angular?

Ans:

  • var myController = function ($scope)
  •  {
  •  $scope.message = “AngularJS Tutorial”;
  • }

33.Explain Data binding in AngularJS?

Ans:

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.

34.How many types of data binding in AngularJS?

Ans:

 AngularJs supports one-way binding as well as two-way binding.

AngularJS-Binding

35.What are the Binding Directives in AngularJs ?

Ans:

  • ng-bind
  • ng-bind-html
  • ng-bind-template
  • ng-non-bindable
  • ng-model

36.Why we are using AngularJS ?

Ans:

  1. 1. As we know AngularJS is based on MVC pattern; it helps us to organize our web apps or web application properly.
  2. 2. It helps to make responsive and well organized web applications that are more expansive and readable.
  3. 3. It 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. 4. AngularJS supports creating your own directive that makes reusable components to be used according to your requirement. It is also abstract DOM manipulation logic.
  5. 5. It supports services and dependency injection which we can easily inject in our controller and provides some utility code as per our requirement.

37. What are all the core features of AngularJS?

Ans:

  • Data binding — Automatic synchronization of data between model and view.
  • Directives — Extending HTML syntax to express application components clearly.
  • Controllers — Controls the data flow between model and view.
  • Services — Functions that are responsible for particular tasks and are independent of controllers.
  • Routing — Managing navigation from one component to another.
  • Dependency Injection — Software design pattern that deals with how components get holds of their dependencies.
  • Testing — Testing the app, both unit and end-to-end is very easy in AngularJS.

38.What is angular.module?

Ans:

The angular.module is a global place for creating, registering and retrieving AngularJS modules. The syntax is,

  • Var app=angular.module(“myApp”,[]);

The first parameter is the name of the app, and the second parameter is the dependencies for this module. Even if the module does not need any dependencies it should be given as empty.

An application must contain only one module declaration. If we want to reuse it in another place, we must use the module without the declaration parameter, like angular.module(“myApp”).

39.What is scope in AngularJS?

Ans:

Scopes are just plain old JavaScript objects. Scopes serve as the glue between the controller and view. They are the executing context for expressions and bindings.

Since $scope are JavaScript objects, we can add our own property and methods to them. And all properties and methods are available in the view automatically.

40.What is the use of the scope?

Ans:

  • Scopes provide separation between the model and the view
  • They are watching the model changes and react to them.
  • They also provide event emission/broadcast and subscription facilities.

41. What are controllers in AngularJS?

Ans:

Controllers in AngularJS are used to augment or help the view of an AngularJS application. It is a function that adds additional functionality to the scope of the view. It also controls the data flow between the model and view.

42. What is the difference between factory, service and provider?

Ans:

The difference between the factory and service is: factory is returning an object which is assigned to the service name, in service it is instantiated with the new keyword. They are functionally the same and doing the same task.

However, the provider is different and it implements a $get method. The injector calls this $get method to create a new instance of a service. The methods and properties that are defined inside $get are shared to the application and outside it will be encapsulated. Provides are also configurable, which is the main difference among others.

43.Mention some angularJS directives and their purpose?

Ans:

 The beauty of AngularJS directives is that they are self explanatory. By just looking at the directive name, you will get the idea about the purpose and use of directive. Below are some mostly used directives.

  1. 1. ng-app : Initializes application.
  2. 2. ng-model : Binds HTML controls to application data.
  3. 3. ng-Controller : Attaches a controller class to view.
  4. 4. ng-repeat : Bind repeated data HTML elements. Its like a for loop.
  5. 5. ng-if : Bind HTML elements with condition.
  6. 6. ng-show : Used to show the HTML elements.
  7. 7. ng-hide : Used to hide the HTML elements.
  8. 8. ng-class : Used to assign CSS class.
  9. 9. ng-src : Used to pass the URL image etc.

44.What are different types or classification of directives?

Ans:

AngularJS directives can be classified in 4 different types .

  • Element directives
  •  Attribute directives
  • <span ng-directive></span>
  • CSS class directives
  • <span class=”ng-directive: expression;”></span>
  • Comment directives

45.What are the key features/concepts of Angular.js?

Ans:

 When you start learning AngularJS, you will come across the following terms and these are the features/concept of AngularJS.

  1.  1. Scope
  2.  2. Directives
  3.  3. Expression
  4.  4. Filters
  5.  5. Data Bindings
  6.  6. Model
  7.  7. View
  8. 8.  Controller
  9. 9. Modules
  10. 10. Services
  11. 11. Dependency Injection

46. Is AngularJS a framework, library or a plugin?

Ans:

The suitable answer is that it’s a framework. As it’s lightweight, people also get confused between library and framework.AngularJS is an open source client side MVC framework for creating dynamic web applications.

47.What is routing in AngularJS?

Ans:

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

48.How to share data or state between AngularJS controllers?

Ans:

There are multiple ways to share data or state between AngularJS controllers. The most commonly used ways are Scope, Service, Factory, and Providers.

49.What are Templates in AngularJS?

Ans:

AngularJS templates are just plain old HTML that contains Angular-specific elements and attributes. AngularJS used these templates to show information from the model and controller.

50.What is View in AngularJS?

Ans:

The view is responsible for presenting your model data to the end user. A view contains HTML markup including AngularJS directives, attributes, and expressions which AngularJS parses and compiled with HTML to generate the dynamic view.

Course Curriculum

Learn Advanced Angular JS Training & Certification Course

Weekday / Weekend BatchesSee Batch Details

51.Explain Two-way Data Binding in AngularJS?

Ans:

Two-way data binding is the most popular feature of AngularJS. It is used to sync the data between model and view i.e. any change in the model will update the view and vice versa. The two-way data-binding, you can use only with form input elements using ng-model directive. It can’t be used with other elements like span, div, para, etc. which don’t accept any input from the user.

52.Distinguish between AngularJS and Angular?

Ans:

Basis of DistinctionAngular JSAngular
FeatureIt supports MVC Design Models.It uses the components and directives.
Expression SyntaxThe Specific ng directives are required for the property/image and an event.It uses () for binding an event and [] this for property binding.
LanguageThe recommended Language is JavaScriptThe recommended Language is TypeScript.
Mobile SupportAngularJS does not provide any mobile support.Angular provides mobile support.

53.Write the difference between compile and link in AngularJS?

Ans:

Compile FunctionLink Function
This is used for template DOM manipulation and this collects all the directives.This is used for registering the DOM listeners as well as the instances of DOM manipulation. If it is executed once then the template has been cloned.

54.Elucidate the Architecture of AngularJS?

Ans:

The Angular JS is architectured on three components and they are

  • The Template (View)
  • The Scope (Model)
  • The Controller (Controller)
  • Also, AngularJS extends HTML attributes with the Directives and binds data to HTML Expressions. 

55.Can we use a ternary operator in Angular Expression?

Ans:

Yes, we can use the ternary operator in an Angular Expression. Also, we could use the no flow operator in it.

  • {{name==undefined:’no name specified’?name}}

56.Explain component life cycle in Angular?

Ans:

  • Create
  • Render
  • Create and render children
  • Check for bound data changes and re-render
  • Destroy

57.What is the main difference between $scope and scope?

Ans:

 The scope is used in AngularJS for linking between the controller (like JS) and view (like HTML), while the $scope used to accomplish dependency injection

58.How are AngularJs prefixes $ and $$ used?

Ans:

The term $ used in AngularJS for denoting angular core functionalities such as a parameter, a method, or a variable.

The term $$ used in AngularJS like a private variable to get saved from accidental code collision.

59.Is AngularJs Extensible?

Ans:

Yes! In AngularJS we can create custom directive to extend AngularJS existing functionalities.

60. How to Validate Data In AngularJs?

Ans:

AngularJS enriches form filling and validation. We can use $dirty and $invalid flags to do the validations in a seamless way. Use novalidate with a form declaration to disable any browser specific validation.

Following can be used to track error.

  1. 1. $dirty − states that value has been changed.
  2. 2. $invalid − states that value entered is invalid.
  3. 3. $error − states the exact error.

61. Explain Ng-click directive?

Ans:

ng-click directive represents a AngularJS click event.
In the below example, we’ve added ng-click attribute to a HTML button and added an expression to update a model. Then we can see the variation.

  • Total click: {{ click Counter }}
    <button ng-click = “click Counter = click Counter + 1”>Click Me!</button>

62. Explain Ng-hide directive?

Ans:

ng-hide directive hides a given control.
In the below example, we’ve added ng-hide attribute to a HTML button and pass it a model. Then we’ve attached the model to a checkbox and can see the variation.

  • <input type = “checkbox” ng-model = “showHide2”>Hide Button<button ng-hide = “showHide2”>Click Me!</button>

63. Explain Ng-disabled directive?

Ans:

ng-disabled directive disables a given control.
In the below example, we’ve added an ng-disabled attribute to a HTML button and passed it a model. Then we’ve attached the model to a checkbox and can see the variation.

  • <input type = “checkbox” ng-model = “enableDisableButton”>Disable Button<button ng-disabled = “enableDisableButton”>Click Me!</button>

64.Explain Ng-show directive?

Ans:

ng-show directive shows a given control.
In the below example, we’ve added an ng-show attribute to a HTML button and passed it a model. Then we’ve attached the model to a checkbox and can see the variation.

  • <input type = “checkbox” ng-model = “showHide1”>Show Button<button ng-show = “showHide1”>Click Me!</button>

65.What is Deep Linking In AngularJs?

Ans:

Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.

66. Explain AngularJs Boot Process?

Ans:

When the page is loaded in the browser, following things happen:

  • HTML document is loaded into the browser, and evaluated by the browser. 
  • AngularJS JavaScript file is loaded; the angular global object is created. 
  • Next, JavaScript which registers controller functions is executed.
  •  Next AngularJS scans through the HTML to look for AngularJS apps and views. Once view is located, it connects that view to the corresponding controller function.
  • Next, Angular JS executes the controller functions. It then renders the views with data from the model populated by the controller. The page gets ready.

67. What is a Factory method?

Ans:

Using factory method, we first define a factory and then assign a method to it.

  • var mainApp = angular.module(“mainApp”, []);

  • mainApp.factory(‘MathService’, function() {

  •     var factory = {};
  •     factory.multiply = function(a, b) {

  •         return a * b

  •     }

  •     return factory;

  • });

68. What is a Service method?

Ans:

Using a service method, we define a service and then assign a method to it. We’ve also injected an already available service to it.

  • mainApp.service(‘CalcService’, function(MathService){   
  • this.square = function(a) {       
  • return MathService.multiply(a,a); 
  •   }
  • }
  • );

69. What is a Digest Cycle?

Ans:

During every digest cycle, all new scope model values are compared against the previous values. This is called dirty checking. If change is detected, watches set on the new model  are fired and another digest cycle executes. This goes on until all models are stable. The digest cycle is triggered automatically but it can be called manually using “.$apply()”.

70.Do AngularJS Provide any security features?

Ans:

AngularJS provides built-in protection from the following security flaws.

  • It prevents cross-site scripting attacks: Cross-site scripting is a technique where anyone can send a request from the client side and can get the confidential information easily.
  • It prevents HTML injection attacks.
  • It prevents XSRF protection for server-side communication: “Auth token” mechanism can handle it. When the user logins for the first time a user id and password is sent to the server, and it will, in turn, return an auth token. Now, this token does the authentication in the future transactions.
Amgular JS Sample Resumes! Download & Edit, Get Noticed by Top Employers! Download

71.Can we create nested controllers in AngularJS?

Ans:

Yes, we can create nested controllers in AngularJS. These controllers are defined in hierarchical manner while used in View.

72.Why is the angular.copy() method so powerful?

Ans:

The angular.copy() method is so powerful because it creates a deep copy of the variable that means it doesn’t point to the same memory reference as that variable.

Syntax:

  • angular.copy(source, [destination]);

source (*): The source is used to make a copy which can be any type including primitives, null and undefined.

destination (optional): Destination into which the source is copied. If provided, must be of the same the same type.

73.What is SPA in Angular?

Ans:

SPA stands for Single Page Application.These are web apps that load a single HTML page and dynamically update that page as the user interacts with the app. To implement SPA with Angular, we can use Angular routes.While using SPA, you don’t need to refresh the whole page.SPA has the ability to work offline because all the pages are already loaded.

74.What is REST in AngularJS?

Ans:

  • REST stands for REpresentational State Transfer.
  • It is a style of API that operates over HTTP requests.
  • It uses an Internet media type such as JSON for data interchange, standard HTTP methods (GET, PUT, POST, DELETE).
  • REST is a stateless client-server architecture in which the web services are viewed as resources and can be identified by their URIs.

75. What do you know about the singleton pattern?

Ans:

  • Singleton pattern is an approach that we adopt to limit the instantiation of a class to have only one object.
  • AngularJS services are always singletons which means that, once AngularJS constructs a service object, the same instance is reused throughout your app.
  • A service is a singleton. AngularJS instantiates the service object only once and all other components share the same instance.

76.What is the latest version of AngularJS?

Ans:

The latest version of AngularJS is version 1.7.8 as on March, 2019

The latest version of Angular is 8.2.13 as on Oct, 2019

77.Is AngularJS better than Angular?

Ans:

  • Angular is better than AngularJS as it is the next iteration in the Angular family. Every version adds on to the previous one and offers more facilities and ease of development.
  • Angular provides modularity, intuitiveness as compared to AngularJS. AngularJS is the predecessor for the Angular family.

78.Which is the most stable version of angular?

Ans:

The most stable version of Angular is the major versions being released by Google.

The major releases of Angular are

  • Version 2
  • Version 4
  • Version 6
  • Version 7
  • Version 8

79.What is the auto bootstrap process in AngularJS?

Ans:

Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is downloaded to the browser and the document.readyState is set to complete. At this point AngularJS looks for the ng-app directive which is the root of angular app compilation and tells about AngularJS part within DOM. When the ng-app directive is found then Angular will:

  1. 1. Load the module associated with the directive.
  2. 2. Create the application injector.
  3. 3. Compile the DOM starting from the ng-app root element. This process is called auto-bootstrapping.

80.What is the manual bootstrap process in AngularJS? (OR) How AngularJS is initialized manually?

Ans:

You can manually initialize your angular app by using angular.bootstrap() function. This function takes the modules as parameters and should be called within angular.element(document).ready() function. The angular.element(document).ready() function is fired when the DOM is ready for manipulation.

81.What is scope hierarchy?

Ans:

The $scope objects used by views in AngularJS are organized into a hierarchy. There is a root scope, and the $rootScope can have one or more child scopes. Each controller has its own $scope (which is a child of the $rootScope), so whatever variables you create on $scope within the controller, these variables are accessible by the view based on this controller.

82.How AngularJS is compiled?

Ans:

Angular’s HTML compiler allows you to teach the browser new HTML syntax. The compiler allows you to attach new behaviors or attributes to any HTML element. Angular calls these behaviors as directives. AngularJS compilation process takes place in th

e web browser; no server side or pre-compilation step is involved. Angular uses $compiler service to compile your angular HTML page. The angular compilation process begins after your HTML page (static DOM) is fully loaded. It happens in two phases:

  1. 1. Compile – It traverses the DOM and collects all of the directives. The result is a linking function.
  2. 2. Link – It combines the directives with a scope and produces a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model.

The concept of compile and link comes from C language, where you first compile the code and then link it to actually execute it. The process is very much similar in AngularJS as well.

83.Where should we implement the DOM manipulation in AngularJS?

Ans:

In the directives. DOM Manipulations should not exist in controllers, services or anywhere else but in directives.

84.How would you specify that a scope variable should have one-time binding only?

Ans:

By using “::” in front of it. This allows the check if the candidate is aware of the available variable bindings in AngularJS.

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

Ans:

  •  One way binding implies that the scope variable in the html will be set to the first value its model is bound to (i.e. assigned to)
  • Two way binding implies that the scope variable will change it’s value every time its model is assigned to a different value

86.What is angular.element() in AngularJS?

Ans:

jQuery lite or the full jQuery library if available, can be accessed via the AngularJS code by using the element() function in AngularJS. Basically, angular.element() is an alias for the jQuery function. i.e;

  • angular.element() === jQuery() === $()

87.What is the size of an angular.js file?

Ans:

The size of the compressed and minified file is < 36KB.

88.Why to use “$http” in AngularJS?

Ans:

  • “$http” is used as an AngularJS service to read data from a remote server.
  • “$http.get(url)” method is used for this purpose by specifying the url as a parameter.

89. Is AngularJS a templating system?

Ans:

No, it is not. Of course, at the top level, the AngularJS looks like a templating system, although the main reason why the AngularJS templating system is different is bidirectional data binding. The template is being compiled in the browser and this step provides developers to get a live view, without constantly syncing the view with the model.

90.Is an open-source Closure Library compatible with AngularJS?

Ans:

Yes, it is. For example, you can use widgets from the Closure Library in AngularJS.

91.How to implement routing in AngularJS?

Ans:

It is a five-step process:

Step 1: Add the “Angular-route.js” file to your view.

Step 2: Inject “ngroute” functionality while creating an Angular app object.

Step 3: Configure the route provider.

Step 4: Define sections where to load the view.

92.What IDEs can you use for AngularJS development?

Ans:

AngularJS development can be done with the help of following IDEs:

Visual Studio 2012, 2013, 2015 or higher

  • Eclipse
  • WebStorm
  • Sublime Text
  • TextMate

93.What is the difference between AJAX and AngularJs?

Ans:

AJAX stands for Asynchronous JavaScript which is used for sending and getting responses from the server without loading the page.Whereas, AngularJS is a typescript language-based JavaScript framework following the MVC pattern.

94.How to set, get and clear cookies in AngularJs?

Ans:

AngularJS has a module called ngCookies, so before injecting ngCookies angular-cookies.js should be included into the application.

Set Cookies – Put method is used to set cookies in a key-value format.

  • $cookies.put(“username”, $scope.username);
  • Get Cookies – Get method is used to get cookies.
  • $cookies.get(‘username’);
  • Clear Cookies – Remove method is used to remove cookies.
  • $cookies.remove(‘username’);

95. What is internationalization in AngularJS?

Ans:

Internalization in Angular is a way of showing locale-specific information on a website. This method is used to create multilingual websites.

96. How do you set up an Angular app?

Ans:

  • 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

97. Explain the difference between AngularJS and backbone.js?

Ans:

AngularJS supports individual functionalities and combines other functionalities-mostly from third-party websites, required in the development of HTML5 Apps. On the other hand, backbone.js does these functions individually.

98.Why the AngularJS project called “AngularJS”?

Ans:

The reason is HTML will have an angle bracket “<”, “>” and “ng” sounds like “Angular”. So it is being called AngularJS.

99.How dependencies are loaded in AngularJS?

Ans:

Dependencies are loaded using blocks – configuration and run.

100. List out the differences between config and run methods in AngularJS?

Ans:

  • Config Block – Constants and providers can be injected into config blocks and this block can be created using config method.
  • Run Block – Run block will be executed after config block. Run block is used to inject constants and instances and this block can be created using run method.

Are you looking training with Right Jobs?

Contact Us

Popular Courses