Angularjs Interview questions

Get Technical Answers for Angularjs Interview Questions by Angularjs Developer, Advanced technical questions for Freshers and Experience Persons. Get Free practical test

1. List out the difference between Angular and AngularJS?

Ans:  

AngularJS:

  • AngularJs architecture is based on MVC architecture.
  • Applications are built using JavaScript.
  • It is purely based on the concept of “Scope” or “Controller”.
  • In AngularJS, code can be written by using ES5, ES6, and Dart. 
  • AngularJS works on client-side applications like HTML/javascript.

Angular:

  • Angular architecture is based on Service/Controller.
  • Applications are built using TypeScript.
  • It is based on hierarchy components.
  • In Angular, code can be written by using ES5, ES6, TypeScript.
  • Angular 2 works on both server-side and client-side applications.

2. What is the Angular framework?

Ans: It is a typescript and an open-source web application maintained by Google and a community of individuals. Angular provides a platform to develop web-based applications. It integrates a range of features such as dependency injection, end to end tooling, declarative templates and various other features that helps to smoothen the development path. 

3. How would you cache an observable data?

Ans: The following things should be implemented for caching in observables.

  • An injectable cache service.
  • Ability to set an expiration for each item.
  • An Observable based service.
  • Ability to track on the fly requests such that duplicate requests are not made.

4. How would you implement multiple API calls that need to happen in order using rxjs?

Ans: The following methods implement multiple API calls for using rxjs.

Method 1:

this.http.get('/api/url').subscribe(data => {

this.http.get(/api/url/data).subscribe(data1 => {

// code goes here

});

});

Method 2:

Using "MergeMap"

this.http.get('/api/url').pipe(

mergeMap(character => this.http.get(character.homeworld))

);

5. What is TypeScript?

Ans: Typescript is an open-source programming language led by Microsoft, and it is a structural superset that adds optional classes, types, and many other features. The typescript compiler is itself written the code in the typescript and compiled in the Javascript. It is used to develop Javascript applications for both client-side and server-side execution. Typescript is a primary language for angular apps development, and you can install it as globally by using the following syntax: 

npm install -g typescript

Let’s look at an example. 

function greeter(Name: string)

{

    return "Hai, " + Name;

}

let user = "Surya";

document.body.innerHTML = greeter(user);

6. List out hooks available in AngularJS.

Ans: The various hooks available in AngularJS are.

1) ngOnInit()

2) ngOnChanges(),

3) ngDoCheck(),

4) ngAfterContentInit(),

5) ngAfterContentChecked(),

6) ngOnDestroy(),

7) ngAfterViewChecked(), and

8) ngAfterViewInit().

7. Explain Angular Authentication and Authorization?

Ans: 

Authentication: Authenticate API is used for verifying the user login credentials which are present in the server. After validation is completed, it returns JWT (JSON Web Token) to the users. The JWT token contains the information of the current user and it identifies the users. This is called authentication. 

Authorization: Every user has a different level of accessing resources. While some users have access to all the resources, others may have access for only a few files or resources. This is called authorization. 

In order to build authentication, on the client we need to build the login page and on the server, we should build an API endpoint to validate the user. When the user clicks on the login button.

We have the perfect professional Angular js Tutorial for you. Enroll now!

8. Explain the differences between AngularJS and JQuery?

Ans:

Angular:

  • The understanding of AngularJs is hard.
  • AngularJs supports two-way binding and deep linking routing.
  • The components in AngularJs are the building blocks for UI in the application.

JQuery:

  • The understanding of JQuery is easy.
  • The data binding process and deep linking routing are not supported in JQuery.
  • The components of JQuery are Jquery UI elements that consist of the set of effects, user interface, themes, and widgets on the top of the Jquery javascript libraries.

9. What is Data Binding? How many ways can it be done?

Ans: Data binding is a powerful and essential feature in any software development process. It allows communication between view and component. The following are the different types of data binding:

  • Event binding: It is defined as sending/updating the information of certain variables from view to the component. 
  • Property binding: It is defined as updating the information/values of a certain variable from component to view. 
  • Two-way binding: It is a combination of event and property binding. Two-way binding is defined as updating the values or information from components to view and from view to the component. 

10. How to perform animation in Angular?

