Dear Reader, Welcome to this section of “Angular JS Interview Questions and Answers“. Here we are going to provide you some basic interview questions regarding Angular Js, we are going to share with you some Questions and Answers but we are sure these are will be very lucky for you, so let’s start
1. What is AngularJS?
AngularJS is a javascript framework used for creating single web page applications. It allows you to use HTML as your template language and enables you to extend HTML’s syntax to express your application’s components clearly
2. What is the syntax of the ForEach loop? which loop would you use to parse a JSON and why?
Below is the syntax of for each loop:
1 2 3 4 |
angular.ForEach(students,function(value,key) { //some code } |
To parse JSON, we can use any loop, but I would use for each loop because it will minimize my code by eliminating the need to store the length of a JSON in a variable.
3. Explain MVC in reference to angular?
AngularJs is an MVC based framework, where Model for a controller contains data, the controller for a view contains the logic to manipulate that data, and the view is the HTML that displays the data.
A $scope can be considered as a model, whereas the functions written in angular controller modifies the $scope and HTML display the value of the scope variable.
4. Name a few inbuilt angular filters?
Currency, lowercase, uppercase, number, date are few inbuilt angular filters.
1 |
{{nameOfStudent|uppercase}} |
5. What are custom filters? Write down a syntax of the same?
With AngularJS we can create our own filters. This can be done by associating the filter to our module. These types of filters are called custom filters.
Below is the code to count the number of elements in the string by using the filter:
1 2 3 4 5 6 7 8 9 10 |
angular.module('myCountFilterApp', []) .filter('count',function() { return(function(input) { var out=[]; out=input.split(','); return out.length; }) }); |
6. What is the difference between ng-if and ng-show?
Ng-if doesn’t render the portion of DOM element on which it is associated if the specified condition is not met whereas ng-show renders the DOM element but set its CSS property of display to none if the specified condition is not met.
7. What is the purpose of the $watch?
The purpose of $watch is to keep track of the old and new value of the watched expression. Below is the code of using $watch.
1 2 3 |
$scope.$watch("checkInDate", function (newValue, oldValue) { console.log("I've changed : ", newValue); }); |
8. What is the purpose of $rootScope?
$rootScope helps in communication between different controllers of an application. AngularJS can have only one rootScope for an app.
9. Explain what are the key features of AngularJS?
The key features of AngularJS are
- Scope
- Controller
- Model
- View
- Services
- Data Binding
- Directives
- Filters
- Testable
10. Explain what is scope in AngularJS?
Scope refers to the application model, it acts like glue between the application controller and the view. Scopes are arranged in a hierarchical structure and impersonate the DOM ( Document Object Model) structure of the application. It can watch expressions and propagate events.
11. Explain what is services in AngularJS?
In AngularJS services are the singleton objects or functions that are used for carrying out specific tasks. It holds some business logic and these function can be called as controllers, directive, filters and so on.
12. With options on page load how you can initialize a select box?
You can initialize a select box with options on page load by using ng-init directive
- <div ng-controller = ” apps/dashboard/account ” ng-switch
- On = “! ! accounts” ng-init = ” loadData ( ) “>
13. Explain what are directives ? Mention some of the most commonly used directives in AngularJS application ?
A directive is something that introduces new syntax, they are like markers on DOM element which attaches a special behavior to it. In an AngularJS application, directives are the most important components.
Some of the commonly used directives are ng-model, ng-App, ng-bind, ng-repeat, ng-show, etc.
14. Mention what are the advantages of using AngularJS?
AngularJS has several advantages in web development.
- AngularJS supports MVC pattern
- Can do two ways data binding using AngularJS
- It has pre-defined form validations
- It supports both client-server communication
- It supports animations
15. Explain what Angular JS routes do?
Angular js routes enable you to create different URLs for different content in your application. Different URLs for different content enables the user to bookmark URLs to specific content. Each such bookmarkable URL in AngularJS is called a route
A value in Angular JS is a simple object. It can be a number, string or JavaScript object. Values are typically used as configuration injected into factories, services or controllers. A value should belong to an AngularJS module.
Injecting a value into an AngularJS controller function is done by adding a parameter with the same name as the value
16. Explain what is data binding in AngularJS?
Automatic synchronization of data between the model and view components is referred to as data binding in AngularJS. There are two ways for data binding
- Data mining in classical template systems
- Data binding in angular templates
17. What are the controllers in AngularJS?
Controllers are JavaScript functions that are bound to a particular scope. They are the prime actors in the AngularJS framework and carry functions to operate on data and decide which view is to be updated to show the updated model-based data.
18. 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.
19. Explain templates in AngularJS?
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”.
20. What is routing in AngularJS?
It is concept of switching views. AngularJS based controller decides which view to render based on the business logic.
21.What is deep linking in AngularJS?
Deep linking allows you to encode the state of the application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.
22. What are the disadvantages of AngularJS?
Following are the disadvantages of AngularJS.
- Not Secure − Being JavaScript only framework, an application written in AngularJS are not safe. Server-side authentication and authorization are must to keep an application secure.
- Not degradable − If your application user disables JavaScript then the user will just see the basic page and nothing more.
23. 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
24. What is MVC?
Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications. A Model View Controller pattern is made up of the following three parts:
- Model − It is the lowest level of the pattern responsible for maintaining data.
- View − It is responsible for displaying all or a portion of the data to the user.
- Controller, − It is a software Code that controls the interactions between the Model and View.
25. What is constant?
constants are used to pass values at config phase considering the fact that value cannot be used to be passed during the config phase.
26. Is AngularJS extensible?
Yes! In AngularJS we can create custom directive to extend AngularJS existing functionalities.
Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using the “directive” function. A custom directive simply replaces the element for which it is activated. AngularJS application during bootstrap finds the matching elements and do a one-time activity using its compile() method of the custom directive then process the element using link() method of the custom directive based on the scope of the directive
27. Explain what is injector?
An injector is a service locator. It is used to retrieve object instances as defined by the provider, instantiate types, invoke methods and load modules. There is a single injector per Angular application, it helps to lookup an object instance by its name.
28. Explain what is the difference between a link and compile in Angular.js?
- Compile function: It is used for template DOM Manipulation and collects all of the directives.
- Link function: It is used for registering DOM listeners as well as for instance DOM manipulation. It is executed once the template has been cloned.
29. Who created Angular JS?
Initially, it was developed by Misko Hevery and Adam Abrons. Currently, it is being developed by Google.
30. What is ng-init used for?
Ng-init is used in a scenario where we want some action to be done before the initialization of a portion of the DOM element.