Interview Questions

Demo Video Course Content Interview Questions

                                    

1.Explain data binding in AngularJS.?

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:

  1. Data mining in classical template systems
  2. Data binding in angular templates

2. Name the key features of AngularJS?

The key features of AngularJS are:

  • Scope
  • Controller
  • Model
  • View
  • Services
  • Data Binding
  • Directives
  • Filters

3. What are directives in AngularJS?

A core feature of AngularJS,directives are attributes that allow you to invent new HTML syntax, specific to your application. They are essentially functions that execute when the Angular compiler finds them in the DOM.  Some of the most commonly used directives are ng-app,ng-controller and ng-repeat.

The different types of directives are:

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

4.What are Controllers in AngularJS?

Controllers are Javascript functions which provide data and logic to HTML UI. As the name suggests, they control how data flows from the server to HTML UI.

5. What is Angular Expression? How do you differentiate between Angular expressions and JavaScript expressions?

Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to JavaScript.

The main differences between Angular expressions and JavaScript expressions are:

  • Context : The expressions are evaluated against a scope object in Angular, while Javascript expressions are evaluated against the global window
  • Forgiving: In Angular expression, the evaluation is forgiving to null and undefined whereas in JavaScript undefined properties generate TypeError or ReferenceError
  • No Control Flow Statements: We cannot use loops, conditionals or exceptions in an Angular expression
  • Filters: In Angular unlike JavaScript, we can use filters to format data before displaying it

6.What is the difference between AngularJS and backbone.js?

AngularJS combines the functionalities of most third party libraries and supports individual functionalities required to develop HTML5 Apps.  While Backbone.js does these jobs individually.

7.Explain what is injector in AngularJS?

An injector is a service locator, used to retrieve object instance as defined by provider, instantiate types, invoke methods, and load modules.

8.What is factory method in AngularJS?

Factory method is used for creating a directive.  It is invoked when the compiler matches the directive for the first time. We can invoke the factory method using $injector.invoke.

Syntax: module.factory( ‘factoryName’, function );

Result: When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory.

9.What is ng-app, ng-init and ng-model?

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

10.Does Angular use the jQuery library?

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

11.Can AngularJS have multiple ng-app directives in a single page?

No. Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. If another ng-app directive has been placed then it will not be processed by AngularJS and we will need to manually bootstrap the second app, instead of using second ng-app directive.

12.Can angular applications (ng-app) be nested within each other?

No. AngularJS applications cannot be nested within each other.

13.What is internationalization and how to implement it in AngularJS?

Internationalization is a way in which you can show locale specific information on a website. AngularJS supports inbuilt internationalization for three types of filters: currency, date and numbers. To implement internalization, we only need to incorporate corresponding js according to locale of the country. By default it handles the locale of the browser.

14.On which types of component can we create a custom directive?

AngularJS provides support to create custom directives for the following:

Element directives − Directive activates when a matching element is encountered.

Attribute − Directive activates when a matching attribute is encountered.

CSS − Directive activates when a matching css style is encountered.

Comment − Directive activates when a matching comment is encountered.

15.What is $rootscope in AngularJS?

Every application has a single root scope. All other scopes are descendant scopes of the root scope. Scopes provide separation between the model and the view, via a mechanism for watching the model for changes. They also provide event emission/broadcast and subscription facility.

16.What is the difference between link and compile in Angular.js?

  • Compile function is used for template DOM Manipulation and to collect all the directives.
  • Link function is used for registering DOM listeners as well as instance DOM manipulation and is executed once the template has been cloned.

17.What are the characteristics of ‘Scope’?

Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events. The characteristics of Scope are:

  • Scopes provide APIs ($watch) to observe model mutations.
  • Scopes provide APIs ($apply) to propagate any model changes through the system into the view from outside of the “Angular realm” (controllers, services, Angular event handlers).
  • Scopes can be nested to limit access to the properties of application components while providing access to shared model properties. Nested scopes are either “child scopes” or “isolate scopes”. A “child scope” (prototypically) inherits properties from its parent scope. An “isolate scope” does not. See isolated scopes for more information.
  • Scopes provide context against which expressions are evaluated. For example {{username}} expression is meaningless, unless it is evaluated against a specific scope which defines the username property.

