AngularJS is an open-source JavaScript framework used to build rich and extensible web applications. It is developed by Google and follows the MVC (Model View Controller) pattern. It supports HTML as the template language and enables the developers to create extended HTML tags which will help to represent the application’s content more clearly. It is easy to update and receive information from an HTML document. It also helps in writing a proper maintainable architecture which can be tested at a client-side.

What are the features of AngularJS?

Some important features of AngularJS are given below:

MVC-In AngularJS, you just have to split your application code into MVC components, i.e., Model, View, and the Controller.
Validation-It performs client-side form validation.
Module-It defines an application.
Directive-It specifies behavior on the DOM element.
Template-It renders the dynamic view.
Scope-It joins the controller with the views.
Expression-It binds application data to HTML.
Data Binding-It creates a two-way data-binding between the selected element and the $ctrl.orderProp model.
Filter-It provides the filter to format data.
Service-It stores and shares data across the application.
Routing-It is used to build a single page application.
Dependency Injection-It specifies a design pattern in which components are given their dependencies instead of hard-coding them within the component.
Testing-It is easy to test any of the AngularJS components through unit testing and end-to-end testing.

What are the directives in AngularJS?

Directives are the markers on DOM element which are used to specify behavior on that DOM element. All AngularJS directives start with the word “ng“. There are many in-built directives in AngularJS such as “ng-app”, “ng-init”, “ng-model”, “ng-bind”, “ng-repeat” etc.

ng-app
The ng-app directive is the most important directive for Angular applications. It is used to locate the beginning of an Angular application for AngularJS HTML compiler. It marks the HTML elements that Angular intends to make the root element of the application. The custom attributes use spinal-cases, whereas the corresponding directives follow the camelCase. If we do not use this directive and try to process other directives, it gives an error.
ng-init
The ng-init directive is useful for initializing the data variable’s inline statement of an AngularJS application. Therefore, those statements can be used in the specified blocks where we can declare them. A directive ng-init is like a local member of the ng-app directive, and it may be a single value or a group of the values. It directly supports JSON data.
ng-model
The ng-model directive binds the values of HTML elements such as input, select, textarea to the application data. It provides two-way binding behavior with the model value. Sometimes, it is also used for databinding.
ng-bind
The ng-bind directive is used to bind the model/variable’s value to HTML controls of an AngularJS application. It can also be used with HTML tags attributes like: <p/>, <span/> and more but it does not support two-way binding. We can only check the output of the model values.
ng-repeat
The ng-repeat directive is used to repeat HTML statements. It works the same as for each loop in C#, Java or PHP on a specific collection item like an array.

Let’s see a simple example of AngularJS directive:

<div ng-app = "" ng-init = "countries = [{locale:'en-IND',name:'India'}, 
{locale:'en-PAK',name:'Pakistan'}, {locale:'en-AUS',name:'Australia'}]">

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

<p>Hello <span ng-bind = "name"></span>!</p>

<p>List of Countries with locale:</p>

<ol>

<li ng-repeat = "country in countries">

               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}

</li>

</ol>

</div>

What are the main advantages of AngularJS?

Some of the main advantages of AngularJS are given below:

Allows us to create a single page application.
Follows MVC design pattern.
Predefined form validations.
Supports animations.
Open-source.
Cross-browser compliant.
Supports two-way data binding.
Its code is unit testable.

What are the disadvantages of AngularJS?

There are some drawbacks of AngularJS which are given below:

JavaScript Dependent: If end-user disables JavaScript, AngularJS will not work.
Not Secured: It is a JavaScript-based framework, so it is not safe to authenticate the user through AngularJS only.
Time Consumption in Old Devices: The browsers on old computers and mobiles are not capable or take a little more time to render pages of application and websites designed using the framework. It happens because the browser performs some supplementary tasks like DOM (Document Object Model)manipulation.
Difficult to Learn: If you are new in AngularJS, then it will not be easy for you to deal with complex entities such as Quite layered, hierarchically and scopes. Debugging the scope is believed a tough task for many programmers.

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 BindingIn 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 BindingIn 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.
$Log-It is used for logging.
$sanitize-It is used to avoid script injections and display raw HTML in the page.
$Rootscope-It is used for scope hierarchy manipulation.
$Route-It is used to display browser-based path in browser’s URL.
$Filter-It is used for providing filter access.
$resource-It is used to work with Restful API.
$document-It is used to access the window.Document object.
$exceptionHandler-It is used for handling exceptions.
$q-It provides a promise object.
$cookies-It is used for reading, writing, and deleting the browser’s cookies.
$parse-It is used to convert an AngularJS expression into a function.
$cacheFactory-It is used to evaluate the specified expression when the user changes the input.

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)

AngularJS supports one-time binding expressions.

Describe MVC in reference to angular.

AngularJS is based on MVC framework, where MVC stands for Model-View-Controller. MVCperforms the following operations:

A model is the lowest level of the pattern responsible for maintaining data.
A controller is responsible for a view that contains the logic to manipulate that data. It is basically a software code which is used for taking control of the interactions between the Model and View.
A view is the HTML which is responsible for displaying the data.

For example, a $scope can be defined as a model, whereas the functions written in angular controller modifies the $scope and HTML displays the value of scope variable.

What is $scope?

A $scope is an object that represents the application model for an Angular application.

Each AngularJS application can have only one root scope but can have multiple child scopes.

For example:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.carname = "Volvo";

});

Some of the key characteristics of the $scope object are given below:

It provides observers to check for all the model changes.
It provides the ability to propagate model changes through the application as well as outside the system to other associated components.
Scopes can be nested in a way that they can isolate functionality and model properties.
It provides an execution environment in which expressions are evaluated.

Is AngularJS dependent on JQuery?

AngularJS is a JavaScript framework with key features like models, two-way binding, directives, routing, dependency injections, unit tests, etc. On the other hand, JQuery is a JavaScript library used for DOM manipulation with no two-way binding features.

What IDE’s are currently used for the development of AngularJS?

A term IDE stands for Integrated Development Environment

There are some IDE’s given below which are used for the development of AngularJS:

Eclipse: It is one of the most popular IDE. It supports AngularJS plugins.
Visual Studio: It is an IDE from Microsoft that provides a platform to develop web apps easily and instantly.
WebStorm: It is one of the most powerful IDE for modern JavaScript development. It provides an easier way to add dependencies with angular CLI.
Aptana: It is a customized version of Eclipse. It is free to use.
Sublime Text: It is one of the most recommendable editors for HTML, CSS, and JavaScript. It is very much compatible with AngularJS code.

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 Expressions	JavaScript 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.

For example:

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ firstName | uppercase }}</p>

</div>

<script>

angular.module('myApp', []).controller('personCtrl', function($scope) {

    $scope.firstName = "Sonoo",

    $scope.lastName = "Jaiswal"

});

</script>

Filters can be applied in view templates, controllers, services and directives. It is important to know that filters are case-sensitive. There are some built-in filters provided by AngularJS such as Currency, Date, Filter, JSON, Limit, Lowercase, Number, Orderby, and Uppercase.

What do you know about uppercase filter and lowercase filter in AngularJS?

Uppercase filters are used to convert a text to upper case text.

For example:

Type first name:<input type = “text” ng-model = “student.firstName”>
Type last name: <input type = “text” ng-model = “student.lastName”>
Name in Upper Case: {{student.fullName() | uppercase}}

In above example, uppercase filter is added to an expression using pipe character. It will print student name in capital letters.

On the other side, lowercase filters are used to convert a text to lower case text.

For example:

Type first name:<input type = “text” ng-model = “student.firstName”>
Type last name: <input type = “text” ng-model = “student.lastName”>
Name in Upper Case: {{student.fullName() | lowercase}}

It will print student name in lowercase letters.

Explain custom filters with an example.

We can create our own filters in AngularJS. It can be performed by associating the filter to our module. These types of filters are known as custom filters.

An example given below can be used to count the number of elements in the string by using the filter:

angular.module('myCountFilterApp', [])

   .filter('count',function()

{

    return(function(input)

    {

        var out=[];

        out=input.split(',');

        return out.length;

    })

});

As per above example, if the string is “21, 34, 45 “ then output after applying filter will be 3.

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:

DefaultIf 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-DefinedTo 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. By using Dependency Injection, we can make components maintainable, reusable, and testable.

A simple case of dependency injection in AngularJS is shown below:

myApp.controller(‘myController’, function ($scope, $http, $location)
{
//logic
});

Here, a controller is declared with its dependencies.

AngularJS provides the following core components which can be injected into each other as dependencies:

Value
Factory
Service
Provider
Constant

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.

Moreover, we can use novalidate with a form declaration to disable the browser’s native form validation.

What do you understand by linking function? Explain its type.

Link is used for combining the directives with a scope and producing a live view. The link function is used for registering DOM listeners as well as updating the DOM. The linking function is executed as soon as the template is cloned.

There are two types of linking function:

Pre linking function: Pre-linking functions are executed before the child elements are linked. This method is not considered as a safe way for DOM transformation.
Post linking function: Post-linking functions are executed after the child elements are linked. This method is a safe way for DOM transformation.

What do you know about injector?

An injector is referred to as a service locator. It is used to receive object instances as defined by the providers, invoke methods, instantiate types, and load modules. Each Angular application consists of a single injector which helps to look upon an instance by its name.

What is the factory method in AngularJS?

Factory method is used for creating a directive. Whenever the compiler matches the directive for the first time, the factory method is invoked. Factory method is invoked using $injector.invoke.

Syntax: module.factory(‘factoryName’, function);

How will you explain the concept of hierarchy? How many scopes can an application have?

Each Angular application contains one root scope, but there can be several child scopes. The application may have multiple scopes because child controllers and some directives create new child scopes. When the new scope is formed or created, it is added as a child of the parent scope. As similar to DOM, scopes also create a hierarchical structure.

Explain how logs are maintained in AngularJS?

Logs can be maintained using $log service. The main purpose of $log service is to help in debugging and troubleshooting. It is done with the help of the following methods.

log()-It writes a log message in the console.
info()-It writes an information message.
warn()-It writes a warning message.
error()-It writes an error message.
debug()-It writes a debug message.

$log.error(‘this will displayed as an error in console’)

What is the main purpose of find index in AngularJS, and what does it return if no value is found?

Find index is used to return the position of an element. It returns the value (-1) if the requested element is not found.

var index = $scope.items.findIndex(record => record.date ==’2018-12-12′);

In the given code, index of the object is returned where item.date=2018-12-12.

Can we set an Angular variable from PHP session variable without sending an HTTP request?

Yes, we can perform it by injecting PHP in the required place. i.e.,

$scope.name='<?= $session[‘name’] ?>’;

It will work only if we use PHP to render the HTML and the above JavaScript in <script> tag inside the PHP file.

What do you understand by strict conceptual escaping?

AngularJS treats all the values as untrusted/ unsecured in HTML or sensitive URL bindings. AngularJS automatically runs security checks while binding untrusted values. It throws an error if it cannot guarantee the security of the result. This type of behavior depends on contexts: HTML can be sanitized, but template URLs cannot.

To illustrate this, consider the following directive

Ng-bind-html

It renders its value directly as HTML. When there is an untrusted input, AngularJS will try to sanitize it before rendering if a sanitizer is available. We will need to mark it as trusted to bypass sanitization and render the input.

How can someone make an ajax call using AngularJS?

AngularJS contains $https: control, which works as a service to make ajax call to read data from the server. The server creates a database call to retrieve the desired records. AngularJS requires data in JSON format. Once the data gets ready, $https: can be used to retrieve the data from the server in the following manner.

function studentController($scope,$https:) {

   var url = "data.txt";

   $https:.get(url).success( function(response) {

      $scope.students = response;

   });

}

What do you know about internationalization? How will you implement internationalization in AngularJS?

Internationalization is the method for showing locale-specific information on a website. Consider a website displaying content in the English language in the United States and Danish in France.

AngularJS has inbuilt internationalization support for three types of filters:

Currency
Date
Numbers

We need to incorporate the corresponding JS according to the locale of the country. By default, it is configured to handle the locale of the browser.

How will you explain deep linking in AngularJS?