Ans: Animations are implemented using the angular library known as Animate Library. The user must include this library for applying animations effects in an angular application. The users should refer to the “ngAnimate” module in the application or add if the application has a name, add “ngAnimate” as a dependency inside the application module.

Angular Library:



src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angul

r-animate.js>



11. How do you unit test a service with a dependency?

Ans: 

Using TestBed

TestBed.configureTestingModule({

providers: [AuthService]

});

12. What is string interpolation in Angular?

Ans: In angular, string interpolation is a syntax which is used for displaying the component data on the HTML template at the end-user. It allows the users to fetch the data from the HTML template file and also to make changes on the “component.ts” file. It is represented with the double curly braces ({{ }} ).

13. Differentiate between one-way binding and two-way data binding?

Ans:

One-way data-binding: 

  • In one-way data-binding, the UI or view part doesn’t update systematically whenever the data model changes. In order to update the changes, the users must write the custom code.
  • The data flows only from objects to UI but not vice-versa. 

Two-way data-binding: 

  • In two-way binding, the UI or view part is updated automatically whenever the data model changes. Unlike one-way binding, two-way data-binding is a synchronization process.
  • The data flow between the object to UI and also vice-versa. 

14. What Is Use Of $routeprovider In Angular Js?

Ans: $routeProvider is the key service which set the configuration of urls, maps them with the corresponding html page or ng-template, and attaches a controller with the same.

Explore Angularjs Sample Resumes! Download & Edit, Get Noticed by Top Employers !Download Now!

15. What is ngOnInit ()? How to define it?

Ans: The “ngOnInit()” method is a lifecycle hook. It is called after the completion of initializing all data-bound properties of a directive. It is defined as:

Interface OnInit

 {

   ngOnInit () : void

}

Angular js Certification Training

  • Master Your Craft
  • Lifetime LMS & Faculty Access
  • 24/7 online expert support
  • Real-world & Project Based Learning

 


16. What is a module?

Ans: In angular, a module is a process of grouping the directives, pipes, services, and components that are related, in such a way that they can blend with other modules for creating an application. 

Instance: 

The “app.module.ts” root module is declared with “@NgModule” decorator as shown in the sample code below.

import { NgModule }      from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

 @NgModule ({

   imports:      [ BrowserModule ],

   declarations: [ AppComponent ],

   bootstrap:    [ AppComponent ]

})

export class AppModule { }

17. What are pipes in AngularJs?

Ans: In angular, pipes are used for transforming the data in a simple way. Pipes takes the input values such as integers, arrays, strings, data and is separated with the pipe ”|” symbol for converting the data in the required format, and it displays the same in the browser. In angular, there are some in-built pipes, but you can also develop your own pipes. 

Instance: 

The below code clearly shows you the difference. 

Save the following code as “app.component.html”

import { Component } from '@angular/core';

@Component({

   selector: 'app-root',

   templateUrl: './app.component.html',

   styleUrls: ['./app.component.css']

})

 export class AppComponent {

   title = 'Hai Hkr Trainings!';

}

The following lines of code go into the “app.component.html” file.

{{title | uppercase}}


{{title | lowercase}}

18. Describe how will you set, get and clear cookies, in Angular?

Ans: For using cookies in Angular, the “ngCookies” module must be included in  “angular-cookies.js”.

To set Cookies: To set up the format of the cookie, the “put” method is applied in a key-value.

cookie.set('nameOfCookie',"cookieValue");

To get Cookies: To retrieve the cookies “get” method is applied.

cookie.get(‘nameOfCookie’);

To clear Cookies: To remove the cookies “remove” method is applied.

cookie.delete(‘nameOfCookie’);

19. Explain the AngularJS boot process?

Ans: The following process would take place when the page is loaded in the browser.

  • The HTML document of the page is loaded and is evaluated by the web browser. A Javascript file is then loaded and a global object is created. Later controller functions are executed, which are registered by Javascript.
  • Here the Javascript scans views and apps through HTML, once the view is scanned, then it is connected with the controller function.
  • Then “AngularJs” shows the controller functions with views and data handled by the controller. Finally, the page gets ready.

20. Explain the auto bootstrap process in AngularJS.

Ans: 

  • Angular initializes “DOMContentLoaded” event automatically or when you download “angular.js” script from the browser.
  • After this, AngularJS finds the root directive “ng-app” of angular app compilation. 
  • When “ng-app” directive is found, AngularJS performs the following steps:
    1. Loads the module, which is associated with the directive.
    1. Creates the application injector.
    2. Compiles the DOM from the “ng-app” root element. This process is known as auto bootstrapping.

