Top AngularJS Questions and Answers

    1 Votes

Top 60+ frequently asked AngularJS interview questions and answers for freshers and 2-5 year experienced web developers.

1) What is AngularJS?

AngularJS is developed by Google and it is an open source framework and it is used to create one page web apps or single page application using JavaScript, HTML and CSS.

2) What are the uses of AngularJS?
Below are the uses of AngularJS –
  • It uses MVC pattern.
  • Allows to create our own directive for making components reusable. 
  • Used for two way binding i.e, connecting model and view.
  • Supports Dependency Injection (DI)
3) Explain the features of AngularJS?
Below are the list of AngularJS features –
  • Model
  • View
  • Controller
  • Scope
  • Data Binding
  • Services
  • Filters
  • Directives
  • Testable
4) Explain scope in AngularJS?

Scope will act like a glue between view and controller and scopes are arranged in hierarchical structure.

5) Why the AngularJS project called “AngularJS”?

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

6) List out the advantages of AngularJS?

Below are the list of advantages of AngularJS –

  • Code Reusability
  • Data Binding
  • Testing
  • Support
  • Customize and Extensible

7) What are AngularJS Expressions?

Angular Expressions are code snippets and this usually be placed in “{{ }}”. This will be like - {{ expression }}.

8) List out the differences between java Script and angular JS expressions?

Below are the list of differences between java script and angular JS

  • In Javascript expressions are being evaluated from the global window whereas in angularJS it is being evaluated from scope object.
  • Conditions, Loops and Exceptions are not supported in AngularJS as in Javascript.

9) Explain controller in AngularJS?

Controller is constructor function in AngularJS. Controller can be attached to DOM using “ng-controller” attribute.

10) Which and all browsers support AngularJS?

All major browsers like – Chrome, Safari, Firefox, Opera 15+, IE 9+ will support AngularJS.

11) How AngularJS is used to handle the security hurdles?

Below are the list of security hurdles handled by AngularJS –

  • Used for preventing CSS attacks
  • Used for preventing XSRF protection
  • Used for preventing HTML injection

12) Explain module in AngularJS?

Modules are like namespaces in C#. Modules are used for dividing single page angular app to functional, reusable and small components and can be integrated with another angular app. Module can be assigned using “ng-app” directive.

13) How we can use JQuery with AngularJS?

AngularJS uses JQLite, which is a part or subset of JQuery library. If JQuery to be used then load the JQuery library before loading the AngularJS library.

14) Explain how we can create module and using it in AngularJS?

Below is the code snippet for creating and using module in AngularJS –

Creating a module -

<script type="text/javascript"> 
angular.module('myFirstApp', []);
angular.module('myFirstApp', ['MydependentModule1', 'MydependentModule2']);
</script>

Using the Module –

<html ng-app="'myFirstApp'"> 
<head> ... </head>
<body> ... </body>
</html>

15) Explain directive in AngularJS?

Directive are combination of javascript code and AngularJS markup. Javascript directive code defines the behaviors and template data of HTML elements. There are some built in directives like – “ng-controller”,”ng-app”, “ng-repeat” etc.


16) Explain directives – “ng-init”, “ng-model” and “ng-app” in AngularJS?

  • “ng-init” – This directive is used for initializing the angular app data.
  • “ng-model” – This directive is used to bind the html elements like – select, input, text area etc.
  • “ng-app” - This directive initializes the angular app.
17) Which is the core module of AngularJS?

“ng” is the core module of AngularJS and when angular app is started this module will be loaded by default.

18) How dependencies are loaded in AngularJS?

Dependencies are loaded using blocks – configuration and run.

19) List out the differences between config and run methods in AngularJS?

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

Eg :

angular.module('myTestModule', []).
config(function (injectables) {
// config block
}).
run(function (injectables) {
// run block
});

20) List out types of directives in AngularJS?

Below are the list of directives in AngularJS –

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

21) 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.

22) List out styling forms used with ngModel for css classes?

Below are the list of styling forms used for css classes with ngModel

  • ng-dirty
  • ng- valid
  • ng-pristine
  • ng- invalid

23) Explain prefixes – “$” and “$$” in AngularJS?

Both prefixes are used to prevent the collisions in the code.

  • “$” – Public objects uses this prefix.
  • “$$” – Private objects uses this prefix.

24) Explain filters in AngularJS?