Deep linking is the method which allows us to encode the state of the application in the URL in such a way that it can be bookmarked. Then the application can further be restored from the URL to the same state.

Describe the AngularJS boot process.

When a page is loaded into the browser, several things happen:

- HTML document file gets loaded, and evaluated by the browser. AngularJS JavaScript file gets loaded, and the angular global object is created. Next, JavaScript file which is responsible for registering the controller functions is executed.
- AngularJS scans through the HTML to find AngularJS apps and views. Once the view is found, it connects that particular view to the corresponding controller function.
- AngularJS executes the controller functions. It further renders the views with data from the model populated by the controller, and the page gets ready.

Is it possible to have two ng-app directives for a single Angular application?

No, there can’t be more than one ng-app directive for a single AngularJS application.

The ng-app directive helps AngularJS application to make sure that it is the root element. In our HTML document, we can have only one ng-app directive. If there is more than one ng-app directive, then whichever appears first will be used.

What is the syntax for creating a new date object?

The syntax for creating new date object is given below:

$scope.newDate=new Date();

Do you think that parent controller can access the methods of child controller or vice versa?

No, the parent controller cannot access the methods of child controller, but the child controller can access the methods of the parent controller.

Explain $rootScope in AngularJS.

Every AngularJS application contains a $rootScope, which is the top-most scope created on the DOM element. An application can contain only one $rootScope, which will be shared among all its components. Every other scope is considered as its child scope. It can watch expressions and propagate events. By using the root scope, one can set the value in one controller and read it from the other controller.

What is the main purpose of $routeProvider in AngularJS?

$routeProvider is one of the important services which set the configuration of URLs. It further maps them with the corresponding HTML pages or ng-templates and attaches a controller with the same.

How will you explain Auto Bootstrap Process in AngularJS?

AngularJS initializes automatically upon the “DOMContentLoaded” event. It also initializes when the browser downloads the Angular.js script and document.readyState is set to ‘complete’ at the same time. AngularJS looks for an ng-app directive which is the root of Angular application compilation process.

If the directive ‘ng-app’ is found, then AngularJS will perform the following steps:

It will load the module which is associated with the directive.
It will create the application injector.
It will compile the DOM starting from the ng-app root element.

This process is known as Auto-bootstrapping.

How will you explain Manual Bootstrap Process in AngularJS?

Sometimes, we may need to manually initialize the Angular application to have more control over the initialization process. We can perform such task using angular.bootstrap() function within angular.element(document).ready() function. AngularJS uses this function when the DOM is ready for manipulation.

The angular.bootstrap() function uses two parameters, the document, and the module name injector.

What do you understand by $watch?

In angularJS, $watch() function is used to watch the changes of variable in $scope object. Generally, the $watch() function is created internally to handle variable changes in the application.

If there is a need to create custom watch for some specific action then it’s better to use $scope.watch function. The $scope.watch() function is used to create a watch of some variable. When we register a watch, we pass two functions as parameters to the $watch() function:

A value function
A listener function

An example is given below:

$scope.$watch(function() {},

              function() {}

             );

Here, the first function is the value function and the second function is the listener function.

What are the different types of directives available in AngularJS?

AngularJS provides support for creating custom directives for the following type of elements:

Element Directive: Element directives are activated when a matching element is encountered.
Attribute: Attribute directives are activated when a matching attribute is encountered.
CSS: CSS directives are activated when a matching CSS style is encountered.
Comment: Comment directives are activated when a matching comment is encountered.

Explain the compilation process of AngularJS?

Angular’s HTML compiler allows us to teach the browser, new HTML syntax. It also allows the developer to attach new behavior or attributes to any HTML element known as directives. AngularJS compilation process automatically takes place in the web browser. It does not contain any server-side or pre-compilation procedure.

AngularJS uses <$compiler> service for the compilation process of an Angular HTML page. Its compilation process starts after the HTML page (static DOM) is completely loaded.

It occurs in two phases:

Compile: It checks into the entire DOM and collects all of the directives.
Link: It connects the directives with a scope and produces a live view.

The concept of compile and link has been added from C language. The code is compiled and then linked.

What is the Global API in AngularJS?

Global API is the combination of global JavaScript function, which is used to perform tasks such as comparing objects, iterating objects, and converting the data.

There are a few common API functions like:

angular.lowercase: It is used to convert a string to lowercase string.
angular.uppercase: It is used to convert a string to uppercase string.
angular.IsString: It returns true if the current reference is a string.
angular.IsNumber: It returns true if the current reference is a number.

Is AngularJS well-suited with all browsers?

Yes, AngularJS is supported with all the browsers like Safari, Chrome, Mozilla, Opera, and Internet Explorer, etc. It is also companionable with mobile browsers.

How are AngularJS prefixes $ and $$ used?

$$ prefix in AngularJS is used as a private variable, as it is responsible for preventing accidental code collision with the user code.

Whereas, $ prefix is used to define angular core functionalities such as variable, parameter, property or method, etc.

How can someone set, get, and clear cookies in AngularJS?

AngularJS has a module known as ngCookies. Before we inject ngCookies, we should include angular-cookies.js into the application.

Set CookiesWe can use the put method to set cookies in a key-value format.$cookies.put(“username”, $scope.username);

Get CookiesWe can use the get method to get cookies.$cookies.get(‘username’);

Clear CookiesWe can use the remove method to remove or clear cookies.$cookies.remove(‘username’);

What do you understand by AngularJS?

AngularJS is a JavaScript framework that is used for making rich and extensible web applications.

It runs on plain JavaScript and HTML, hence you don’t need any other dependencies to make it work. AngularJS is perfect for Single Page Applications (SPA). It is basically used for binding JavaScript objects with HTML UI elements.

Define the features of AngularJS.

The features include:

The Template (View)
The Scope (Model)
The Controller (Controller)
Services
Filters
Directives

Define Data Binding.

Data binding is an automatic attunement of data between the view and model components.

Distinguish between AngularJS and JavaScript expressions.

There are several differences between AngularJS and JavaScript expressions:

We can write AngularJS expressions in HTML, but we cannot write JavaScript expressions in HTML.
We cannot use conditional iterations, loops, and exceptions in AngularJS, but we can use all of these conditional properties in JavaScript expressions.
Filters are supported in AngularJS whereas filters are not supported in JavaScript.

Write all the steps to configure an Angular App(ng-app).

To set up an Angular App we must follow certain steps as mentioned below:

angular.module will be created at first.
A controller will be assigned to the module.
The module will be linked with the HTML template(i.e. UI or View) with an angular app(ng-app).
The HTML template will be linked with the controller(i.e JS) with an ng-controller directive.

What are the Angular Modules?

The angular modules collectively define an angular application where we can write the angular code. Modules contain the different parts of an angular application. A module is created by angular.module function in angular.

What are the directive scopes in AngularJS?

Three directive scopes are available in AngularJS.

They are:

Parent scope: Whatever change you make in your directive that comes from the parent scope, will also reflect in the parent scope, and it is also a default scope.
Child scope: It is a nested scope that inherits a property from the parent scope. Also, if any properties and function on the scope are not connected with the parent scope directive, then a new child scope directive is created.
Isolated scope: It is reusable and is used when we build a self-contained directive. It is only used for private and internal use which means that it does not contain any properties of the parent scope.

How can we share the data between controllers in AngularJS?

First, we have to create a service. Service is used to share the data between controllers in AngularJS in a very lucid, easy and fastest way. We use events, $parent, next sibling, and controller by using a $rootScope.

What is the digest cycle in AngularJs?

It is a part of the process of data binding in AngularJS. It compares the old and new versions of the scope model value in each digest cycle.

The digest cycle is triggered automatically. We can also enhance the usability by using $apply () if we want to trigger the digest cycle manually.

Explain the differences between one-way binding and two-way binding.

One-way binding is used to bind the data from the model to view without updating the HTML template or view automatically.

Thus, in order to update the HTML template, we need to write a custom code that will update the view every time whenever a data is binded from model to view.

Whereas, two-way binding is used to bind the data from the model to view and vice versa(i.e view to model) by automatically updating the HTML template without writing any custom code.

Difference between sessionStorage, cookies, and localStorage.

The differences are as follows:

SessionStorage –The data is stored for a particular session. The data will be lost whenever the browser tab will be closed or after some particular session. The maximum size stored can be up to 5MB.
LocalStorage –The data is stored with no expiration date. The data can only be cleared by JavaScript or by clearing the browser cache. The storage limit is maximum than the sessionStorage and cookie.
Cookies –It stores the data that has to be sent back to the server with some requests. The cookie’s expiration varies on the type and duration set from either the server-side or client-side. The maximum size stored can be less than 4KB.

What is the role of $routeProvider in AngularJS?

It is the $routeProvider that helps in navigating between different pages/links without separately loading the page/link whenever a user clicks on a link.

ngRoute config() method is used to configure the routeProvider.

What is the difference between $scope and scope?

In AngularJS, $scope is used to achieve dependency injection and scope is used for linking between View (i.e HTML) and Controller (i.e JS).

How are AngularJS prefixes $ and $$ used?

$$ variable in AngularJS is used as a private variable, as it is used to prevent accidental code collision with the user code.

Whereas, $ prefix can be used to denote angular core functionalities (like a variable, parameter, property or method).

Where can we implement the DOM manipulation in AngularJS?

Manipulation of DOM is in directives and apart from this it should not exist in the controller’s services or anywhere else.

How can we show that a scope variable should have one-time binding only?

To show one-time binding we have to use “::” in front of the scope.

What is SPA (Single Page Application) in AngularJS?

It is a web application that loads a single HTML page and dynamically updates the page as the user connects with the app.

By using AJAX and HTML a fluid and responsive web app can be created by SPA without invariant page reloads. Through this, we can make responsive UI with no page flicker.

How many types of data bindings are there in AngularJS?

AngularJS supports both one way and two-way binding.

In one way binding if we change the data model, then there will be no dynamic change that you will see in view but in two way binding, there will be a dynamic change whenever a change will be made in the data model.

What are the binding directives in AngularJS?

The binding directives include:

ng-bind
ng-bind-html
ng-bind-template
ng-non-bindable
ng-model

Explain ng-bind and ng-bind-html directives.

ng-bind: It is a directive that replaces the content of the HTML element with the value of the assigned variable or expression.
The content of the HTML element will change by changing the value of the variable or expression.
It is like ({{expression}}) and the syntax for this is,
<ANY ELEMENT ng-bind=”expression”> </ANY ELEMENT>
ng-bind-html: It is a directive that binds the content to the HTML element(view) in a secure way. $sanitize service is used to sanitize the content to bind into an HTML element. To do this ‘angular-sanitize.js’ must be included in our application.
Syntax to write this,
<ANY ELEMENT ng-bind-html=” expression “> </ANY ELEMENT>

Explain ng-bind-template and ng-non-bindable.

ng-bind-template: It replaces the text content of the element by interpolation of the template. It can contain multiple double curly markups.

Ng-non-bindable: It specifies AngularJS to not compile the content of this HTML element and its child nodes.

Explain the ng-model directive in AngularJs.

This can be a leap hop with the custom HTML input form control( like input, textarea and select) to the application data. It provides form validation behavior with two-way binding.

Define the Factory method in AngularJS.

It is quite similar to service, factories implement a module pattern in which we use a factory method to generate an object which is used for building models.

In a factory, a method object is returned at the end by creating a new object and adding functions as properties.