18.What are the advantages of using Angular.js framework?

Angular.js framework has the following advantages:

  • Supports two way data-binding
  • Supports MVC pattern
  • Support static template and angular template
  • Can add custom directive
  • Supports REST full services
  • Supports form validations
  • Support both client and server communication
  • Support dependency injection
  • Applying Animations
  • Event Handlers
  • angularjs interview questions

19. Can we have nested controllers in AngularJS?

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

20. What is bootstrapping in AngularJS?

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

  • Automatic Bootstrapping: this is done by adding ng-app directive to the root of the application, typically on the tag or tag if you want angular to bootstrap your application automatically. When angularJS finds ng-app directive, it loads the module associated with it and then compiles the DOM.
  • Manual Bootstrapping: Manual bootstrapping provides you more control on how and when to initialize your angular App. It is useful where you want to perform any other operation before Angular wakes up and compile the page.

21. What does SPA (Single Page Application) mean? How can we implement SPA with Angular?

Single Page Applications (SPAs) are web apps that load a single HTML page and dynamically update that page as the user interacts with the app. In an SPA the page never reloads, though parts of the page may refresh. This reduces the round trips to the server to a minimum.

It’s a concept where we create a single shell page or master page and load the webpages inside that master page instead of loading pages from the server by doing post backs. We can implement SPA with Angular using Angular routes. You can read up about SPAs here.

22. Why AngularJS?

AngularJS lets us extend HTML vocabulary for our application resulting in an expressive, readable, and quick to develop environment . Some of the advantages are:

  • MVC implementation is done right.
  • It extends HTML using directives, expression and data binding techniques to define a powerful HTML template.
  • Two way data-binding, form validations, routing supports, inbuilt services.
  • REST friendly.
  • Dependency injection support.

    It helps you to structure and test your JavaScript code.

23. Is AngularJS compatible with all browsers?

Yes AngularJS is compatible with the following browsers: Safari, Chrome, Firefox, Opera 15, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).

24. How to implement routing in AngularJS?

It is a five-step process:

  • Step 1: – Add the “Angular-route.js” file to your view.
  • Step 2: – Inject “ngroute” functionality while creating Angular app object.
  • Step 3: – Configure the route provider.
  • Step 4: – Define hyperlinks.
  • Step 5: – Define sections where to load the view.

25. Explain $q service, deferred and promises.?

  • ‘Promises’ are post processing logics which are executed after some operation/action is completed whereas ‘deferred’ is used to control how and when those promise logics will execute.
  • We can think about promises as “WHAT” we want to fire after an operation is completed while deferred controls “WHEN” and “HOW” those promises will execute.
  • “$q” is the angular service which provides promises and deferred functionality.

These are some of the frequently asked AngularJS interview questions with answers. You can brush up on your knowledge of AngularJS with these blogs. You can also access a tutorial here.

Feeling overwhelmed with all the questions the interviewer might ask in your AngularJS interview? It’s never too late to strengthen your basics. Learn from industry experts on how to use AngularJS in real life use cases via a structured course.

26. What Is AngularJS?

  • It has been developed by one of the biggest technology giants Google. It is a JavaScript framework that helps you to create dynamic Web applications.
  • It supports to use HTML as the template language and enables the developer to create extended HTML tags that help to represent the application’s components more clearly. These tags make the code efficient by reducing the lines of code that a developer may need to write when using JavaScript.
  • It is open-source and licensed under the Apache License version 2.0.
  • It helps to develop a maintainable architecture that is easy to test at the client-end.

27. What Are The Main Features Of AngularJS?

