Top 12 AngularJS Interview Questions and Answers with examples

By Gurunatha Dogi in AngularJS
Sep 14th, 2017
13259
0

Hey friends, I'm Gurunatha, in this article session we are going to see top most frequently asked interview questions and answers on AngularJS. This are few questions which will help you to clear your interview on Angular. If we have missed any question feel free to drop it under our comment section. If you are looking to Learn AngularJS or Angular Step by Step using free articles and videos then do visit our site where we have covered everything related to Angular 1/2/4/5. There is another version of this article where we have covered top 30 questions and answers on angular at our LearnAngularJS site.

What is the goal of Angular?

Angular is a binding framework which helps to bind HTML UI with JavaScript objects. In complicated JavaScript projects, you end up writing such kinds of below functions for binding. These functions bind the UI with JavaScript objects and vice versa.

function UitoObject() 
{
Cust.CustomerName = $("#TxtCustomerName").val();
}
function ObjecttoUi() 
{
$("#TxtCustomerName").val(Cust.CustomerName);
}

These functions become complicated as the UI gets complicated. Angular is a binding framework and makes your binding easy.

So when you use Angular you do not need to write the above complicated functions you end up writing directives as shown in the below code. The below directive "ngModel" will bind data from the textbox to the customer objects and vice versa.

<input type="text" [(ngModel)]="cust.CustomerName">

What is the difference between AngularJS and Angular?

Angular 1 is called as "AngularJS" while Angular 2 and above is termed as "Angular". So, when you say "AngularJS" you are referring the "1.X" version and when you say Angular you are talking about the new version.

How different is Angular 1.X from Angular 2.X and 4.X ?

Angular 2 is completely different from Angular 1. The syntaxes and project structure are completely different. We can not automatically migrate an Angular 1 project to Angular 2.

While Angular 2 and Angular 4 are backward compatible. Angular 2 projects can work with Angular 4 framework without any tweak.

What is NodeJs and why do we need it for Angular ?

NodeJS has something called as NPM (Node Package Manager). Using NPM we can install any JavaScript framework. So once you install node , you can go to Node command prompt and type command as shown in the below figure.

So in Angular projects NPM is used to install Angular framework.

What is the importance of package.json file ?

"package.json" file is a feature provided by Node. Rather than writing NPM commands again and again. You can create a "package.json" file listing all dependencies as shown in below code and just fire "NPM INSTALL" command. That will install all the packages mentioned in the file.

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "jquery": "^3.2.1",
    "knockout": "^3.4.2",
    "lodash": "~4.17.4"
  }
}

So how do we install Angular using NodeJs?

To install Angular you need to create a "package.json" file with all Angular dependencies listed and then do a NPM INSTALL on the folder where this file is. This file is available on the main site of Angular as well.

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/router": "4.0.0",
    "@angular/upgrade": "4.0.0",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "http-server": "^0.10.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.4.1",
    "systemjs": "0.19.27",
    "zone.js": "^0.8.4"
  }
}

Which NPM commands do you use frequently?

NPM has huge command list. In these kinds of questions interviewer is expecting you to talk about common NPM commands. So below are some important ones.

Command	Explanation
npm install -g typescript	This installs the package globally.
npm install -save jquery	This will install the package and also make a entry in "package.json" file.
npm view -version jquery npm view -versions jquery	This first command will show you latest Jquery version on github and the second one will show all version in a ascending manner.
npm install -g npm	This upgraded NPM to latest version.

What is the use of TypeScript in Angular ?

TypeScript is a transpiler over JavaScript. It provides sugar coated syntax over JavaScript where developers can apply OOP principles like class , inheritance , interfaces and so on.

Once you hit compile typescript will transpile the code to pure Javascript.

To compile code we need run "tsc" from command line.

What is the importance of tsconfig.json ?

"tsconfig.json" defines how typescript compiler will compile. Below is a simple code snippet of tsconfig file which says that compile using ES 5 specifications, remove comments and put all compiled JS files to "Shiv" directory.

{
  "compilerOptions": {
    "target": "es5",
    "removeComments": false,
    "outDir": "/Shiv"
  }
}

Explain Components and Modules and how to create them?

Components have the binding code which binds the view with the model. While modules group these components. So in complex angular project can have "Customer component" , "Customer reporting component" which is grouped in "Customer module". In the same project you can have supplier module which groups 1 or many supplier components.

What is the importance of Startup.ts file ?

In a complex angular project you can have lot of modules like home module , supplier module and so on. "Startup.ts" file states which of the module will become your startup module.

Explain how a typical angular project loads?

Angular project gets kicked from an index page which kicks of the "startup.js" file, the startup.js file kicks of the boot strapped module to which it is pointing to and the boot strapped module loads the components , the component binds the HTML with the model and loads it inside the selector of the index page.

Gurunatha Dogi

Gurunatha Dogi is a software engineer by profession and founder of Onlinebuff.com, Onlinebuff is a tech blog which covers topics on .NET Fundamentals, Csharp, Asp.Net, PHP, MYSQL, SQL Server and lots more..... read more