As you already know that AngularJS is an open source JavaScript based web application framework. It was originally released in 2012 and till now it has been updated several times and each update give us a new version of AngularJS. It is the front end part of the MEAN stack. It is so popular because of its Single Page Application(SPA) development technique. It gives a unique idea of developing websites on a single page with routing concept, which makes execution fast and load time less.
If you have decided to work on this platform, it is the best opportunity for you because there is plenty of work in MEAN stack these days that’s why companies are hiring employees in bulk who have good knowledge of MEAN stack. Here we are providing you topmost AngularJS interview questions which will help you to crack the interview.
Top 10 AngularJS Interview Questions with Answers
Q1. What is the meaning of SPA? Write code to implement it in AngularJS.
A. SPA means Single Page Application. In this concept you create a master page or shell page and load the all other pages inside this shell page without loading the page from server again and again. It reduces the burden of server and makes the loading of pages fast. We implement this concept using Angular routing. Below is the code to implement it:
Routing:
var scotchApp = angular.module('scotchApp',['ngRoute']);
scotchApp.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'pages/home.html',
controller:'mainController'
})
.when('/about',{
templateUrl:'pages/about.html',
controller:'aboutController'
})
.when('/contact',{
templateUrl:'pages/contact.html',
controller:'contactController'
})
});
Q2. What is two-way data binding in AngularJS?
A. When you change the data in model, the output in view also changes that means the data binding is synchronized between the model and view in AngularJS, which is called two-way data binding. For example, when you define a text box with ng-model directive, and define its output in an expression then on typing the text in text-box, output will affect immediately. This is the simplest example of two-way binding.
Q3. What are services in AngularJS?
A. These are similar to functions or objects and are used to perform some specific tasks and these are can be called as filters, directives, controllers etc. You can use some built-in services and also make your own according to your requirement in coding.
Q4. Define $scope in AngularJS.
A. Scope is an object which refers model and it works between view and controller as glue. So it is the main part of Angular which completes MVC in it.
Also Read:
How to Earn Money Online Without Paying Anything?
How to Track Lost iPhone or iPad Without Any App?
How to Stop Ads on My Android Phone Home Screen
Q5. Define all core directives in AngularJS.
A. There are three core directives in AngularJS, and these are:
- ng-app directive: It is used to link the Angular application with HTML. It is must for all Angular applications. It also shows the start of an Angular application.
- ng-model directive: It links the HTML input controls to the Angular Application.
- ng-bind directive: It is used to bind the HTML tags with Angular application.
Q6. What is MVC?
A. Full form of MVC is Model View Controller and is a software design pattern to develop web applications. It consists the following components:
- Model: It maintains the data of web application and is the lowest level of MVC.
- View: It is visible part of the application that means responsible for displaying data to the user.
- Controller: It is the coding part which controls the interactions between model and view.
Q7. Define expressions in AngularJS.
A. Expressions are same as the JavaScript code snippets and written in the double braces like:
{{expression}}. AngularJS can have a number of valid expressions like string, objects, array etc. For example:
{{ 5+6 }} (numbers){{Name + " " + email}} (string){{ Book.Name }} (object){{ test[4] }} (array)
Q8. What is factory method in AngularJS?
A. The role of factory method in AngularJS is same as the services, but in this case we create a fresh object and add functions to it, and at the end we return the value of this object. It is just a collection of functions similarly to a class.
Q9. What are ng-click and ng-dblclick directives in AngularJS?
A. There are lots of inbuilt directives in AngularJS. These two directives do the same task, one responds on single click and second responds on double click. After click they define the custom behavior on elements. They are defined in code as:
ng-click:
<div ng-app="kk" ng-controller="mainController">
<button ng-click="click()"> Click Me </button>
</div>
<script>
var app = angular.module("kk", []);
app.controller("mainController", function($scope)
{
$scope.click = function()
{
alert('Action Performed');
} });
</script>
On single click it will alert “Action Performed”.
ng-dblclick:
This directive also works similar to ng-click but it responds on double click, coding will be same for this directive.
Q10. What are main differences between AngularJS and JQuery?
A. Followings are the differences between these two:
- First of all, AngularJS supports two-way data binding, which is absent in JQuery
- Secondly JQuery doesn’t support MVC pattern but Angular supports it very well
- JQuery doesn’t support deep linking routing whereas AngularJS supports
- AngularJS has RESTful API but JQuery doesn’t have it
- JQuery files are lighter than Angular files so that we use AngularJS for only heavy web applications
Post for You: Top 10 Best Android Games of All Time