More than 50 Most Common asked Interview Questions on AngularJS for Job Interview in Top Companies.
What is AngularJS?
AngularJS is a framework to build large scale and high performance web application while keeping them as easy-to-maintain. Following are the features of AngularJS framework.- AngularJS is a powerful JavaScript based development framework to create RICH Internet Application (RIA).
- AngularJS provides developers options to write client side application (using JavaScript) in a clean MVC (Model View Controller) way.
- Application written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser.
- AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.
What is data binding in AngularJS?
Data binding is the automatic synchronization of data between model and view components. ng-model directive is used in data binding.What is scope in AngularJS?
Scopes are objects that refer to the model. They act as glue between controller and view.What are the controllers in AngularJS?
Controllers are JavaScript functions that are bound to a particular scope. They are the prime actors in AngularJS framework and carry functions to operate on data and decide which view is to be updated to show the updated model based data.What are the services in AngularJS?
AngularJS 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.What are the filters in AngularJS?
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.What is routing in AngularJS?
It is concept of switching views. AngularJS based controller decides which view to render based on the business logic.What is deep linking in AngularJS?
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.Which are the core directives of AngularJS?
Following are the three core directives of AngularJS.- ng-app − This directive defines and links an AngularJS application to HTML.
- ng-model − This directive binds the values of AngularJS application data to HTML input controls.
- ng-bind − This directive binds the AngularJS Application data to HTML tags.
What are AngularJS expressions?
Expressions are used to bind application data to html. Expressions are written inside double braces like {{ expression}}. Expressions behave in same way as ng-bind directives. AngularJS application expressions are pure JavaScript expressions and outputs the data where they are used.How to make an ajax call using Angular JS?
AngularJS provides $http control which works as a service to make ajax call to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format. Once the data is ready, $http can be used to get the data from server in the following manner:functionstudentController($scope,$http){
varurl="data.txt";
$http.get(url).success(function(response){
$scope.students= response;
});
}
What is use of $routeProvider in AngularJS?
$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.What is $rootScope?
Scope is a special JavaScript object which plays the role of joining controller with the views. Scope contains the model data. In controllers, model data is accessed via $scope object. $rootScope is the parent of all of the scope variables.What is a service?
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.What are the differences between service and factory methods?
factory method is used to define a factory which can later be used to create services as and when required whereas service method is used to create a service whose purpose is to do some defined task.What is provider?
provider is used by AngularJS internally to create services, factory etc. during config phase(phase during which AngularJS bootstraps itself). Below mention script can be used to create MathService that we've created earlier. Provider is a special factory method with a method get() which is used to return the value/service/factory.//define a module
varmainApp=angular.module("mainApp",[]);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide){
$provide.provider('MathService',function(){
this.$get=function(){
var factory ={};
factory.multiply=function(a, b){
return a * b;
}
return factory;
};
});
});
What is AngularJS? Can you explain it technically?
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.
AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.
Features:
- AngularJS is a powerful JavaScript based development framework to create RICH Internet Application(RIA).
- AngularJS provides developers options to write client side application (using JavaScript) in a clean MVC(Model View Controller) way.
- Application written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser.
- AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0. Overall, AngularJS is a framework to build large scale and high performance web application while keeping them as easy-to-maintain
Explain AngularJS boot process?
Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is downloaded to the browser and the document.readyState is set to complete. At this point AngularJS looks for the ng-app directive which is the root of angular app compilation and tells about AngularJS part within DOM. When the ng-app directive is found then Angular will:1. Load the module associated with the directive.
2. Create the application injector.
3. Compile the DOM starting from the ng-app root element.
This process is called auto-bootstrapping.
Example:
<html>
<body ng-app="myApp">
<div ng-controller="Ctrl"> Hello {{msg}}! </div>
<script src="lib/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl', function ($scope) {
$scope.msg = 'World';
});
</script>
</body>
</html>
Explain what is directive and mention what the different types of Directive in AngularJS?
AngularJS directives are extended HTML attributes with the prefix ng-.- ng-app − This directive starts an AngularJS Application.
- ng-init − This directive initializes application data.
- ng-model − This directive binds the value of HTML controls (input, select, textarea) to application data.
- ng-repeat − This directive repeats html elements for each item in a collection.
Explain all the below given key features of AngularJS
a. Scope: Scope is a JavaScript object that refers to the application model. It acts as a context for evaluating angular expressions. Basically, it acts as glue between controller and view. Scopes are hierarchical in nature and follow the DOM structure of your AngularJS app. AngularJS has two scope objects: $rootScope and $scope.b. Controller: AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is defined using ng-controller directive. A controller is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.
c. Model: Models are plain old JavaScript objects that represent data used by your app. Models are also used to represent your app's current state.
d. View: The view is responsible for presenting your models data to end user. Typically it is the HTML markup which exists after AngularJS has parsed and compiled the HTML to include rendered markup and bindings.
e. Services: Services are singletons, which are objects that are instantiated only once per app (by the $injector). They provide an interface to keep together methods that relate to a specific function. AngularJS provides many inbuilt services for example, $http, $route, $window, $location etc. 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.
f. Data-binding: AngularJS data-binding is the most useful feature which saves you from writing boilerplate code (i.e. the sections of code which is included in many places with little or no alteration). Now, developers are not responsible for manually manipulating the DOM elements and attributes to reflect model changes. AngularJS provides two-way databinding to handle the synchronization of data between model and view.
g. Directives: Directives might just be the killer feature of AngularJS. Directives allow us to extend the grammar of the web through reusable HTML elements, attributes, and classes. AngularJS directives are extended HTML attributes with the prefix ng-.
h. Filters: Filters are used to change modify the data and can be clubbed in expression or directives using pipe character. AngularJS filters can be used to transform data:
1.currency -Format a number to a currency format.
2. filter - Select a subset of items from an array.
3. lowercase - Format a string to lower case.
4. orderBy - Orders an array by an expression.
5. uppercase - Format a string to upper case.
What are the key differences between AngularJS and jQuery?
FrameworkIf you compare jQuery and Angular, the former is a library and the latter is a framework. You can plug the library in your project and either use it fully, partially or not use it all. It’s like a plugin, a supplement to your JS project. With a framework – you have to play by its rules, either use it fully or don’t use it all. Angular.js is a MVC framework, it has model, view and controller which is one of the most popular software development architectures today. When developing with Angular, you have to start from the ground up with your architecture in mind. Although it’s possible to add Angular to your existing project, it’s just add more complexity in the long run.
Don’t use Angular the jQuery way
There are thousands of jQuery plugins out there, it’s very to just plug something in and forget about it. Angular has different structure, it’s recommended to use directives instead. Try to develop “the angular way” instead of just patching the code with old good plugins. It’s not even necessary to add jQuery to your project, Angular comes with jqLite (simplified version of jQuery for basic DOM manipulation).
Single page application
The architecture of the Angular app is different, most of them are single page applications (SPA). Instead of loading all the code at once like we do with jQuery and showing and hiding different parts of the DOM, we load templates on demand (using http requests). That way the application stays more modular and easier to maintain, debug or update. I like the approach where you create controller, module, HTML template and CSS file for every view in your app.
Data Binding
Data binding is one of the best features in Angular.js (one way or two way binding). This makes data completely independent from the presentation, unlike in jQuery where your model (data) is the DOM. For example, data comes from HTTP request (http module), it’s added to the scope ($scope.data) in controller and rendered in HTML template as {{ data }}.
This way you as a developer know where data is coming from and where you need to go to make any changes. In jQuery if you have something like $(‘#data’).render(); it may render a whole new page and you won’t event know what it is or where this content came from.
Summary
Angular doesn’t replace jQuery, it doesn’t compete with jQuery, they both can be used in the same application. jQuery for DOM manipulation, Angular – for structure. In fact there is nothing better to do DOM manipulation than jQuery.
What is deep linking in AngularJS?
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.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.min.js"></script>
</head>
<body>
<div ng-app="DeepLinking">
[ <a href="#/welcome">Welcome</a> | <a href="#/settings">Settings</a> ]
<hr/>
<div ng-view></div>
</div>
<script type="text/javascript">
angular.module('DeepLinking', ["ngRoute"])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/welcome', {
template: '<html><body>Welcome!</body></html>'
})
.when('/settings', {
template: '<html><body>Settings</body></html>'
});
}]);
</script>
</body>
</html>
What is jQLite?
jQLite is a subset of jQuery that is built directly into AngularJS. jQLite provides you all the useful features of jQuery. In fact it provides you limited features or functions of jQuery. By default AngularJS use jQLite which is the subset of jQuery. If you want to use jQuery then simply load the jQuery library before loading the AngularJS. By doing so, Angular will skip jQLite and will started to use jQuery library.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="mainCtrl">
<input type="text" id="txtName" value="Akhilesh Ojha" />
<button type="button" ng-click="clickme()">Click me</button>
</div>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller("mainCtrl", function($scope, $element) {
$scope.clickme = function() {
var elem = angular.element(document.querySelector('#txtName'));
console.log(elem.val()) // console the value of textbox
};
});
</script>
</body>
</html>
What are the disadvantages of AngularJS?
Following are the disadvantages of AngularJS.
- Not Secure − Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.
- Not degradable − If your application user disables JavaScript then user will just see the basic page and nothing more.
Is AngularJS a templating system?
At the highest level, Angular does look like just another templating system. But there is one important reason why the Angular templating system is different, that makes it very good fit for application development: bidirectional data binding. The template is compiled in the browser and the compilation step produces a live view. This means you, the developers, don't need to write code to constantly sync the view with the model and the model with the view as in other templating systems.
