Angular JS Interview Question Set 12
Categories: Angular JS
What are the controllers in AngularJS?
Controllers are JavaScript functions which are used to provide data and logic to HTML UI. It acts as an interface between Server and HTML UI. Each controller accepts $scope as a parameter which refers to the application/module that controller is going to control. For example:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "Aryan";
$scope.lastName = "Khanna";
});
</script>
What are the uses of controllers in AngularJS?
AngularJS controllers are used for:
- Setting the initial state of the $scope object
- Adding behavior to the $scope object
What is data binding in AngularJS?
Data Binding is the automatic synchronization of data between model and view. In AngularJS, it performs the automatic synchronization process between the model and view.
If the model is changed, the view reflects it automatically and vice-versa. There are two ways of data binding that AngularJS supports:
One Way Data Binding
In one-way data binding, view (UI part) does not get updated automatically when the data model is changed. We need to write custom codes to make it updated every time. A directive ng-bind has one-way data binding. Here, value is taken from the data model and inserted into an HTML element.
Two Way Data Binding
In two-way data binding, scope variable changes its value whenever the data model is allotted to a different value. It treats the model as the single-source-of-truth in the application. The view is a projection of the model at all time s. If the model is changed, the view reflects the change and vice versa.
What are the services in AngularJS?
Services are objects that can be used to store and share data across the application. AngularJS offers many built-in services, and each of them is responsible for a specific task. They are always used with the prefix $ symbol.
Some of the important services used in any AngularJS application are as follows:
- $http- It is used to make an Ajax call to get the server data.
- $window- It provides a reference to a DOM object.
- $Location- It provides a reference to the browser location.
- $timeout- It provides a reference to the window.set timeout function.
What is the module in AngularJS?
A module is a container for the different parts of the application like a controller, services, filters, directives, etc. It is treated as a main() method. All the dependencies of applications are generally defined in modules only. A module is created using an angular object's module() method. For example:
var app = angular.module('myApp', []);
What is routing in AngularJS?
Routing is one of the main features of the AngularJS framework, which is useful for creating a single page application (also referred to as SPA) with multiple views. It routes the application to different pages without reloading the application. In Angular, the ngRoute module is used to implement Routing. The ngView, $routeProvider, $route, and $routeParams are the different components of the ngRoute module, which help for configuring and mapping URL to views.
What is a template in AngularJS?
A template consists of HTML, CSS, and AngularJS directives, which are used to render the dynamic view. It is more like a static version of a web page with some additional properties to inject and render that data at runtime. The templates are combined with information coming from model and controller.
What are the expressions in AngularJS?
Expressions in AngularJS are the code snippets that resolve to a value. AngularJS expressions are placed inside {{expression}}. Expressions are included in the HTML elements.
AngularJS expressions can also contain various valid expressions similar to JavaScript expressions. We can also use the operators between numbers, including strings, literals, objects, and arrays inside the expression {{ }}.
For example:
{{1+1}}
{{Name + " " + email}} (string)
{{ Country.Name }} (object)
{{ fact[4] }} (array)
What are the key differences between Angular expressions and JavaScript expressions?
The key differences between the Angular expressions and JavaScript expressions are given below:
Angular ExpressionsJavaScript Expressions
Angular expressions do not support conditional statements, loops, and exceptions.JavaScript expressions support conditional statements, loops, and exceptions.
Angular expressions support filters.JavaScript expressions do not support filters.
Angular expressions can be written inside HTML.JavaScript expressions cannot be written inside HTML.
What is the use of filter in AngularJS?
A filter is used to format the value of the expression to display the formatted output. AngularJS allows us to write our own filter. Filters can be added to expressions by using the pipe character |, followed by a filter.
Explain Currency filter in AngularJS. How can we use it?
The currency filter contains the "$" Dollar symbol as default. We can apply the following code as the html template format of Currency Filter.
{{ currency_expression | currency : symbol : fractionSize}}
We can use Currency Filter by using the following methods:
Default
If we do not provide any currency symbol, then Dollar sign will be used by default as shown below:
<!-- by default -->
Default Currency{{amount | currency}}
User-Defined
To use different types of currency symbols, we have to define our own symbol by applying the Hexa-Decimal code or Unicode of that Currency.
E.g., To define Indian Currency Symbol, then we have to use Unicode-value or Hexa-Decimal value.
Indian Currency{{amount | currency:"&# 8377"}}
What do you understand by Dependency Injection in AngularJS?
Dependency Injection (also called DI) is one of the best features of AngularJS. It is a software design pattern where objects are passed as dependencies rather than hard coding them within the component. It is useful for removing hard-coded dependencies and making dependencies configurable. To retrieve the required elements of the application that need to be configured when the module is loaded, the "config" operation uses Dependency Injection. It allows separating the concerns of different components in an application and provides a way to inject the dependent component into the client component.
What do you understand by validation of data in AngularJS?
AngularJS enriches form filling and validation. AngularJS provides client-side form validation. It checks the state of the form and input fields (input, text-area, select), and notify the user about the current state. It also holds the information about whether the input fields have been touched, or modified, or not.
There are following directives that can be used to track error:
$dirty
It states that the value has been changed.
$invalid
It states that the value which is entered is invalid.
$error
It states the exact error.