Filters are mainly used to format the data before displaying it in the screen to the user. This can be used in services, controllers, directives and templates.

Eg: Syntax of the filter

 {{ expression | filter}}

<script type="text/javascript">
{ { 25 | currency } } //returns $25.00
</script>

25) List out few filters supported by AngularJS?

Below are few filters provided by AngularJS –

  • Date
  • Currency
  • OrderBy
  • Lowercase
  • Uppercase
  • Number etc.

26) How to define multiple restrict options on a directive in AngularJS?

We can specify multiple restrict options for supporting more than one method. All methods should specify restrict keyword like below –

restrict: 'TA'

27) Explain services in AngularJS?

Services are singleton functions or objects which are used to carry out specific tasks. It will hold the business logic, which are called as controllers, filters, directives and so on.

28) What are data bindings in AngularJS?

Data binding is the process of synchronizing of data between view and model.

29) What are the types of data binding in AngularJS?

Below are the list of types of data bindings in Angular JS

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

30) 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.

31) List out the components which can be used in AngularJS modules?

Below are the list of components –
  • Controller
  • Filter
  • Provider
  • Factory
  • Routes
  • Service
  • Directive
32) 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.

33) 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>
34) 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.

35) Can we create a custom directive in AngularJS?

Yes we can create custom directive.

36) 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>

37) 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.

38) 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.

39) 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>

40) Do I need to use Jquery in AngularJS?

No. No need to use Jquery in AngularJS.


41) How to make Http get request from AngularJS with an example?

From AngularJS we can use “$http” service. Below is the sample code for http get request –

$http.get('/MyURL').
success(function(data, status, headers, config) {
// code here
}).
error(function(data, status, headers, config) {
// code here
});
42) How to make Http Post request from AngularJS with an example?
Below is the sample code for http post request –
$http.post('/ MyURL', {msg:'hello word!'}).
success(function(data, status, headers, config) {
// code here
}).
error(function(data, status, headers, config) {
// code here
});
43) What is Dependency Injection (DI)?

Dependency Injection (DI) is the process of injecting all the dependent objects rather than creating an instance of dependent objects.

44) How Dependency Injection works in AngularJS?

As shown in the below sample code “$scope” and “$http” objects are being injected in angular framework.

module.controller('MyTestController', function ($scope, $http) { 
// injected dependencies 
});

45) Explain validations done in AngularJS?

AngularJS will leverage on HTML 5 validations. Below is the sample code for required field validation.

Product Name :- <input type=text name="ProdName" id="ProdName" required />

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) Give an example of Data binding in AngularJS?

<div ng-app="" ng-init="quantity=10;cost=5" class="ng-scope">
<b>Total Cost: {{cost * quantity}}</b>
</div>

50) List out the form events in AngularJS?

Below are the list of events in AngularJS –

  • ng-dbl-click
  • ng-click
  • ng-mouseup
  • ng-mousedown
  • ng-mouseover
  • ng-mousemove
  • ng-mouseenter
  • ng-keypress etc.

51) 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.
52) 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>
53) How to show and hide a control in AngularJS?

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

54) How to use “ng-click” directive in AngularJS?
“ng-click” directive is used for button control and below is the sample code for the same
<p>Total click: {{ totalClicks }}</p></td>
<button ng-click="totalClicks = totalClicks + 1">Click Me!</button>
55) How to embed one HTML page into other in AngularJS?
HTML will not support embedding one HTML page into other. But this can be achieved using following ways –
  • Using Server Side Includes
  • Using Ajax
56) How embedding one HTML page into other can be achieved using AJAX in AngularJS?

Server call can be done to get the HTML page from server side and set that in the InnerHTML of the control.

57) Explain RouteProvider in AngularJS?

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

58) 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.

59) Explain string interpolation in AngularJS?

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

60) 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.

61) List out the style classes which can be added with ng-model in AngularJS?

Below are the list of CSS classes which can be used for styling –

  • ng- invalid
  • ng-pristine
  • ng- valid
  • ng-dirty

62) 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>

Popular Videos

communication

How to improve your Interview, Salary Negotiation, Communication & Presentation Skills.

Got a tip or Question?
Let us know

Related Articles

HTML/HTML5 Interview Questions and Answers
JQuery Interview Questions and Answers
Javascript Interview Questions and Answers
Top 60+ Node.JS Interview Questions and answers
Top 70 CSS Interview Questions and Answers
React JS Interview Questions and Answers