21. Write a program to bootstrap the process in Angular.

Ans: 

<html>

    <body ng-app="TestApp">

        <div ng-controller="Ctrl">Hi{{msg}}!</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"> 

</script>

         <script>

            var test = angular.module('TestApp', []);

            test.controller('Ctrl', function($scope) {

                $scope.msg = 'Good Morning';

            });

        </script>

    </body>

</html>



        

    

22. What is meant by Angular Global APIs?

Ans: Angular Global API is a combination of global JavaScript functions for performing various common tasks such as

  • Comparing objects
  • Iterating objects
  • Converting data

There are some common Angular Global API functions like:

  • angular. lowercase: Converts a string to lowercase string.
  • angular. uppercase: Converts a string to uppercase string.
  • angular. isString: Returns true if the current reference is a string.
  • angular. isNumber: Returns true if the current reference is a number.

23. Can we create nested controllers in AngularJS?

Ans: Yes. Nested controllers can be created in AngularJs.

Example: 

<div ng-controller="MainCtrl">

 <p>{{msg}} {{name}}!</p>

<div ng-controller="SubCtrl1">

<p>Hi {{name}}!</p>

   <div ng-controller="SubCtrl2">

     <p>{{msg}} {{name}}! Your name is {{name}}.</p>

   </div>

</div>

</div>

24. List out the difference between Angular Component and Directive.

Ans: 

Component:

  • A component is a directive with a view.
  • Components are the specific type of directive which enables to utilize the functionalities of web components throughout the application.
  • Components divide the application into smaller components.
  • Components can be used to define the pipes.
  • A component can be present per DOM element.

Directive:

  • A directive is a decorator without a view.
  • A directive is a mechanism by which we attach behaviour to the elements.
  • Directives are used for designing the reusable components.
  • Directives cannot define the pipes. 
  • A directive is used to add behaviour to the existing DOM element.

Subscribe to our youtube channel to get new updates..!

 


25. Explain the main difference between AngularJS and backbone.js.

Ans: 

AngularJS:

  • AngularJS is a JavaScript-based open-source framework which is designed for supporting dynamic web applications.
  • AngularJs provides a two-way data binding process and makes the performances better.
  • It works on MVS (Multiple Virtual Storage).
  • AngularJS uses dynamic HTML attributes to make an easy understanding of an application.
  • AngularJS has large community support.

Backbone.js:

  • It is a framework which abstracts DOM into views and data into models and then binds both of them by using events.
  • This technology performs faster than “AngularJS” if the data sets are small.
  • Backbone.js works on MVP architecture.
  • It uses underscore templates to understand the application.
  • Community support is restricted to the underscore template.

26. What is ViewEncapsulation and how many ways are there to do it in Angular?

Ans: ViewEncapsulation identifies the component styles and illustrates whether a particular component will have an effect over the entire application or not. It also enables users to use the DOM shadow. Angular provides three types of ViewEncapsulation.

  1. ViewEncapsulation.none: It defines the component style that is visible to all components of the application.
  2. ViewEncapsulation.emulated: The styles in this type are used in other HTML, spread the components.
  3. ViewEncapsulation.native: The styles in this type are used in other HTML but don’t spread the components.

27. Why use ng-include in AngularJS?

Ans: Ng-include in AngularJS enables the users to embed HTML pages within a single HTML page.

<div ng-app = "" ng-controller = "interviewController">

   <div ng-include = "'first.htm'"></div>

   <div ng-include = "'phases.htm'"></div>

</div>

28. How can you make an ajax call using AngularJS?

Ans: AngularJS offers $https: control which helps users to make ajax call to read server data. The server makes a database call in order to get the required records. Once the data in JSON format is ready, users can use $https: to retrieve data from the server in the following manner:

function employeeController($scope,$https:) {

   var url = "tasks.txt";

   $https.get(url).success( function(response) {

      $scope.employee = response; 

  });

}

29. How can you integrate AngularJS with HTML?

Ans: These are steps which are followed while integrating AngularJS with HTML.

Step 1: Include AngularJS JavaScript in HTML page.



<script

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">



Step 2: Point out the AngularJS application.

Add the “ng-app” attribute inside the HTML body tag to tell what part of HTML AngularJS app has as shown in the following example.