Syntax:

 module.factory(‘factoryName', function);

What is ng-repeat directive in AngularJS?

It renders or iterates over a collection of items and creates DOM elements. It regularly monitors the source of data to re-render a template in response to a change.

Syntax:

<table class="table table-bordered">

<tr ng-repeat="student stuDetails">

<td>{{stu.name}} </td>

<td> {{stu. grade}} </td>

</tr>

</table>

What is a controller in AngularJS?

A controller is a JavaScript function that is bound to the specified scope. Angular instantiates the new controller object and injects the new scope as a dependency.

A controller can be used to set up the initial state of the scope object and to add behavior to the object. A controller cannot be used to share code or state across controllers, but instead of that Angular service can be used.

</Any>

</div>

What are filters in AngularJS?

The main work of filters is to modify the data, so that it can be merged into an expression or directive by using a pipe character (it is used for applying filters in an angular symbol of a pipe which is (|) or this is the symbol).

A filter formats the value of an expression for a display to the user. They can be used in view templates, controllers, or services, and we can easily create our own filter as well. A filter is a module provided by AngularJS. There are nine components of a filter which are provided by it.

Examples: currency, date, filter, JSON, limitTo, etc.

What is ng-App directive in AngularJS?

It is used to define the AngularJs Application. It appoints the root element of the application and it is kept near the <body> or <html> tag.

We can define any number of ng-app directives inside the HTML document, but only one AngularJS application can be bootstrapped automatically (auto-bootstrapped) and the other applications need to be bootstrapped manually.

Examples:

<p>My first expression: {{157 + 122}} </p>

</div>

What is ng-switch in AngularJS?

It is used to conditionally exchange the structure of DOM on a template that is based on a scope-based expression.

This directive lets you show or hide the HTML element depending on the expression.

What is the use of a double-click event in AngularJs?

It allows you to specify the custom behavior on a double click event of the mouse on a web page. We can use it (ng-dblclick) as an attribute of the HTML element like,

<ANY_HTML_ELEMENT ng-dblclick=”{expression}”>

…

</ANY_HTML_ELEMENT>

What are ng-include and ng-click directives in AngularJs?

ng-include helps to include different files on the main page. The ng-include directive includes HTML from an external file.

The included content will be included as child nodes of the specified element. The value of the ng-include attribute can also be an expression, returning a filename.

By default, the included file must be located on the same domain as the document.

ng-click can be used in scenarios like when you click on a button or when you want to do any operation. It tells AngularJS what to do when an HTML element is clicked.

Example:

The above code will increase the count variable by one whenever the button is clicked.

What is a representational state transfer(REST) in AngularJs?

REST is an API style that operates over the HTTP request.

The requested URL identifies the data to be operated on, and the HTTP method identifies the operation that is to be performed. REST is a style of API rather than a formal specification, and there is a lot of debate and disagreement about what is and isn’t RESTful, which is a term used to indicate an API that follows the REST style.

AngularJS is flexible about how RESTful web services are consumed.

What are the AngularJs Global API?

It is a combination of global JavaScript function which is used to perform tasks like comparing objects, iterating objects and converting data.

There are some common API functions like:

angular. lowercase: It converts a string to lowercase string.
angular. uppercase: It converts a string to uppercase string.
angular. isString: It will return true if the current reference is a string.
angular. isNumber: It will return true if the current reference is a number.

What is a provider method in AngularJs?

A provider is an object which creates a service object by allowing to take more control.

$get() method is used in the provider which returns the service object. The service name and the factory function are the arguments that are passed into the provider method. AngularJS uses $provide to register new providers.

Syntax: serviceApp.provider(“logService”, function ())

What is Event Handling?

Event handling in AngularJs is very useful when you want to create advance AngularJs applications.

We need to handle DOM events like mouse clicks, moves, keyboard presses, change events and so on. AngularJs has some listener directives like ng-click, ng-dbl-click, ng-mousedown, ng-keydown, ng-keyup etc.

What is AngularJs DOM?

AngularJs have some directives which are used to encapsulate AngularJs application data to a disabled attribute of the HTML elements.

Example:

ng-disabled directive encapsulates the application data to the disabled attributes of the HTML DOM element.

<div ng-app="" ng-init="mySwitch=true">

<p>

<button ng-disabled="mySwitch">Click Me!</button>

</p>

<p>

<input type="checkbox" ng-model="mySwitch"/>Button

</p>

<p>

{{ mySwitch }}

</p>

</div>

What are the attributes that can be used during the creation of a new AngularJs directives?

There are several attributes that can be used during a new directive creation.

They include:

Template: It describes an inline template as a string.
Template URL: This attribute specifies the AngularJs HTML compiler to replace the custom directive inside a template with the HTML content located inside a separate file.
Replace: It replaces the current element if the condition is true if false append this directive to the current element.
Transclude: It allows you to move the original children of a directive to a location inside the new template.
Scope: It creates a new scope for this directive rather than inheriting the parent scope.
Controller: It creates a controller which publishes an API for communicating across the directives.
Require: It requires another directive to be present to function the current directive efficiently.
Link: It modifies resulting in DOM element instances, adds event listeners, and set up data binding.
Compile: It modifies the DOM template for features across copies of a directive, as when used in other directives. Your compile function can also return link functions to modify the resulting element instances.

Is Nested Controllers possible or not in AngularJs?

Yes, it is possible as Nested Controllers are well-defined in a classified manner while using a view.

Is AngularJS well-suited with all browsers?

Yes, it is companionable with all browsers like Safari, Chrome, Mozilla, Opera, IE, etc. as well as mobile browsers.

Define services in AngularJS.

AngularJS services are the singleton objects or functions which are used for carrying out definite tasks. It embraces some corporate ideas and these purposes can be called controllers, directive, filters and so on.

Explain the advantages of AngularJS.

Advantages include:

It supports MVC form.
Organize two ways of data binding using AngularJS.
It supports mutual client-server communication.
It supports simulations.

Difference between services and factory.

Factories are functions that return the object, while services are constructor functions of the object which is used by a new keyword.

Syntax:

Factory– module.factory(`factoryName`, function);

Service– module.service(`serviceName`, function);

If both factory and service are equivalent, then when should I use them?

Factory provider is preferred using an object, whereas a service provider is preferred using with class.

Difference between AngularJS and React.JS.

AngularJS is a TypeScript language-based JS framework released in October 2010 by Google. It is a completely free framework and open source that is used in SPA projects (i.e. Single Page Application projects).

React.JS is a javascript library developed by Facebook in March 2013 for building UI. React components can be used on several pages but not as a SPA (i.e. Single Page Application).

Difference between ng-bind and ng-model directive.

ng-bind directive has one-way data bindings, data flows only from object to UI, not vice versa (i.e. $scope>>view) and ng-model directive has two-way data bindings, data flows between UI to object and vice versa(i.e. $scope>>view and view>>$scope).

What is the difference between AJAX and AngularJS?

AJAX stands for Asynchronous JavaScript which is used for sending and getting responses from the server without loading the page.

Whereas, AngularJS is a typescript language-based JavaScript framework following the MVC pattern.

Define ng-if, ng-show and ng-hide.

ng-if directive is used as if clause which removes the HTML element if the expression becomes false.

Syntax: <element ng-if=”expression”></element>

ng-show directive is used to show the HTML element if the expression becomes true. And if the expression becomes false then the HTML element will be hidden.

Syntax: <element ng-show=”expression”></element>

ng-hide directive is used to hide the HTML element if the expression becomes false.

Syntax: <element ng-hide=”expression”></element>

Both ng-show and ng-hide uses the display property method.

What is the difference between ngRoute and ui-router?

ngRoute is a module developed by angularJS team which was a part of the core angularJS framework. Whereas ui-router was developed by a third-party community to overcome the problems of ngRoute.

ngRoute is a location or URL based routing, and ui-router is a state-based routing which allows nested views.

How to set, get and clear cookies in AngularJs?

AngularJS has a module called ngCookies, so before injecting ngCookies angular-cookies.js should be included in the application.

Set Cookies– Put method is used to set cookies in a key-value format.

$cookies.put(“username”, $scope.username);

Get Cookies –Get method is used to get cookies.

$cookies.get(‘username’);

Clear Cookies –Remove method is used to remove cookies.

$cookies.remove(‘username’);

Differentiate between Angular and AngularJS.

Feature	AngularJS	Angular
*Architecture*	Supports MVC design model	Uses components and directives
*Language*	Recommended Language: JavaScript	Recommended Language: TypeScript
*Expression Syntax*	Specific ng directive is required for the image/property and an event	Uses () to bind an event and [] for property binding
*Mobile Support*	Doesn’t provide any mobile support	Provides mobile support
*Routing*	$routeprovider.when() is used for routing configs	@RouteConfig{(…)} is used for routing config
*Dependency Injection*	Doesn’t supports the concept of Dependency Injection	Supports hierarchical Dependency Injection with a unidirectional tree-based change detection
*Structure*	Less manageable	Simplified structure and makes the development and maintenance of large applications easier
*Speed*	With two-way data binding development effort and time are reduced	Faster than AngularJS with upgraded features
*Support*	No support or new updates are provided anymore	Active support and frequent new updates are made

What is Angular?

Angular is an open-source front-end web framework. It is one of the most popular JavaScript frameworks that is mainly maintained by Google. It provides a platform for easy development of web-based applications and empowers the front end developers in curating cross-platform applications. It integrates powerful features like declarative templates, an end to end tooling, dependency injection and various other best practices that smoothens the development path.

What are the advantages of using Angular?

A few of the major advantages of using Angular framework are listed below:

It supports two-way data-binding
It follows MVC pattern architecture
It supports static template and Angular template
You can add a custom directive
It also supports RESTfull services
Validations are supported
Client and server communication is facilitated
Support for dependency injection
Has strong features like Event Handlers, Animation, etc.

What is Angular mainly used for?

Angular is typically used for the development of SPA which stands for Single Page Applications.

Angular provides a set of ready-to-use modules that simplify the development of single page applications. Not only this, with features like built-in data streaming, type safety, and a modular CLI, Angular is regarded as a full-fledged web framework.

What are Angular expressions?

Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to JavaScript. These expressions are used to bind application data to HTML

Syntax: {{ expression }}

What are templates in Angular?

Templates in Angular are written with HTML that contains Angular-specific elements and attributes. These templates are combined with information coming from the model and controller which are further rendered to provide the dynamic view to the user.

In Angular what is string interpolation?

String interpolation in Angular is a special syntax that uses template expressions within double curly {{ }}braces for displaying the component data. It is also known as moustache syntax.

The JavaScript expressions are included within the curly braces to be executed by Angular and the relative output is then embedded into the HTML code. These expressions are usually updated and registered like watches, as a part of the digest cycle.

What is the difference between an Annotation and a Decorator in Angular?

Annotations in angular are “only” metadata set of the class using the Reflect Metadata library. They are used to create an “annotation” array. On the other hand, decorators are the design patterns that are used for separating decoration or modification of a class without actually altering the original source code.

What do you understand by controllers in Angular?

Controllers are JavaScript functions which provide data and logic to HTML UI. As the name suggests, they control how data flows from the server to HTML UI.

What is scope in Angular?

Scope in Angular is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in a hierarchical structure which mimics the DOM structure of the application. Scopes can watch expressions and propagate events.

What are directives in Angular?

A core feature of Angular, directives are attributes that allow you to write new HTML syntax, specific to your application. They are essentially functions that execute when the Angular compiler finds them in the DOM. The Angular directives are segregated into 3 parts:

Component Directives
Structural Directives
Attribute Directives

What is data binding?

In Angular, data binding is one of the most powerful and important features that allow you to define the communication between the component and DOM(Document Object Model). It basically simplifies the process of defining interactive applications without having to worry about pushing and pulling data between your view or template and component. In Angular, there are four forms of data binding:

String Interpolation
Property Binding
Event Binding
Two-Way Data Binding

What is the purpose of a filter in Angular?

Filters in Angular are used for formatting the value of an expression in order to display it to the user. These filters can be added to the templates, directives, controllers or services. Not just this, you can create your own custom filters. Using them, you can easily organize data in such a way that the data is displayed only if it fulfills certain criteria. Filters are added to the expressions by using the pipe character |, followed by a filter.

What are the differences between Angular and jQuery?

Features	jQuery	Angular
*DOM Manipulation*	Yes	Yes
*RESTful API*	No	Yes
*Animation Support*	Yes	Yes
*Deep Linking Routing*	No	Yes
*Form Validation*	No	Yes
*Two Way Data Binding*	No	Yes
*AJAX/JSONP*	Yes	Yes

What is a provider in Angular?

A provider is a configurable service in Angular. It is an instruction to the Dependency Injection system that provides information about the way to obtain a value for a dependency. It is an object that has a $get() method which is called to create a new instance of a service. A Provider can also contain additional methods and uses $provide in order to register new providers.

How can you differentiate between Angular expressions and JavaScript expressions?

Angular Expressions	JavaScript Expressions
1. They can contain literals, operators, and variables.	1. They can contain literals, operators, and variables.
2. They can be written inside the HTML tags.	2. They can’t be written inside the HTML tags.
3. They do not support conditionals, loops, and exceptions.	3. They do support conditionals, loops, and exceptions.
4. They support filters.	4. They do not support filters.

List at down the ways in which you can communicate between applications modules using core Angular functionality.

Below are the most general ways for communicating between application modules using core Angular functionality:

Using events
Using services
By assigning models on $rootScope
Directly between controllers [$parent,$$childHead,$$nextSibling, etc.]
Directly between controllers [ControllerAs, or other forms of inheritance]

What is the difference between a service() and a factory()?

A service() in Angular is a function that is used for the business layer of the application. It operates as a constructor function and is invoked once at the runtime using the ‘new’ keyword. Whereas factory() is a function which works similar to the service() but is much more powerful and flexible. factory() are design patterns which help in creating Objects.

What is the difference between $scope and scope in Angular?

$scope in Angular is used for implementing the concept of dependency injection (D.I) on the other hand scope is used for directive linking.
$scope is the service provided by $scopeProviderwhich can be injected into controllers, directives or other services whereas Scope can be anything such as a function parameter name, etc.

Explain the concept of scope hierarchy?

The $scope objects in Angular are organized into a hierarchy and are majorly used by views. It contains a root scope which can further contain scopes known as child scopes. One root scope can contain more than one child scopes. Here each view has its own $scope thus the variables set by its view controller will remain hidden to the other controllers. The Scope hierarchy generally looks like:

Root $scope
- $scope for Controller 1
- $scope for Controller 2
- ..
- $scope for Controller ‘n’

What is AOT?

AOT stands for Angular Ahead-of-Time compiler. It is used for pre-compiling the application components and along with their templates during the build process. Angular applications which are compiled with AOT has a smaller launching time. Also, components of these applications can execute immediately, without needing any client-side compilation. Templates in these applications are embedded as code within their components. It reduces the need for downloading the Angular compiler which saves you from a cumbersome task. AOT compiler can discard the unused directives which are further thrown out using a tree-shaking tool.

Explain the process of digest cycle in Angular?

The digest cycle in Angular is a process of monitoring the watchlist for keeping a track of changes in the value of the watch variable. In each digest cycle, Angular compares the previous and the new version of the scope model values. Generally, this process is triggered implicitly but you can activate it manually as well by using $apply().

What are the Angular Modules?

All the Angular apps are modular and follow a modularity system known as NgModules. These are the containers which hold a cohesive block of code dedicated specifically to an application domain, a workflow, or some closely related set of capabilities. These modules generally contain components, service providers, and other code files whose scope is defined by the containing NgModule. With modules makes the code becomes more maintainable, testable, and readable. Also, all the dependencies of your applications are generally defined in modules only.

On which types of the component can we create a custom directive?

Angular provides support to create custom directives for the following:

Element directives− Directive activates when a matching element is encountered.
Attribute− Directive activates when a matching attribute is encountered.
CSS− Directive activates when a matching CSS style is encountered.
Comment− Directive activates when a matching comment is encountered

What are the different types of filters in Angular?

Below are the various filters supported by Angular:

currency: Format a number to a currency format.
date: Format a date to a specified format.
filter: Select a subset of items from an array.
json: Format an object to a JSON string.
limit: To Limits an array/string, into a specified number of elements/characters.
lowercase: Format a string to lower case.
number: Format a number to a string.
orderBy: Orders an array by an expression.
uppercase: Format a string to upper case.

What is Dependency Injection in Angular?

Dependency Injection (DI) is a software design pattern where the objects are passed as dependencies rather than hard-coding them within the component. The concept of Dependency Injection comes in handy when you are trying to separate the logic of object creation to that of its consumption. The ‘config’ operation makes use of DI that must be configured beforehand while the module gets loaded to retrieve the elements of the application. With this feature, a user can change dependencies as per his requirements.

Differentiate between one-way binding and two-way data binding.

In One-Way data binding, the View or the UI part does not update automatically whenever the data model changes. You need to manually write custom code in order to update it every time the view changes.

Whereas, in Two-way data binding, the View or the UI part is updated implicitly as soon as the data model changes. It is a synchronization process, unlike One-way data binding.

What are the lifecycle hooks for components and directives?

An Angular component has a discrete life-cycle which contains different phases as it transits through birth till death. In order to gain better control of these phases, we can hook into them using the following:

constructor: It is invoked when a component or directive is created by calling new on the class.
ngOnChanges: It is invoked whenever there is a change or update in any of the input properties of the component.
ngOnInit: It is invoked every time a given component is initialized. This hook is only once called in its lifetime after the first ngOnChanges.
ngDoCheck: It is invoked whenever the change detector of the given component is called. This allows you to implement your own change detection algorithm for the provided component.
ngOnDestroy: It is invoked right before the component is destroyed by Angular. You can use this hook in order to unsubscribe observables and detach event handlers for avoiding any kind of memory leaks.

What do you understand by dirty checking in Angular?

In Angular, the digest process is known as dirty checking. It is called so as it scans the entire scope for changes. In other words, it compares all the new scope model values with the previous scope values. Since all the watched variables are contained in a single loop, any change/update in any of the variable leads to reassigning of rest of the watched variables present inside the DOM. A watched variable is in a single loop(digest cycle), any value change of any variable forces to reassign values of other watched variables in DOM

Differentiate between DOM and BOM.

DOM	BOM
1. Stands for Document Object Model	1. Stands for Browser Object Model
2. Represents the contents of a web page	2. Works a level above web page and includes browser attributes
3. All the Objects are arranged in a tree structure and the document can be manipulated & accessed via provided APIs only	3. All global JavaScript objects, variables & functions become members of the window object implicitly
4. Manipulates HTML documents	4. Access and manipulate the browser window
5. W3C Recommended standard specifications	5. Each browser has its own implementation

What is Transpiling in Angular?

Transpiling in Angular refers to the process of conversion of the source code from one programming language to another. In Angular, generally, this conversion is done from TypeScript to JavaScript. It is an implicit process and happens internally.

How to perform animation in Angular?

In order to perform animation in an Angular application, you need to include a special Angular library known as Animate Library and then refer to the ngAnimate module into your application or add the ngAnimate as a dependency inside your application module.

What is transclusion in Angular?

The transclusion in Angular allows you to shift the original children of a directive into a specific location within a new template. The ng directive indicates the insertion point for a transcluded DOM of the nearest parent directive that is using transclusion. Attribute directives like ng-transclude or ng-transclude-slot are mainly used for transclusion.

What are events in Angular?

Events in Angular are specific directives that help in customizing the behavior of various DOM events. Few of the events supported by Angular are listed below:

ng-click
ng-copy
ng-cut
ng-dblclick
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-blur

List some tools for testing angular applications?

Karma
Angular Mocks
Mocha
Browserify
Sion

How to create a service in Angular?

In Angular, a service is a substitutable object that is wired together using dependency injection. A service is created by registering it in the module it is going to be executed within. There are basically three ways in which you can create an angular service. They are basically three ways in which a service can be created in Angular:

Factory
Service
Provider

What is a singleton pattern and where we can find it in Angular?

Singleton pattern in Angular is a great pattern which restricts a class from being used more than once. Singleton pattern in Angular is majorly implemented on dependency injection and in the services. Thus, if you use ‘new Object()’ without making it a singleton, then two different memory locations will be allocated for the same object. Whereas, if the object is declared as a singleton, in case it already exists in the memory then simply it will be reused.

What do you understand by REST in Angular?

REST stands for Representational State Transfer. REST is an API (Application Programming Interface) style that works on the HTTP request. In this, the requested URL pinpoints the data that needs to be processed. Further ahead, an HTTP method then identifies the specific operation that needs to be performed on that requested data. Thus, the APIs which follows this approach are known as RESTful APIs.

What is bootstrapping in Angular?

Bootstrapping in Angular is nothing but initializing, or starting the Angular app. Angular supports automatic and manual bootstrapping.

Automatic Bootstrapping: this is done by adding the ng-app directive to the root of the application, typically on the tag or tag if you want angular to bootstrap your application automatically. When Angular finds ng-app directive, it loads the module associated with it and then compiles the DOM.
Manual Bootstrapping: Manual bootstrapping provides you more control on how and when to initialize your Angular application. It is useful where you want to perform any other operation before Angular wakes up and compile the page.

What is the difference between a link and compile in Angular?

Compile function is used for template DOM Manipulation and to collect all the directives.
Link function is used for registering DOM listeners as well as instance DOM manipulation and is executed once the template has been cloned.

What do you understand by constants in Angular?

In Angular, constants are similar to the services which are used to define the global data. Constants are declared using the keyword “constant”. They are created using constant dependency and can be injected anywhere in controller or services.

What is the difference between a provider, a service and a factory in Angular?

Provider	Service	Factory
A provider is a method using which you can pass a portion of your application into app.config	A service is a method that is used to create a service instantiated with the ‘new’ keyword.	It is a method that is used for creating and configuring services. Here you create an object, add properties to it and then return the same object and pass the factory method into your controller.

What are Angular Global APIs?

Angular Global API is a combination of global JavaScript functions for performing various common tasks like:

Comparing objects
Iterating objects
Converting data

There are some common Angular Global API functions like:

angular. lowercase: Converts a string to lowercase string.
angular. uppercase: Converts a string to uppercase string.
angular. isString: Returns true if the current reference is a string.
angular. isNumber: Returns true if the current reference is a number.

In Angular, describe how will you set, get and clear cookies?

For using cookies in Angular, you need to include a module called ngCookies angular-cookies.js.

To set Cookies – For setting the cookies in a key-value format ‘put’ method is used.

cookie.set(‘nameOfCookie’,”cookieValue”);

To get Cookies – For retrieving the cookies ‘get’ method is used.

cookie.get(‘nameOfCookie’);

To clear Cookies – For removing cookies ‘remove’ method is used.

cookie.delete(‘nameOfCookie’);

What are the important parts of AngularJS metadata?

AngularJS metadata is used to decorate a class that depicts the expected behavior of a particular class. Various parts of metadata are: 1) class decorator, 2) Method decorators, Parameter decorators, and 4) Property decorators.