Here is the list of AngularJS features that makes it the hottest tech for web dev.

  • Data-binding – Handles synchronization of data across model, controllers, and view.
  • Scope – Object representing the model, acts as a glue layer between controller and view.
  • Controllers – JS functions bound to the scope object.
  • Services – Substitutable objects that are wired together using dependency injection. e.g. $location service.
  • Filters – Formats the value of an expression for displaying to the user. e.g., uppercase, lowercase.
  • Directives – These are extended HTML attributes start with the “ng-” prefix. e.g., ng-app directive used to initialize the angular app.
  • Templates – HTML code including AngularJS specific elements and attributes.
  • Routing – It’s an approach to switch views.
  • MVC pattern – A design pattern made up of three parts.
  • Model – Represents data, could be static data from a JSON file or dynamic data from a database.
  • View – Renders data for the user.
  • Controller – Gives control over the model and view for collating information to the user.
  • Deep linking – Enables the encoding of the application state in the URL and vice versa.
  • Dependency injection – A design pattern to let the components injected into each other as dependencies.

28. List Down The Popular AngularJS IDE Plugins/Extensions For Web Development?

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

29. Explain The Steps Involved In The Boot Process For AngularJS?

Whenever a web page loads in the browser, following steps execute in the background.

  • First, the HTML file containing the code gets loaded into the browser. After that, the JavaScript file mentioned in the HTML code gets loaded. It then creates a global object for angular. Now, the JavaScript which displays the controller functions gets executed.
  • In this step, AngularJS browses the complete HTML code to locate the views. If the same is available, then Angular links it to the corresponding controller function.
  • In this step, AngularJS initiates the execution of required controller functions. Next, it populates the views with data from e model identified by the controller. With this the page is ready.

30.What Browsers Do AngularJS Support?

AngularJS works fine with the latest versions of Safari, Chrome, Firefox, Opera 15+, and IE9+ (Internet Explorer).

It also supports various mobile browsers like Android, Chrome Mobile, iOS Safari, and Opera Mobile.

Note: Versions 1.3 and later of AngularJS dropped support for Internet Explorer 8.

31. What Are The Security Features Provided By AngularJS?

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 client side and can get the confidential information easi
  • 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.

32. What are the disadvantages of AngularJS?

  • JavaScript Dependent: If end user disables JavaScript, AngularJS will not work.
  • Not Secured: It is JavaScript based framework so it is not safe to authenticate user through AngularJS only.

33. What are services in AngularJS?

Services are objects that can be used to store and share data across the application. AngularJS offers many built-in services such as $http i.e. used to make XMLHttpRequest.

34. Explain injector in AngularJS?

Injector is service locator and it’s used for retrieving object instances as defined by instantiate types, provider and load modules.

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

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

36. List out the components which can be used in AngularJS modules?

Below are the list of components –

  • Controller
  • Filter
  • Provider
  • Factory
  • Routes
  • Service
  • Directive

37. Which is the core module in AngularJS?

“ng” is the core module in AngularJS and this module will be loaded by default when angular application has started.

38. How looping has been done in AngularJS?

Looping can be achieved like below in AngularJS –

<ul>

<li data-ng-repeat=”mytestname in names”>

{{ mytestname }}

</li>

</ul>

39. Explain factory methods in AngularJS?

Factory methods are used for creating a directive. It can be invoked only once that is when compiler matches the directive.

40. Can we create a custom directive in AngularJS?

Yes we can create custom directive.

41.How to load select box during page initialization using AngularJS?

Below is the sample code to initialize the select box using AngularJS –

<div ng-controller = “mycontroller” ng-init = “loaddataforselectBox()”>

</div>

42. How AngularJS will automatically be initialized?

AngularJS will be initialized during “DOMContentLoaded” event or during the angular.js file download to browser. Now AngularJS looks for directive – “ng-app”, which is a root compilation for AngularJS.

43. What is the difference between Rootscope and Scope in AngularJS?

  • Rootscope – Rootscope is the top most scope and one application can have an only one rootscope and will be shared among all the components.
  • Scope – Scope will act like a glue between view and controller and scopes are arranged in hierarchical structure.

44. Give an example for Rootscope in AngularJS?

Rootscope acts like a global variable and below is the sample code for the same –

<html>

<body ng-app=”mytestApp”>

<div ng-controller=”MyFirstController” style=”border:2px solid blue; padding:5px”>

Hi {{mymsg}}!

<br />

Hi {{myname}}! (rootScope)

</div>

<br />