<body ng-app = "testapp">

</body>



30. What are the important differences between Angular 7 and Angular 8?

Ans: 

Angular 7:

  • Angular 7 is difficult to use.
  • Angular 7 provides support for the lower version of Typescript 3.4 programming language.
  • Supports all versions of Node.js.

Angular 8:

  • Angular 8 is very easy to use.
  • Angular 8 does not provide support for the lower version of Typescript 3.4 programming language.
  • Supports only Node.js 12 version.

31. What is the orderby filter in AngularJS?

Ans: Orderby filter in AngularJS orders the array based on specified criteria. The following example states how you can order the product by price.

<ul>

<li ng-repeat = "company in product.products | orderBy:'price">

      {{ company.product + ', price:' + product.price }}

   </li>

</ul>

32. What Is Angular Js?

Ans: Angular JS is a framework to build large scale and high performance web application while keeping them as easy-to-maintain.

Following are the features of Angular JS framework.

1.Angular JS is a powerful JavaScript based development framework to create RICH Internet Application (RIA).

2.Angular JS provides developers options to write client side application (using JavaScript) in a clean MVC (Model View Controller) way.

3.Application written in Angular JS is cross-browser compliant. Angular JS automatically handles JavaScript code suitable for each browser.

4.Angular JS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0 


Interested in learning Angular js Course ? Enroll in our Angular js Certification Training program now!

33. What Are The Services In Angular Js?

Ans: Angular JS come with several built-in services. For example $http service is used to make XMLHttpRequests (Ajax calls). Services are singleton objects which are instantiated only once in app.

34. What Are The Filters In Angular Js?

Ans: Filters select a subset of items from an array and return a new array. Filters are used to show filtered items from a list of items based on defined criteria.

35. Explain Directives In Angular Js.

Ans: Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. Angular JS has built-in directives (ng-bind, ng-model, etc) to perform most of the task that developers have to do.

Angular js Certification Training

Weekday / Weekend Batches

 


36. Explain Templates In Angular Js.

Ans: Templates are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using “partials”.

37. What Is Routing In Angular Js?

Ans: It is concept of switching views. Angular JS based controller decides which view to render based on the business logic.It is concept of switching views. Angular JS based controller decides which view to render based on the business logic.

38. What Is Deep Linking In Angular Js?

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.

39. What Are The Advantages Of Angular Js?

Ans: Advantages of Angular JS:

1.Angular JS provides capability to create Single Page Application in a very clean and maintainable way.

2.Angular JS provides data binding capability to HTML thus giving user a rich and responsive experience.

3.Angular JS code is unit testable.

4.Angular JS uses dependency injection and make use of separation of concerns.

5.Angular JS provides reusable components.

6.With Angular JS, developer writes less code and gets more functionality.

7.In Angular JS, views are pure html pages, and controllers written in JavaScript do the business processing.

8.Angular JS applications can run on all major browsers and smart phones including Android and iOS based phones/tablets.

40. How To Implement Internationalization In Angular Js?

Ans: Angular JS supports inbuilt internationalization for three types of filters currency, date and numbers. We only need to incorporate corresponding js according to locale of the country. By default it handles the locale of the browser. For example, to use Danish locale, use following script

41. What Is Internationalization?

Ans: Internationalization is a way to show locale specific information on a website. For example, display content of a website in English language in United States and in Danish in France.

42. How To Validate Data In Angular Js?

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

Following can be used to track error.

dirty − states that value has been changed.

invalid − states that value entered is invalid.

error − states the exact error.

43. What Is A Service?

Ans: Services are JavaScript functions and are responsible to do specific tasks only. Each service is responsible for a specific task for example, $http is used to make ajax call to get the server data. $route is used to define the routing information and so on. Inbuilt services are always prefixed with $ symbol.

Submit an interview question

Categories

Request for more information

Tabres
Tabres
Servicenow All Softwares & Other IT technologies Specialist
My name is tabres Am from hkr trainings I have good knowledge about the cloud computing services. I have been working on this field more than 10 years. Being here it is good opportunity because possibilities for enterprise engagement and as well as chance to attract with very good PhD students. Cloud computing has become one of the most used structures to installation High Availability (HA) solutions for its flexibility, and elasticity. Connect with me LinkedIn and twitter. Thank you

WhatsApp
To Top