What is Angular CLI?

Angular CLI is also called as the command line interface tool. It is used to build, initialize, and maintain Angular apps. CLI software can be used through very interactive UI like a command shell or Angular Console.

Explain parameterized pipe in AngularJS

In angularJS, pipes can have more than one parameter in order to tune the fine output. You can create a parameterized pipe by declaring the pipe with colon(:) and values of parameter. Developer can separate multiple parameter values with colon(:).

What is Routing?

Routing is a method of merging various views. The controller takes the decision to combine these views depend on logical needs.

What do you mean by isolated unit tests?

Isolated test is a process of checking instance of class without using any injected values or Angular dependence. It helps you to implement program very easily.

Name DSL animation functions in AngularJS

DSL animation functions in AngularJS are: 1) group(), 2) state(), 3) transition(), 4) style(), 5) keyframes(), 6) trigger(), 7) sequence(), and 8) animate().

What is AngularJS module?

In angularJS, a module is a process to group directives, and services components that are related. It arranges them in a way that they can mix with other modules to create an application.

What are pipes in AngularJs?

In angular, pipes provide a simple method to transform the data. It takes the values like arrays, integers, data, and strings as input and divided with pipe (|) symbol. It converts the data in the required format. Pipes displays the same thing in the browser. In angularJS, it provides some in-built pipes, but developers can also develop their own pipes.

Explain ViewEncapsulation in AngularJS

ViewEncapsulation determines whether the styles defined in the AngularJS component will affect the entire app or not.

If your data model is updated outside the ‘Zone’, explain the process how will you the view?

You can update your view using any of the following:

ApplicationRef.prototype.tick(): It will perform change detection on the complete component tree.
NgZone.prototype.run(): It will perform the change detection on the entire component tree. Here, the run() under the hood will call the tick itself and then parameter will take the function before tick and executes it.
ChangeDetectorRef.prototype.detectChanges(): It will launch the change detection on the current component and its children.

Explain ng-app directive in Angular.

ng-app directive is used to define Angular applications which let us use the auto-bootstrap in an Angular application. It represents the root element of an Angular application and is generally declared near <html> or <body> tag. Any number of ng-app directives can be defined within an HTML document but just a single Angular application can be officially bootstrapped implicitly. Rest of the applications must be manually bootstrapped.

Example

<div ng-app=“myApp” ng-controller=“myCtrl”>
First Name :
<input type=“text” ng-model=“firstName”>
<br />
Last Name :
<input type=“text” ng-model=“lastName”>
<br>
Full Name: {{firstName + ” ” + lastName }}
</div>

How can you hide an HTML element just by a button click in angular?

An HTML element can be easily hidden using the ng-hide directive in conjunction along with a controller to hide an HTML element on button click.

View

<div ng-controller="MyController">

<button ng-click="hide()">Hide element</button>

<p ng-hide="isHide">Hello World!</p>

</div>

Controller

controller: function() {

this.isHide = false;

this.hide = function(){

this.isHide = true; }; }

In 30 seconds, define AngularJS.

AngularJS is an open-source JavaScript framework designed for creating dynamic single web page applications with fewer lines of code.

Mention some advantages of using the AngularJS framework.

Some of the key advantages of using AngularJS framework include:

It provides an excellent “desktop-like” experience to the end-user.
By freeing the developer from having to register callbacks manually or write repetitive low-level DOM manipulation tasks, it saves months of development.
By separating DOM manipulation from app logic, it makes code modular and easy to test.
It supports two-way data binding.

What is the main thing that you would need to change if you were migrating from AngularJS 1.4 to AngularJS 1.5?

To adapt to the new AngularJS 1.5 components, you would need to change .directive to .component

Is AngularJS compatible with all browsers?

Yes.

What are the key features of AngularJS?

Scope
Controller
Model
View
Services
Data Binding
Directives
Filters
Testable

Define scope in AngularJS.

The scope is a unique JavaScript object that plays the role of joining the controller (JavaScript) with the views (HTML). The controller sets properties on the scope, and the view binds to them.

Explain the concept of scope hierarchy.

Each AngularJS application has only one root scope. Child controllers, however, create scope for each view. When the new scopes are created, they are added to their parent root scope as child scopes. This creates a hierarchical structure when they are attached.

What is data binding in AngularJS and What is the difference between one-way and two-way binding?

Data binding is the automatic attunement of data between the view and model components. AngularJS uses two-way data binding. In one-way binding, the scope variable in the HTML is set to the first value that its model is assigned to.

In two-way binding, the scope variable changes its value every time its model binds to a different value.

What are directives?

Directives are unique markers on a DOM element that tell the HTML compiler to attach a specified behavior to the DOM element. Directives start with ng-prefix. Some of the built-in directives include ngClass, ngApp, ngRepeat, ngModel, ngBind and ngInit.

List the different types of directives.

There are four types of directives:

Comment directives
CSS class directives
Attribute directives
Element directives

In what ways can you use a directive?

You can use a directive as an element, attribute, or class name. To define the way your directive will be used, you need to set the restrict option in the directive declaration. The restrict option can be set to:

‘A’ – Only matches attribute name
‘C’ – Only matches class name
‘E’ – Only matches element name

You can combine these restrictions to produce needed results.

Explain what a digest cycle is in AngularJS.

During every digest cycle, all new scope model values are compared against the previous values. This is called dirty checking. If change is detected, watches set on the new model are fired, and another digest cycle executes. This goes on until all models are stable.

The digest cycle is triggered automatically, but it can be called manually using “.$apply().”

What are the common ways of communication between modules of your application, using core AngularJS functionality?

The common ways of communication include:

Using events
Using services
By assigning models on $rootScope
Directly between controllers using ControllerAs and other forms of inheritance
Directly between controllers using $parent, $$childHead, $$nextSibling

Explain what the link function is and how it differs from compile.

The link function combines the directives with a scope to produce a live view.
The link function is responsible for instance DOM manipulation and for registering DOM listeners.
The compile function is responsible for template DOM manipulation as well as the 62.collection of all the directives.

Explain e2e testing of AngularJS applications.

End-to-end (e2e) testing involves testing an application from start to finish to determine whether all the components are working correctly. It catches issues within an application related to integration and flow.

What is dependency injection?

Dependency injection is the process where the dependent objects are injected rather than being created by the consumer.

What are the benefits of dependency injection?

Dependency injection has two significant benefits: Testing and decoupling.

What is a Single Page Application (SPA)?

SPA is the concept whereby pages are loaded from the server not by doing postbacks, instead of by creating a single shell page or master page and loading the web pages into the master page.

How can a SPA be implemented in AngularJS?

SPA can be implemented with Angular by using Angular routes.

How can digest cycle time be decreased?

Digest cycle time can be decreased by decreasing the number of watchers. To do this, you can:

Use web worker
Work in batches
Cache DOM
Remove unnecessary watchers
Use one-time Angular binding

What is Angular JS ?

AngularJS is a JavaScript framework that is used for making rich, extensible web applications. It runs on plain JavaScript and HTML, so you don’t need any other dependencies to make it work.AngularJS is perfect for Single Page Applications (SPA). It is basically used for binding JavaScript objects with HTML UI elements.

Explain the architecture of AngularJS ?

AngularJS is architecture on 3 components. They are

The Template (View)
The Scope (Model)
The Controller (Controller)

AngularJS extends HTML attributes with Directives and binds data to HTML with Expressions.

What is the Template in AngularJS ?

The template is the HTML portion of the angular app. It is exactly like a static HTML page, except that templates contain additional syntax which allows data to be injected in it in order to provide a customized user experience.

What is the scope in AngularJS ?

The scope is the object that represents the “model” of your application. It contains fields that store data which is presented to the user via the template, as well as functions which can be called when the user performs certain actions such as clicking a button.

What is the controller in AngularJS ?

The controller is a function which generally takes an empty scope object as a parameter and adds to it the fields and functions that will be later exposed to the user via the view.

Explain Directives in AngularJs ?

AngularJS directives are extended HTML attributes with the ng refix. The 3 main directives of angular js are:

ng-app:-directive is used to flag the HTML element that Angular should consider to be the root element of our application. Angular uses the spinal-case for its custom attributes and camelCase for the corresponding directives which implement them.
ng-model:-directive allows us to bind values of HTML controls (input, select, textarea) to application data. When using ngModel, not only change in the scope reflected in the view, but changes in the view are reflected back into the scope.
ng-bind:-directive binds application modal data to the HTML view.

Explain basic steps to set up an Angular JS app?

Create an angular.module

Assign a controller to the module
Link your module to HTML with ng-app
Link the controller to HTML with ng-controller directive

What are AngularJS Modules?

Angular Modules are place where we write code of our Angular application.Writing Modules makes our code more maintainable, testable, and readable. All dependencies for our app are defined in modules.

Explain Directive scopes in AngularJs ?

There are three types of directive scopes available in Angular.

Parent Scope: is default scope
Child Scope: If the properties and functions you set on the scope are not relevant to other directives and the parent, you should probably create a new child scope.
Isolated Scope: Isolated Scope is used if the directive you are going to build is self-contained and reusable. Does not inherit from parent scope, used for private/internal use.

How to isolate a directive’s Scope in AngularJS ?

You can isolate a directive’s Scope by passing an object to the scope option of directive.
This tells the directive to keep scope inside of itself and not to inherit or share with other scopes.

What is the difference between one-way binding and two-way binding in AngularJS ?

In One-Way data binding, view (UI part) not updates automatically when data model changed. We need to write custom code to make it updated every time.
ng-bind has one-way data binding.

While in two way binding scope variable will change it’s value every time its data model changed is assigned to a different value.

How would you make an AngularJS service return a promise? Write a code snippet as an example

To add promise functionality to a service, we inject the “$q” dependency in the service, and then use it like so:

angular.factory('testService', function($q){

return {

getName: function(){

var deferred = $q.defer();

//API call here that returns data

testAPI.getName().then(function(name){

deferred.resolve(name)

})

return deferred.promise;

}

}

})

The $q library is a helper provider that implements promises and deferred objects to enable asynchronous functionality

Source: https://docs.angularjs.org/api/ng/service/$q

Explain the role of $routeProvider in AngularJS ?

The $routeProvider is used to configure roots within an AngularJS application. It can be used to link a URL with a corresponding HTML page or template, and a controller (if applicable).

Explain how does AngularJS implement two-way binding?

Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change and vice versa.

What is dependency injection In AngularJs and how does it work?

AngularJS was designed to highlight the power of dependency injection, a software design pattern that places an emphasis on giving components of their dependencies instead of hardcoding them within the component. For example, if you had a controller that needed to access a list of customers, you would store the actual list of customers in a service that can be injected into the controller instead of hardcoding the list of customers into the code of the controller itself. In AngularJS you can inject values, factories, services, providers, and constants.

What is $rootscope in AngularJS ? How is it different from the scope?

In Angular JS $rootscope and $scope both are an object which is used for sharing data from the controller to view.
The main difference between $rootscope and $scope is that $rootscope is available globally to across all the controllers whereas $scope is available only in controllers that have created it along with its children controllers.

List some tools for testing AngularJS applications?

For testing AngularJS applications there are certain tools that you should use that will make testing much easier to set up and run.

Karma

Karma is a JavaScript command line tool that can be used to spawn a web server which loads your application’s source code and executes your tests. You can configure Karma to run against a number of browsers, which is useful for being confident that your application works on all browsers you need to support. Karma is executed on the command line and will display the results of your tests on the command line once they have run in the browser.

Karma is a NodeJS application and should be installed through NPM/YARN. Full installation instructions are available on the Karma website.

Jasmine

Jasmine is a behavior-driven development framework for JavaScript that has become the most popular choice for testing AngularJS applications. Jasmine provides functions to help with structuring your tests and also making assertions. As your tests grow, keeping them well structured and documented is vital, and Jasmine helps achieve this.

Jasmine comes with a number of matches that help you make a variety of assertions. You should read the Jasmine documentation to see what they are. To use Jasmine with Karma, we use the karma-jasmine test runner.

angular-mocks

AngularJS also provides the ngMock module, which provides mocking for your tests. This is used to inject and mock AngularJS services within unit tests. In addition, it is able to extend other modules so they are synchronous. Having tests synchronous keeps them much cleaner and easier to work with. One of the most useful parts of ngMock is $httpBackend, which lets us mock XHR requests in tests and return sample data instead.

Source:https://docs.angularjs.org/guide/unit-testing

How do you share data between controllers in AngularJs ?

We can share data by creating a service, Services are the easiest, fastest and cleaner way to share data between controllers in AngularJs.There are also other ways to share data between controllers, they are

Using Events
$parent, nextSibling, controllerAs
Using the $rootScope

Explain AngularJS digest cycle?

AngularJS digest cycle is the process behind Angular JS data binding. In each digest cycle, Angular compares the old and the new version of the scope model values. The digest cycle is triggered automatically. We can also use $apply() if we want to trigger the digest cycle manually.

What is internationalization in AngularJS ?

Internationalization is a way to show locale-specific information on a website.It is used to create multilingual language websites.

Difference between AngularJS and JavaScript Expressions?

Below are some major differences between AngularJS and JavaScript Expressions

Both can contain literals, operators, and variables.
AngularJS expressions can be written in HTML but JavaScript expressions are not.
AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.
AngularJS expressions support filters, while JavaScript expressions do not.

What is the difference between $scope and scope in AngularJS?

In Angular js $scope is used whenever we have to use dependency injection (D.I) whereas as the scope is used for directive linking.

What are AngularJS Expressions?

Angular js Expression is JavaScript alike code snippets used to bind expression data in view or HTML. Angular expressions are written inside two curly braces.

List the major browsers Supported by AngularJS?

Below are some major browsers supported by Angular js