<div ng-controller=”MySecondController” style=”border:2px solid green; padding:5px”>

Hello {{mymsg}}!

<br />

Hi {{name}}! (rootScope)

</div>

<script src=”/lib/angular.js”></script>

<script>

var app = angular.module(‘mytestApp’, []);

app.controller(‘MyFirstController’, function ($scope, $rootScope) {

$scope.msg = ‘Good Morning’;

$rootScope.name = ‘Test My scope’;

});

app.controller(‘MySecondController’, function ($scope, $rootScope) {

$scope.msg = ‘Good Night’;

$scope.CheckName = $rootScope.name;

});

</script>

</body>

</html>

45. Do I need to use Jquery in AngularJS?

No. No need to use Jquery in AngularJS.

46. How we can check for errors for specific field in AngularJS?

Using “$valid” property we can check the validity of the form inside “ng-app” directive.

47. Explain Two-way binding in AngularJS?

“ng-model” is being used for two-way model binding. Whenever any change in the model, view will be updated automatically and vice versa.

Eg:

<input type=”text” ng-model=”mytestname” />

48. Explain One-way binding in AngularJS?

This type of binding is being introduced in angularJS version – 1.3 and double colon – “::” is used for one-time expression. Below is the example of using it –

Eg : {{:: mytestname }}

49. What are the ways to track the error in AngularJS?

Below are the ways to track the error in AngularJS –

  • $error – This will state the exact error.
  • $dirty – This will indicate if the value is being changed.
  • $invalid – This will indicate in case the value entered is wrong or invalid.

50. How to display the values in tables in AngularJS?

Below is the sample code for showing the data in table –

<table>

<tr>

<th>Product Name</th>

<th>Product Type</th>

</tr>

<tr ng-repeat=”product in category.products”>

<td>{{ product.name }}</td>

<td>{{ product.type }}</td>

</tr>

</table>

51.How to show and hide a control in AngularJS

ng-show” and “ng-hide” directives are being used for sh“owing and hiding the controls respectively.

52. Explain RouteProvider in AngularJS?

RouteProvider is a key service for setting configuration urls and we can map them to coresponsing HTML pages.

53. Explain how routing works in AngularJS?

Routing enables to create different URL for different content in our application. Different content for different URL enables to bookmark the URL of specific content and this is called route and this mechanism is called routing.

54. Explain string interpolation in AngularJS?

In AngularJS compilation, attributes and text matches using interpolation services to check whether they contain any embedded expressions.

55.Explain the difference between compile and link in AngularJS?

  • Compile : This function is used for DOM manipulation and for collecting the directives.
  • Link : This function is used for registering the DOM listeners and instance of DOM manipulation. This will executed only once during template clone.

56. How to dynamically disable the button control in AngularJS?

Below is the sample code to disable the button control based on the checkbox selected –

<div ng-app=”” ng-init=”isDisable=true”>

<p>

<button ng-disabled=”isDisable”>Click Me!</button>

</p>

<p>

<input type=”checkbox” ng-model=”isDisable”/>Button

</p>

</div>

57.Explain the concept of scope hierarchy? How many scope can an application have?

Each angular application consist of one root scope but may have several child scopes. As child controllers and some directives create new child scopes, application can have multiple scopes. When new scopes are formed or created they are added as a children of their parent scope. Similar to DOM, they also creates a hierarchical structure.

58. Explain what is the difference between AngularJS and backbone.js?

AngularJS combines the functionalities of most of the 3rd party libraries, it supports individual functionalities required to develop HTML5 Apps.  While Backbone.js do their jobs individually.

59. Explain what is DI (Dependency Injection ) and how an object or function can get a hold of its dependencies ?

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 which is required to be configured when module gets loaded , the operation “config” uses dependency injection.

These are the ways that object uses to hold of its dependencies

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

60. Mention what are the characteristics of “Scope”?

  • To observer model mutations scopes provide APIs ($watch)
  • To propagate any model changes through the system into the view from outside of the Angular realm
  • A scope inherits properties from its parent scope, while providing access to shared model properties, scopes can be nested to isolate application components
  • Scope provides context against which expressions are evaluated