Mozilla Firefox
Google Chrome
Microsft Edge
IE 10,11
IE Mobile,
Safari, iOS
Android: Nougat (7.0) Marshmallow (6.0)

How to enable HTML5 mode in Angular 1.x?

html5Mode method of $locationProvider module is used to enable HTML5 mode in Angular 1.x. For creating pretty URLs and removing # from URLs html5Mode need to true.

Enabling html5Mode to true in Angular 1.x.

angular.module('myApp', [])

.config(function($routeProvider, $locationProvider) {

$routeProvider

.when('/', {

templateUrl : 'partials/home.html',

controller : mainController

})

// use the HTML5 History API

$locationProvider.html5Mode(true);

});

List some of the built-in validators in AngularJS ?

Angular js supports all standard HTML5 attributes to validate input. Below are few built-in validators in Angular js.

required
min
max
type=”number” OR type=”email”

What is AngularJS prefixes $ and $$?

Angular uses these prefixes to prevent accidental code collision with users code.
$ prefix is used with public objects whereas $$ prefix is used with a private object.

What are directives? How to create and use custom Directive in AngularJS .

In angular Directives are used to extend the attributes of Html elements.
Creating custom directive in Angular js.
Angular js Directives are restricted to element and attribute and created using a directive function.Here is sample code to create a directive in Angular js.

var app = angular.module("myApp", []);

app.controller('AppController', function($scope) {

var users=[];

var user1={};

user1.firstName="Satyam";

user1.lastName="Kumar";

users.push(user1);

var user2={};

user2.firstName="Ravi";

user2.lastName="Sankar";

user2.push(user2);

$scope.users=students;

});

app.directive('user', function() {

//define the directive object

var directive = {};

//restrict = E, implies that directive is Element directive

directive.restrict = 'E';

//element will be replaced by this text/html

directive.template = "First Name: {{user.firstName}}, Last Name:  {{user.lastName}}";

var linkFunction = function($scope, element, attributes) {

element.css("background-color", "#e1e1e1");

}

directive.link=linkFunction;

return directive;

});

As Above directive is restricted to Element directive, so you can use this directive as an element only.
Usage:

<div ng-app="app">

<h1>Custom Directive Demo</h1>

<div ng-controller="UserController">

<div ng-repeat="user in users">

<user></user>

</div>

</div>

</div>

How to access parent scope from child controller in AngularJS ?

In angular there is a scope variable called $parent (i.e. $scope.$parent). $parent is used to access parent scope from child controller in Angular JS.
Example:

<div ng-controller="ParentCtrl">

<h1>{{ name }}</h1>

<p>{{ address }}</p>

<div ng-controller="ChildCtrl">

<h1>{{ title }}</h1>

<input type="text" ng-model="$parent.address" />

</div>

How to do email and Phone no. validation in AngularJS ?

Angular form validation and ng-pattern directive can be used to validate the email and phone number in Angular JS.

What is the difference between a link and compile in AngularJS ?

Compile function : To template DOM manipulation and to gather all the directives, the compile function is used.

Link function : To register DOM listeners as well as for the instance DOM manipulation, the Link function is used.

How can you get URL parameters from AngularJS Controller?

The RouteProvider and the RouteParams can be used to get the URL parameters in the controller.
As the route wires up the URL to the controller and RouteParams can be passed to the controller to get the URL parameters.

How to enable caching in Angular 1.x?

Caching can be enabled by setting the config.cache value or the default cache value to TRUE or to a cache object that is created with $cacheFactory.
In case you want to cache all the responses, then you can set the default cache value to TRUE.
And, if you want to cache a specific response, then you can set the config.cache value to TRUE.

Explain the use of Ng-If, Ng-Switch, And Ng-Repeat directives in AngularJS ?

ng-if– This directive removes a portion of the DOM tree, which is based on the expression.
In case the expression is assigned to ng-if, it evaluates to a false value, and then the element is deleted from the DOM tree, or else a clone of the element is reinserted into the DOM.

ng-switch– This directive is used based on a scope expression to conditionally swap DOM structure on the template.
The ng-switch default directive will be preserved at the specific location in a template.

ng-repeat– This directive is used to instantiate the template once per item from a collection.
Each template which is instantiated gets its own scope where the given loop variable is set to the current collection of item.

How to change start and end symbols used for AngularJS expressions?

Passing the $interpolateprovider in the config can help us change the start and end symbols used in our Angular JS expressions.

List some difference between AngularJS and Angular 2?

Difference between AngularJS and Angular 2

AngularJS	Angular 2
Angular js or Angular 1.x is based on MVC Architecture	Angular 2 is based on service/ components
Javascript is used to write applications in Angular js.	Typescript (a superset of javascript) is used to write an application in Angular2.
A controller is used to writing logic and interact with Model and view.	In Angular 2 Controllers are totally eliminated and Components take its place.
Angular 1 is created for developing Single page web-applications.	In Angular 2 can be used for developing native applications for a mobile platform like React Native as well as interactive web applications.
Angularjs is easy to set up, you just need to include the angular.js library to start.	Angular 2 is dependent on other modules/ package. It gives little brainstorm to install and run Angular 2.
In Angularjs ng-app directive is used bootstrap the app.	ng-app is removed in Angular 2. You need to call Angular2 bootstrap method to bootstrap your application.

How to validate an URL in AngularJS ?

Adding the regex directly to the ng pattern to the attribute can help you validate the URL in Angular JS.

What is the use of $locale service in AngularJS ?

locale service provides with the localization rules for Angular JS components.

What is transclusion in AngularJS ?

The transclusion in Angular JS will allow you to move the original children of a directive to a specific location inside a new template.The ng directive marks the insertion point for the transcluded DOM of the very near parent directive that uses transclusion. ng-transclude or ng-transclude-slot attribute directives are used for transclusion in Angular JS.

What is a locale ID in AngularJS ?

A locale is a particular geographical region. The commonly used locale ID comprises of two parts, the language code, and the country code.

What is the difference between a stateful and stateless component in AngularJs ?

A stateful component is a detail implementation of the component that can change over time and the stateful components can have stateless components inside them, while the stateless components are a plain JavaScript function.

List some methods supported by $http service in AngularJS ?

Some of the methods supported by $http services are

GET
HEAD
POST
PUT
DELETE
CONNECT
OPTIONS
TRACE

What is “track by” in AngularJS and how does it work?

The track by is used with ng-repeat and describes to AngularJS how it tracks the association between the DOM and the Model. It improves the rendering performance.

Explain $templateCache in AngularJs ?

$templateCache is a Cache object that is created by the $cache factory. The first time you use a template, it is loaded in the $templateCache for easy and quick retrieval.

What is the difference between a unit and end-to-end (e2e) test in AngularJS ?

AngularJS provides full support for both the unit and end-to-end testing .
The unit testing is a method that helps the developers validate the isolated pieces of code and end-to-end testing is required when you want to ascertain the set of components integrated together work as you expect.

Explain .config() and .run() methods in AngularJS ?

.config()– The .config() function is used to add configuration blocks on the module.

.run()– The .run() function is used to add run blocks on the module.

What is a Mocked Service in AngularJs? How to use it?

It is the most common type of dependency on AngularJS application. A service can be mocked in two ways by either getting an instance of actual service using an inject block or by implementing a mock service using $provide.

How to implement caching in Angular 1.x?

The caching is implemented by using a cache object that stores and retrieves data and is primarily used by $templaterequest and script directive to cache the templates.

What are Compile, Pre, and Post linking in AngularJS ?

Compile– It compiles an HTML DOM into a template and produces a template function that is used to link scope and template together. It is executed only once.

Pre-link– It is executed before the child elements are linked.

Post-link– It is executed after the child elements are linked.

How to use $scope.$watch and $scope.$apply in AngularJS ?

In AngularJS $scope.$watch the function is used to create a watch of some variables and $scope.$apply function is used to execute some code and call the $digest function.

How to use Multiple ng-app within a page in AngularJS ?

There are two ways to use a Multiple ng-app within a single page in AngularJS. One is the bootstrap method and the other is ngModules directive.

How to set focus on the input field in Angular 1.x?

Define a directive, use that directive on the element we are targeting and have it $watch a trigger/property to know when to focus the element.

How to send an Http post request in AngularJS ?

The $http.post method is used to send an http post request in AngularJS. The method has three parameters namely URL, data, config.

What is the difference between ‘this’ vs $scope in AngularJS controllers?

The $scope is an object with the available methods and properties. It is used to get all controls on the controller.JS files. It is available for both the controller and the view. “This” is the controller used when the controller’s constructor function is called.

How $location is different from window.location in AngularJS ?

$Location is used when you don’t want the full page to reload when the URL is changed and the window.location is used when you want to change the URL, reload the page or navigate to a different page.

What is the use of ng-cloak directive in AngularJS ?

It is used to prevent the Angular HTML template from getting displayed briefly by the browser in its uncompiled form while the application is still loading. It is used to avoid the undesirable flicker effect caused by HTML template display.

How to do Animation in AngularJS ?

To animate the application, you need to include the AngularJS Animate Library and then refer to the ngAnimate module into the application or add ngAnimate as a dependency in your application module.

How to format a date in AngularJS ?

The AngularJS provides a date filter through which you can format the date into the required form.

Syntax: {{ today | date:’MM/dd/yyyy’}}

What is $emit, $broadcast and $on in AngularJS ?

$broadcast, $emit, and $on are services in Angular Js. Below we have listed why they are used In Angular JS.

$broadcast(): $broadcast() service of Angular is used to propagate the event to all of his child controllers and it’s registered parent $rootscope.scope listeners.

$rootScope.$broadcast(‘SummaryEvent’, {

priority: priority

});

$on(): AngularJS $on() service is used to listen any type of event raised by $broadcast and $emit.

$scope.$on(”SummaryEvent”, function (event, args) {

Vm.priority=args.priority

});

$emit: $emit is similar to $broadcast service but it is used to propagate the event to upwards through the scope hierarchy and notify to the registered $rootScope.Scope listeners.

What are scopeless controller in AngularJS ? why to use them?

Scopeless controllers have no $scope injected and the functions and properties are binded directly onto the controller. Scopeless controllers are used in the situation where the controller becomes complex by using the $scope to provide data.

What is Isolate Scope in AngularJS and why it is required?

It is a scope that exists separately with no prototypal inheritance. It makes the components reusable and permits to control the binding either one-way or two-way.

What is the difference between $evalAsync and $timeout in AngularJS ?

$evalAsync executes the expression on the current scope at a later time and makes no guarantees as to when the expression will be executed. $timeout also executes the expression on the current scope on later time but also runs after the DOM has been manipulated by the Angular and after the browser renders that cause flicker in some cases.

How to disable right click event in AngularJS ?

In order to disable the right click event in AngularJS, you need to add the disable-right-click as the element’s attribute. Simply use preventDefault(), this cancels the event and stops further propagation of the event.

What is a provider in AngularJS ?

The provider in AngularJS is used to internally create a factory, services etc., during the phase of configuration. The provider is the special factory method which is used to return the service/value/factory.

Explain Bootstrapping in AngularJS ?

After reading the HTML which is there within the root, Angular compiles it all into an internal representation. This process of reading and compiling is called as the bootstrapping process. When the code is written instead of the use of the ng-app directive, manual bootstrapping is done. It is actually the functional component that is there in the Core ng module which is actually used so that the user can start up an application hosted by Angular manually. Thereby it provides more control over the beginning of the application.

How AngularJS is different from Jquery?

AngularJS is a framework with key features like models, two-way binding, directives, routing, dependency injections, unit tests etc., whereas the Jquery is a library used for DOM manipulation with no two-way binding features.

List and explain different types of directive available in AngularJS ?

The different types of directives available in AngularJS are:

Element directives− It activates when a matching element is encountered.
Attribute− It activates when a matching attribute is encountered.
CSS− It activates when a matching CSS style is encountered.
Comment− It activates when a matching comment is encountered.

What is a dynamic route in AngularJS and how do you implement it?

A dynamic route is a typical approach to server communication is using the HTTP server. In order to implement it, firstly write a config function that uses $http and $routeprovider to gather all information on available routes.

What is different between ng routing and UI routing in AngularJS ?

The ng routing is deep linking services and directives for angular applications whereas the UI routing is a 3rd party module routing and is very powerful. It does everything an ng router does as well as has many other extra functions.

Explain UI Routing in AngularJS?

It is a routing framework for AngularJS and provides a different approach than ngRoute. It changes the application views based on the state of the application and not just the route URL

Explain Routing in AngularJS?

Routing is one the core feature of AngularJs Framework that is useful in building a single page web application with multiple views. In Angular ngRoute Module is used to implement Routing. ngView, $routeProvider, $route and $routeParams are different components of the ngRoute Module that helps to configure and mapping Url to views.

Explain Event in AngularJS, List some events you have worked in AngularJS?

The AngularJS framework includes certain directives that can be used to provide the custom behavior on various DOM events. Some of the events are:

ng-click
ng-keyup
ng-keydown
ng-keypress
ng-dblclick
ng-mousedown
ng-mouseleave
ng-mouseenter
ng-change

How to create a service in AngularJS?

The service in AngularJS is created by registering it with the module it is going to operate in. There are three ways to create the angular service. They are:

Factory
Service
Provider

How to disable a control or element in AngularJS?

Using ng-disabled attribute will help you disable element in AngularJS.

Explain ng-include directive in AngularJS?

The HTML pages can be embedded within an HTML page using the ng-include directive.

How to hide or show a div in AngularJS?

In order to hide/show the div in AngularJS just get rid of display: none, the rest is in the control. If you want to hide it by default then set the value of scope.myvalue to false.

How to create a service using Factory in AngularJS?

Creating a service using the module’s factory API is one of the most common ways to create a service. We first create an object, add properties to it and return the same object, which can later be injected into the components like service, controller, filter or directive.

List some inbuilt services in AngularJs ?

There are 30 inbuilt services in AngularJs.
Below are few most used services in AngularJs.

$location
$scope
$http
$timeout
$interval
$window

What are filters in AngularJS ? Can you list some?

Angualr.JS filters are efficient in modifying the data. With the help of pipe (|) character, they are clubbed into the directive or expression.

Filters	Functions
Uppercase	It used to convert text to upper case text.
Lowercase	It used to convert text to lower case text.
Currency	It is used to formats a number to a currency format.
Order by	It is used to orders the array on the basis of given criteria.
Filter	It is used to order the array to a subset of it on the basis of given criteria.

List some Cons or disadvantages of using AngularJS?

Here is the list of cons of AngularJS

JavaScript support mandatory

Just be imaginative, the devices that access your server but they are disabled for JavaScript. So the users are unable to access your web apps or website. In the case of a great number of users, AngularJS based web is not so efficient. In spite of this, it is good for plain HTML-based web.

Greenness with Model View Controller (MVC)

If you are a developer and want to do some traditional with almost zilch knowledge of MVC then you are not advised to use the Angular.JS because it will be time-consuming for you. You should hire an expert who has good knowledge of MVC if you are short in time to submit the project

The dilemma scopes

If you are fresh in Angular.JS then it will be difficult for you to deal with complex entities such as Quite layered and hierarchically and scopes. Debugging the scope is believed a very hard task for many programmers.

Other difficult features

There are several features of Angular.JS like directives, dependency injection and factories which are hard to use. So, you have to spend a lot of time on it to understand all of them or prefer to hire an expert.

Time consumption in old devices

The browser on old computers and mobile are failed or take a little more time to render pages of application and websites designed using the framework. It happens because the browser begins to complete some supplementary tasks like DOM manipulation. But this quibble does not seem in the new devices.

Difficult to learn

It is very hard to accustom to the framework. Plus, you may get some additional problems like limited documentation. But Angular.JS continuously make it easier

Explain DDO in AngularJs?

DDO Stands for Directive Definition Object. DDO is used while creating a custom directive in AngularJs.

What is an interceptor in Angular? Why it is used?

An interceptor is a middleware code in AngularJs where all the $http requests go through. It is attached with $httpProvider service and able to intercept request and response objects. Interceptor Middleware is useful for error handling, authentication and other filters you want to apply on request and response.

Explain the functionality angular.copy() method?

It is used to allocating the value of an object into another object however the object value must not be altered.

If you are adding any new property or altering any value of the property then the object noting to the same object will update by applying angular. Copy() method.

Which filter will be executed one or more times during the each $Digest cycle?

$stateful filters are executed one or more times during each $Digest cycle. It is not recommended to write a $stateful filter in AngularJS.

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.

What are the key features of AngularJS?

The key features of AngularJS are:

Scope
Controller
Model
View
Services
Data Binding
Directives
Filters
Testable

Explain function scope in AngularJS

Scope refers to the application model. It acts like a 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.

Explain services in AngularJS

AngularJS services are the singleton objects or functions that are used for carrying out specific tasks. It holds some business logic.

What is Angular Expression? Explain the key difference between angular expressions and JavaScript expressions

Like JavaScript, Angular expressions are code snippets that are usually placed in binding such as {{ expression }}

The key difference between the JavaScript expressions and Angular expressions is:

Context: In Angular, the expressions are evaluated against a scope object, while the JavaScript expressions are evaluated against the global window
Forgiving: In Angular expression, evaluation is forgiving to null and undefined, while in JavaScript undefined properties generate TypeError or ReferenceError
No Control Flow Statements: Loops, conditionals or exceptions cannot be used in an angular expression
Filters: You can use filters to format data before displaying it.

How can you initialize a select box with options on page load?

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 ( ) “>

What are directives? Name some of the most commonly used directives in AngularJS application

A directive is something that introduces new syntax. They are like markers on the DOM element, which attaches a special behavior to it. In any AngularJS application, directives are the most important components.

Some of the commonly used directives are:

1) ng-model

2) ng-App

3) ng-bind

4) ng-repeat

5) ng-show

How Angular JS routes work?

AngularJS routes enable you to create different URLs for different content in your application. Different URLs for different content enable 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

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

What are the benefits of AngularJS?

Benefits of AngularJS are:

Registering Callbacks: There is no need to register callbacks. This makes your code simple and easy to debug.
Control HTML DOM programmatically: Applications which are created using Angular are not required to manipulate the DOM.
Transfer data to and from the UI: AngularJS helps to eliminate almost all of the boilerplate. It can validate the form, display errors, return to an internal model, and so on.
No initialization code: With AngularJS, you can bootstrap your app easily. You can use auto injected services into your application in Guice.

What is string interpolation in AngularJS?

In Angular.js, the compiler during the compilation process matches text and attributes. It uses interpolate service to see if they contain embedded expressions. As part of the normal digest cycle, these expressions are updated and registered as watches.

What are the steps for the compilation process of HTML?

Compilation of HTML process occurs in the following ways

Using the standard browser API, first, the HTML is parsed into DOM
By using the call to the $compile () method, a compilation of the DOM is performed. The method traverses the DOM and matches the directives.
Link the template with a scope by calling the linking function returned from the previous step

Explain directives and their types

During compilation process, when specific HTML function is triggered, it is referred to as directive. It is executed when the compiler encounters it in the DOM.

Different types of directives are:

1) Element directives

2) Attribute directives

3) CSS class directives

4) Comment directives.

Explain the linking function and its types

Link combines the directives with a scope and produces a live view. For registering DOM listeners as well as for updating the DOM, link function is responsible. After the template is cloned, it is executed.

Pre-linking function: Pre-linking function is executed before the child elements are linked. It is not considered as a safe way for DOM transformation.
Post linking function: Post linking function is executed after the child elements are linked. It is safe to do DOM transformation by post-linking function

Explain injector in AngularJS

An injector is a service locator. It is used to retrieve object instances as defined by 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.

What is the main 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.

What is the factory function in AngularJS?

For creating the directive, factory method is used. It is invoked only once when the compiler matches the directive for the first time. By using $injector.invoke the factory method is invoked.

Explain the styling form that ngModel adds to CSS classes

NgModel adds these CSS classes to allow styling of form. Validation classes of AngularJS are:

ng- valid
ng- invalid
ng-pristine
ng-dirty

What are the characteristics of “Scope”?

To observer model mutations scopes provide APIs ($watch)
To propagate any model changes through the system into the view from outside of the Angular realm
A scope inherits properties from its parent scope, while providing access to shared model properties, scopes can be nested to isolate application components
Scope provides context against which expressions are evaluated

What is DI (Dependency Injection) and how an object or function can get a hold of its dependencies?

DI or Dependency Injection is a software design pattern that deals with how code gets hold of its dependencies. In order to retrieve elements of the application which is required to be configured when the module gets loaded, the operation “config” uses dependency injection.

These are the ways that object uses to hold of its dependencies

Typically using the new operator, dependency can be created
By referring to a global variable, dependency can be looked up
Dependency can be passed into where it is required

Explain the concept of scope hierarchy

Each angular application consists of one root scope but may have several child scopes. As child controllers and some directives create new child scopes, an application can have multiple scopes. When new scopes are formed or created, they are added as a children of their parent scope. They also create a hierarchical structure similar to DOM.

Explain the main difference between AngularJS and backbone.js

AngularJS	Backbone.js
AngularJS is a JavaScript-based open-source framework which is designed to support dynamic web applications.	backbone.js is a framework which abstracts DOM into views and data into models and then binds both using events.
It’s performance is good as it provides two-way data binding process	Backbone.js technology offers faster performance than AngularJS if the data sets are small
It works on MVS (Multiple Virtual Storage).	It works on MVP architecture.
AngularJS uses dynamic HTML attribute to make an easy to understand the application.	Backbone.js uses underscore templates to understand the application.
It has large community support.	Community support is restricted to the underscore template.

Who created Angular JS?

AngularJS was developed by Adam Abrons and Misko Hevery. Currently, it is developed by Google.

How can you integrate AngularJS with HTML?

Developers can follow the following steps to integrate AngularJS with HTML:

Step 1: including AngularJS JavaScript in html page.

<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>

Step 2: Point out AngularJS application.

You have to add ng-app attribute inside HTML body tag to tell what part of HTML AngularJS app has as shown in the following example:

<body ng-app = "testapp">

</body>

What is orderby filter in AngularJS?

Orderby filter in AngularJS orders the array based on specified criteria. Following example states how you can order product by price.

<ul>

<li ng-repeat = "company in product.products | orderBy:'price">

{{ company.product + ', price:' + product.price }}

</li>

</ul>

What is ng-non-bindable in AngularJS?

Ng-non-bindable specifies AngularJs to not compile the HTML element and its child nodes. For example:

<title ng-non-bindable > </title>

Explain the use of double click event in AngularJS

double click event of AgularJS let you to specify custom behavior on double click event of mouse on a web page like:

<ELEMENT ng-dblclick="{expression}">

...

</ELEMENT>

Explain ng-click directives in AngularJS with example

Ng-click directives can be used in a scenario when you have to click on the button or want to perform any operation.

Example:

<button ng-click="count = count ++">Click</button>

Why use ng-include in AngularJS?

Ng-include in AngularJS helps you to embed HTML pages within a single HTML page. Example:

<div ng-app = "" ng-controller = "interviewController">

<div ng-include = "'first.htm'"></div>

<div ng-include = "'phases.htm'"></div>

</div>

How can you make an ajax call using Angular JS?

AngularJS offers $https: control that helps you to make ajax call to read server data. The server makes a database call in order to get the required records. Once your data in JSON format is ready, you can use $https: to retrieve data from the server in the following manner:

function employeeController($scope,$https:) {

var url = "tasks.txt";

$https.get(url).success( function(response) {

$scope.employee = response;

});

}

Explain the use of $routeProvider

In Angular JS $routeProvider sets the URL configuration. It maps with the related ng-template or HTML page and attaches a controller with the same.

How can you set, get, and clear cookies in AngularJS?

You can use:

$cookies.put() method to set the cookies.
$cookies.get() method to get the cookies.
$cookies.remove to remove cookies in AngularJS.

What is service method?

Service method in AngularJS helps you to define service and method to it. In the following example, we have injected a simple addition service, which adds two numbers.

<! DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Event Registration</title>

</head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

<h3> Guru99 Global Event</h3>

<div ng-app = "mainApp" ng-controller = "DemoController">

<p>Result: {{result}}</p>

</div>

<script>

var mainApp = angular.module("mainApp", []);

mainApp.service('AdditionService', function(){

this.ADDITION = function(a,b) {

return a+b;

}

});

mainApp.controller('DemoController', function($scope, AdditionService) {

$scope.result = AdditionService.ADDITION(5,6);

});

</script>

</body>

</html>

Name the AngularJS components that can be injected as dependency

AngularJS components that can be injected as a dependency are: 1) value, 2) factory, 3) service, 4) provider, 5) constant.

What are the common Angular Global API functions

Some commonly used Angular Global API functions are:

Angular.isString: It will return true only if the given reference is of type string.
Angular.lowercase: It converts any string to lowercase
Angular.uppercase: It converts any string to uppercase.
Angular.isNumber: It returns true only if the reference is a numeric value or number.

Write a program to hide an HTML tag just by one button click in angular

<!DOCTYPE html>

<html>

<head>

<meta chrset="UTF 8">

<title>Event Registration</title>

</head>

<body>

<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">

<input type="button" value="Hide Angular" ng-click="ShowHide()"/>

<br><br><div ng-hide="IsVisible">Angular</div>

</div>

<script type="text/javascript">

var app = angular.module('DemoApp',[]);

app.controller('DemoController',function($scope){

$scope.IsVisible = false;

$scope.ShowHide = function(){

$scope.IsVisible = $scope.IsVisible = true;

}

});

</script>

</body>

</html>

What is BOM (Browser Object Model)?

BOM or Browser Object Model consists of history, object navigator, screen location, etc. It specifies the global browser objects like console, local storage, and window.

Explain “$rootScope” in AngularJS

“$rootScope” is a scope that is created on the DOM (Document Object Model) element.

An application can have only one $rootScope that shares, among other components. It has the ng-app directive. Other scopes are called as its child scope. It can watch expressions as well as propagate events.

Give an example of ng-view in Angular

Consider the following example:

<!DOCTYPE html>

<html>

<head>

<meta chrset="UTF 8">

<title>Event Registration</title>

<script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>

<script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>

<script src="/lib/bootstrap.js"></script>

</head>

<body ng-app="sampleApp">

<h1> Global Event</h1>

<div class="container">

<ul><li><a href="#!NewEvent"> Add New Event</a></li>

<li><a href="#!DisplayEvent"> Display Event</a></li>

</ul>

<div ng-view></div>

</div>

<script>

var app = angular.module('sampleApp',["ngRoute"]);

app.config(function($routeProvider){

$routeProvider.

when("/NewEvent",{

templateUrl : "add_event.html",

controller: "AddEventController"

}).

when("/DisplayEvent", {

templateUrl: "show_event.html",

controller: "ShowDisplayController"

}).

otherwise ({

redirectTo: '/DisplayEvent'

});

});

app.controller("AddEventController", function($scope) {

$scope.message = "This is to Add a new Event";

});

app.controller("ShowDisplayController",function($scope){

$scope.message = "This is display an Event";

});

</script>

</body>

</html>

What is the syntax of factory method in AngularJS?

The syntax of Factory is as follows:

app.factory(‘serviceName’,function(){ return serviceObj;})

Name different phases of the AngularJS Scope lifecycle.

Here, are different phases of AngularJS Scope lifecycle:

Creation
Model mutation
Watcher registration
Mutation observation
Scope destruction

Write a program for to bootstrap process in Angular

program for to bootstrap process in Angular is:

<html>

<body ng-app="TestApp">

<div ng-controller="Ctrl">Hi{{msg}}!</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">

</script>

<script>

var test = angular.module('TestApp', []);

test.controller('Ctrl', function($scope) {

$scope.msg = 'Good Morning';

});

</script>

</body>

</html>

What is a single page application in AngularJS?

SPA or single page application is a website or web application which interacts with the users dynamically. In AngularJS, JavaScript, HTML, and CSS fit on a single page. It performs navigation without refreshing the whole HTML page.

Explain the concept of webpack

Webpack is a module bundler for Angular2 or above. It bundles, transpiles, and minifies AngularJS application.

What do you mean by NPM?

NPM stands for Node Package Manager. It consists of a command line tool client for interacting with the repository of Node.js project.

How can you create a new project in angularJS using Command Line Interface?

Once you install the Angular command-line interface, you have to run ng new project-name command in order to create a new project in Angular.

Explain the auto bootstrap process in AngularJS

Angular initializes automatically DOMContentLoaded event or when you download angular.js script is to the browser.

After this, AngularJS find the ng-app directive that is the root of angular app compilation. When ng-app directive is found, AngularJS do the following steps:

1) load the module, which is associated with the directive,

2) Create application injector,

3) Compile the DOM from the ng-app root element. This process is known as auto bootstrapping.

What is immediately invoked function expressions?

IIFEs or Immediately Invoked Function Expressions is a function that executes as soon as it is created. It offers a simple way to isolate the variable declaration. IIFEs contains two major functions:

1) operator()

2) expression()

What is the digest cycle in AngularJS?

Digest cycle is important part of the data binding in AngularJS, which compares the old and new version of the scope model. Digest cycle triggered automatically or manually by using $apply() function.

What is the basic requirement to work with AngularJS?

You have to download the latest version of AngularJS from AngularJS.com to learn or work with AngularJS. You can either need JS file and host it locally, or you can also use google CDN (Content Delivery Network) for referencing it.

Can we create nested controllers in AngularJS?

Yes, we can create a nested controller in AngularJS.

Example of nested controller is as follows:

<div ng-controller="MainCtrl">

<p>{{msg}} {{name}}!</p>

<div ng-controller="SubCtrl1">

<p>Hi {{name}}!</p>

<div ng-controller="SubCtrl2">

<p>{{msg}} {{name}}! Your name is {{name}}.</p>

</div>

</div>

</div>

What is Authentication?

The authentication is a service that is used to login and logout of Angular application. The credentials of users pass to API on the server. Then post server-side validation these credentials, JSON Web Token is returned, which as detail about the current user.

Define AngularJS Material

AngularJS Material is an implementation of the Material Design Specification of Google. It offers a set of well-tested, reusable UI components for AngularJS programmer.

What are the important differences between Angular 7 and Angular 8

Angular 7	Angular 8
Angular 7 is hard to use	Angular 8 is very easy to use
It provides supports for the lower version of Typescript 3.4 programming language	It does not provide support for the lower version of Typescript 3.4 programming language
Supports all versions of Node.js	Supports only Node.js 12 version.

What is ngzone?

The ngzone is a JavaScrip wrapper class which is denoted by Zone.js. It enables developers to explicitly run certain code outside Angular’s zone, which inhibits angular to run any change detection.

List out the difference between Angular Component and Directive

Component	Directive
Angular component is a directive that enables you to utilize the web component functionality throughout the application.	Angular directive is a technique by which we attach behavior to the elements.
It helps you to divides your application into smaller components.	It helps you to design the reusable components.
It can define pipes	It cannot define pipes.

Define ECMAScript

ECMAScript (European Computer Manufacturer’s Association) is a standard for scripting languages. JavaScript uses ECMAScript as a core language. Developers can take help of it for writing client-side scripting on the world wide web and or server applications and services. ECMAScript has numerous features like functional, prototype, dynamic, and structured features.

What is a Traceur Compiler?

Traceur is a JavaScript compiler that uses classes, generators, and other features from ECMAScript.

How to convert a string into currency?

You can convert string input into the currency type currency filter in Angular.

What are templates in AngularJS?

A template is HTML file that is used with AngularJs directives and attributes.

Explain the differences between Angular and jQuery

AngularJS	JQuery
AngularJs is difficult to understand	Jquery is very easy to understand.
It supports two-way binding process	It does not support data binding process
It provides support for deep linking routing	It does not provide support for deep linking routing

What is the Ahead of Time Compilation?

Angular AOT (Ahead of Time) is a compiler that converts your angular HTML and typescript code into the JavaScript code.

List types of filters in AngularJS

Types of filters used in AngularJS are: 1) Currency, 2) Uppercase, 3) Lowercase, 4) orderBy, 5) JSON, and 6) limitTo.

Explain ngOnInit () function

ngOnInit () function is a lifecycle hook which is called after completion of data-bound properties of the directive.

What is transclusion in AngularJS?

The transclusion in AngulaJS enables developers to reallocate the original directive children into a specific location within a template. The directive ng shows the insertion point for a transcluded DOM of the nearest parent directive, which is using transclusion. Ng-transclude-slot or ng-transclude directives are mainly used for transclusion.

Lit out hooks are available in AngularJS

Various hooks in AngularJS are:

1) ngOnInit()

2) ngOnChanges(),

3) ngDoCheck(),

4) ngAfterContentInit(),

5) ngAfterContentChecked(),

6) ngOnDestroy(),

7) ngAfterViewChecked(), and

8) ngAfterViewInit()

So, this brings us to the end of the AngularJS Interview Questions blog.
This Tecklearn ‘Top AngularJS Interview Questions and Answers’ helps you with commonly asked questions if you are looking out for a job in Front End Development. If you wish to learn AngularJS and build a career in Front End Development domain, then check out our interactive, AngularJS Training, that comes with 24*7 support to guide you throughout your learning period.

https://www.tecklearn.com/course/angular-js-training/

Angular JS Training

About the Course

Angular JS certification training is designed for developers who are responsible for building applications using AngularJS. Through a combination of presentations and hands-on practices, participants will explore Angular comprehensively and learn to build components, directives, template-driven forms, routing, etc. for complex data-centric (enterprise) applications. This Angular online training will update your knowledge and skills with the current Angular version to lift your career.

Why Should you take Angular JS Training?

The average salary for “Angular Developer” ranges from approximately $92,814 per year for a Developer to $113,069 per year for a Full Stack Developer (Indeed.com).
YouTube, Google, Cisco, Nike, Samsung, Microsoft, Forbes, BMW and many Fortune 500 companies are using Angular as their front-end development framework to deliver an engaging user experience.
Angular’s powerful cross-platform feature allows developers to build progressive web applications and native mobile applications.

What you will Learn in this Course?

Introduction to Angular

Introduction to Angular
Comparison between front-end tools
Angular Architecture
Building blocks of Angular
Angular Installation
Angular CLI
Angular CLI commands
Angular Modules

Angular Components and Data Binding

Working of Angular Applications
Angular App Bootstrapping
Angular Components
Creating A Component Through Angular CLI
Ways to specify selectors
Template and styles
Installing bootstrap to design application
Data Binding
Types of Data Binding
Component Interaction using @Input and @Output decorator
Angular Animations

TypeScript

What is TypeScript
Need of TypeScript
How to install TypeScript
Nodemon for monitoring changes
Interfaces in Class, String Templates, Maps,
Sets and Object Restructuring

Directives and Pipes in Angular

Angular Directives
@Component Directive
Structural Directives
Attribute Directives
Custom Directives
Pipes
Built-in Pipes
Chaining pipes
Custom pipes
Pipe Transform Interface & Transform Function
Pure and Impure pipes

Angular Services and Dependency Injection

Angular service
Need for a service
Dependency Injection
Creating a service
Hierarchical Injector
Injecting A Service into Another Service
Observables
RxJS Library
Angular’s Interaction with Backend
Parts of an Http Request
HttpClient

Forms in Angular

Forms in Angular
What are their functions
Advantages of Forms
Various Types of Forms
What is Angular Validation and Model driven approach

Angular Routing

Angular Routing
Angular Routing benefits and features
Building a single page application and updating it dynamically with Angular Routing
What is Parameter Routing
Router Lifecycle Hooks and Child Routes

Authentication and Security in Angular

What is Authentication?
Authentication and authorization
Types of Authentication
Where to store tokens?
JSON Web Tokens (JWT)
Authentication in Angular application
Security threats in web application

Testing Angular applications

- Testing of Angular applications
- Deployment of Angular Test Bed for testing on Angular framework
- Setup of various tools for testing

Testing services in Angular Framework
E2E and Document Object Model testing

Got a question for us? Please mention it in the comments section and we will get back to you.

735