Angular Js

Angular JS

AngularJS has been introduced by the giant, Google. It is a framework that helps you to create dynamic Web apps. Normally, AngularJS uses HTML as the backbone. AngularJS creates extended HTML tags that can be used as normal HTML tags. These tags will help you to write an efficient code. The interesting fact is that you can reduce the lines of code  you may need to write when you use normal JavaScript.

AngularJS is an open-source JavaScript framework developed by Google. It is a structural framework for dynamic Web apps. It is easy to update and get information from your HTML document. It helps in writing a proper maintainable architecture, that can be tested at a client side code.

Using the code

Let's start using AngularJS. What would be the first step that you need to do? That would be to include the relevant JavaScript file as in the following:

<script src="~/Script/angular.min.js"></script> 

For more details, click the link

Question 2: Explain Directives in AngularJS?

Answer

AngularJS directives are only used to extend HTML and DOM elements' behavior. These are the special attributes, that start with ng- prefix, that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element.

AngularJS has a set of built-in directives like

We can create our own directives for Angular to use them in our AngularJS Application with the controllers and services too. In this article, we’ll learn about some most important built-in directives like: ng-app, ng-init, ng-model, ng-bind and ng-repeat.

ng-app

It is the most important directive for an Angular Application, which is used to indicate starting of an Angular Application to AngularJS HTML compiler ($compile), like a “Main()” function in any compile time language like C#, Java or C++ etc. If we do not use this directive first and directly try to write other directives, it gives an error.

ng-init

ng-init directive is used to initialize an AngularJS Application data variable's inline statement, so that we can use those in the specified block where we declare them. It is like a local member of that ng-app and it can be a value or a collection of the values and as an array, it directly supports JSON data.

ng-model

ng-model directive is used to define the model/variables value to be used in AngularJS Application’s HTML controls like <input type=’text’/> and it also provides two-way binding behavior with the model value. In some cases, it’s also used for databinding.

ng-bind

ng-bind directive is also used to bind the model/variable's value to AngularJS Applications HTML controls as well as with HTML tags attributes like: <p/>, <span/> and more, but it does not support two way binding. We can just see the output of the model values.

ng-repeat

ng-repeat directive is used to repeat HTML statements. Ng-repeat works the same as for each loop in C#, Java or PHP on a specific collection item like an array.

For more details, click the link

Question 3: What are expressions in AngularJS? 

Answer

Expressions in AngularJS are just like JavaScript code snippets. JavaScript code is usually written inside double braces: {{expression}}. In other words, Angular Expressions are JavaScript code snippets with limited sub-set. Expressions are included in the HTML elements. 

Like JavaScript expressions, AngularJS expressions can also have various valid expressions. We can use the operators between numbers and strings, literals, objects and arrarys inside the expression {{ }}. For example,

example

Example

For more details click on the link

Question 4: Explain currency filter in AngularJS

Answer

One of the filters in AngularJS is the Currency Filter. This “currency” filter includes the “$” Dollar Symbol as the default. So we can use the following code as the html template format of Currency Filter. 

{{ currency_expression | currency : symbol : fractionSize}} 

How to use Currency Filter in AngularJS

There are two ways by which we can use Currency Filter.

For more details click on the link

Question 5: What is $scope in AngularJS?

Answer 

$scope in AngularJS is an object which refers to an application model. It is an object that binds view (DOM element) with the controller. In controller, model data is accessed via $scope object. As we know, AngularJS supports MV* pattern, $scope object becomes the model of MV*. 

The $scope is a special JavaScript object. Both View and controller have access to the scope object. It can be used for communication between view and controller. Scope object contains both data and functions. Every AngularJS application has a $rootScope that is the top most scope created on the DOM element which contains the ng-app directive. It can watch expressions and propagate events. 

events

Characteristics of scope object

Example

In the following example, I have created three controllers: parentController, firstChildControllerand secondChildController and defined one property in each controller; parentName, level1name, and level2name respectively. Here controllers are attached with DOM elements in a nested way. 

As described above, AngularJS evaluates expressions with current associated scope and then it searches in parent scope and so on until the root scope is reached.

TestAngularJs.html

For more details click on the link

Question 6: What is “$rootScope” in AngularJS?

Answer

A scope provides a separation between View and its Model. Every application has a $rootScope provided by AngularJS and every other scope is its child scope.

Using $Rootscope

Using rootscope we can set the value in one controller and read it from the other controller.

The following is the sample code snippet,

code

As we know, Rootscope is the top-level data container in AngularJs, we can keep any data in rootscope and read it when needed.

For more details click on the link 

Question 7: What is SPA (Single page application) in AngularJS?

Answer 

Single-Page Applications (SPAs) are web applications that load a single HTML page and dynamically update that page as the user interacts with the app. SPAs use AJAX and HTML to create fluid and responsive web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript.

A single HTML page here means UI response page from the server. The source can be ASP, ASP.NET, ASP.NET MVC, JSP and so on.

A single-page web application, however, is delivered as one page to the browser and typically does not require the page to be reloaded as the user navigates to various parts of the application. This results in faster navigation, more efficient network transfers, and better overall performance for the end user.

lifecycle

Key Points of Single-Page Applications

For more details click on the link

Question 8: How to implement routing in AngularJS?

Answer

Routing is a core feature in AngularJS. This feature is useful in building SPA (Single Page Application) with multiple views. In SPA application, all views are different Html files and we use Routing to load different parts of the application and it's helpful to divide the application logically and make it manageable. In other words, Routing helps us to divide our application in logical views and bind them with different controllers.

routing

How to add routing

The$routeProvider definition contained by the module is called "ngRoute". In app.js file, I have defined an angular app using “angular. Module” method. After creating module, we need to configure the routes. The "config" method is used to configure $routeProvider. Using "when" and "otherwise" method of $routeProvider, we can define the route for our AngularJS application.

For more details click on the link 

Question 9: How many types of data binding in AngularJS?

Answer 

Data binding is a very powerful feature of the software development technologies. Data binding is the connection bridge between view and business logic (view model) of the application. Data binding in AngularJs is the automatic synchronization between the model and view. When the model changes, the view is automatically updated and vice versa. AngularJs support one-way binding as well as two-way binding.

One-Way and Two-Way Data Binding

Figure 1: One-Way and Two-Way Data Binding

Binding Directives in AngularJs

ng-bind

This directive updates the text content of the specified HTML element with the value of the given expression and the text content is changing on expression changes. It is very similar to double curly markup ( {{expression }}) but less verbose.

Syntax

Ng-bind-html

It (whatever it is) evaluates the expression and inserts the HTML content into the element in a secure way. It uses the $sanitize service, so to use this functionality, be sure that $sanitize is available.

Syntax

ng-bind-template

It (whatever it is) replaces the element text content with the interpolation of the template. It can contain multiple double curly markups.

Syntax

ng-non-bindable 

This (whatever "this" is) directive informs AngularJs to not compile or bind the contents of the current DOM element This element is useful when we want to display the expression but it should not be executed by AngularJs.

Syntax

<ANY ELEMENT ng-non-bindable > </ANY ELEMENT> 

ng-model

This (whatever "this" is) directive can be bound with input, select, text area or any custom form control. It provides two-way binding. It also provides validation behavior. It also keeps the state of the control (valid/invalid, dirty/pristine, touched/untouched and so on).

Syntax

<input ng-bind="expression"/> 

For more details click on the link 

Question 10: What is a Factory method in AngularJS?

Answer

AngularJS Factory: the purpose of Factory is also the same as Service, however in this case we create a new object and add functions as properties of this object and at the end we return this object.

Factories module.factory( 'factoryName', function ); 

Example

When to use Factory: It is just a collection of functions like a class. Hence, it can be instantiated in different controllers when you are using it with a constructor function.

For more details click on the link 

Question 11: How are validations implemented in AngularJS?

Answer

One of the coolest features of AngularJS is client-side validation. There are so many form directives available in AngularJS. We will talk about some of them here, we will also explain custom validation. Using it you can create your own validations.

Initial requirement is reference,

For more details click on the link

Question 12: What is $rootscope and how do we use it?

Answer

$rootscope provides access to the top of the scope hierarchy, a scope provides a separation between View and its Model. Every application has a $rootScope provided by AngularJS and every other scope is its child scope.

Now see how to use it step by step,

Step 1

First of all you need to add an external Angular.js file to your application, "angular.min.js."

For this you can go to the AngularJS official site or download my source code and then fetch it or you can click on this link to download it: ANGULARJS.

After downloading the external file you need to add this file to the Head section of your application.

Step 2

Now after adding the External JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.

Now, I will create a JavaScript function in which the $rootScope service will be initiated.

Here, I created two angular.modules, in the first module I created a controller named "x", in this controller the "showAlert" variable is used with the $rootScope, in this a showAlert message is provided.

In the second controller a variable "val" is used but it is taken under $scope, the value of rootScope is provided in this variable and then is provided in the alert.

Now our work on the View is completed so we can work on the ViewModel.

Step 3

Here, I took a Div that is bound using the ng-app, after this two Divs are used, one of these is bound to the first controller, "x", and the second is bound to "x2"; both use the ng-controller.

In the second div the "val" variable is bound so this div will display the text that is passed in the val.

Now our application is ready for execution.

Output

On running the application an Alert Message will be displayed while the page is loading,

Output

When you click on the "OK" button the same message will be displayed on the webform as well.

Output

The complete code of this application is as follows,

For more visit the following link, 

Question 13: Explain what is Dependency Injection in AngularJS?

Answer 

Dependency Injection is one of the best features of AngularJS. It is a software design pattern in which objects are passed as dependencies. It helps us to remove hard coded dependencies and makes dependencies configurable. Using Dependency Injection, we can make components maintainable, reusable and testable.

Dependency Injection is required for the following

AngularJS uses dependency with several types

A simple case of dependency injection in Angular js

For more details click on the link 

Question 14: Explain Convert Text To Uppercase Using AngularJS.

Answer

AngularJS provides a feature for converting all the letters of text into uppercase letters. I will explain this feature by creating a sample application.

First of all you need to add an external Angular.js file to your application, in other words "angular.min.js".For this you can go to the AngularJS official site. After downloading the external file you need to add this file to the Head section of your application.

The complete code of this application is as follows

result

For more details click on the link 

Question 15: Explain ng-repeat directive.

Answer

The ng-repeat directive is the most used and very useful AngularJS Directive feature. It iterates over a collection of items and creates DOM elements. It constantly monitors the source of data to re-render a template in response to change.

Syntax of ng-repeat

Here, ng-repeat directive iterates over the empDetails collection and creates a <tr> DOM element for each entry in the collection.

The ng-repeat directive creates a new scope for each element of a collection.

Variables created by ng-repeat 

AngularJS ng-repeat directive creates so many special variables in a scope created for each and every individual entry. These variables are very important to find the position of an element within a collection.

Below are the some important variables created by ng-repeat 

For more details click on the link

Question 16: What is controller in AngularJS?

Answer

A controller is a set of JavaScript functions which is bound to a specified scope, the ng-controllerdirective. Angular will instantiate the new controller object, and injects the new scope as a dependency. It contains business logic for the view and avoids using controller to manipulate the DOM. 

controller

Controller Rules

Creating a Controller

ng-Controller directive

ng-Controller directive is an associated controller class to the view.

How to use ng-Controller

For more details click on the link

Question 17: What are the filters in AngularJS?

Answer

Filters are used to modify the data and can be clubbed in expression or directives using a pipe character. A filter formats the value of an expression for display to the user. They can be used in view templates, controllers, or services, and we can easily create our own filter. Filter is a module provided by AngularJS. There are nine components of filter which are provided by AngularJS. We can write custom as well.

Currency It will change all the digits to currency and "$" is the default currency.

{{ x | currency}}

Output

Output

Date

It will change all the digits into the date according to some rules, like the default date will be "44 years 2 months 10 days" earliar and 1000 will add 1 second into it.

{{ x | date:'medium' }}

Output Change the 1 and 1000 into dates.

Output

Filter

{{ filter_expression | filter : expression : comparator}} 

limitTo

It will show the values depending on the limit of an array variable that has been set.

{{ names | limitTo:2 }}

Output

Output

Here the limit is 2, so you can only see 2 values.

lowercase

It will change all the letters into lowercase as in the following:

{{ x | lowercase }}

Output

Output

Number

It will show all the digits with 3 decimal places by default as in the following:

{{ x | number:8}}

Output I am using 8 here.

Output

OrderBy

{{ orderBy_expression | orderBy : expression : reverse}} 

uppercase 

It will change all the letters to uppercase.

{{ x | uppercase }}

Output

Output

For more details click on the link

Question 18: Explain Module And Controller In AngularJS.

Answer

AngularJS module is nothing but a container of all angular components like controller, services, directive, filter, config etc

What is Module

Let me explain why module is required in AngularJS. In .NET console application there is a main method and what main method does is, it’s an entry point of application. It is the same as angular module and is an entry point. Using module we can decide how the AngularJS application should be bootstrapped.

We can create a simple module using the following code.

In the above code myModuleApp is the module name and if this module is dependent on other modules we can inject in “[]”.

What is Controller?

Controller is a JavaScript constructor function which controls the data. I am not going to cover what are the types of functions in this article but let me give some brief information about constructor function. In constructor function when we call that function that function creates a new object each time.

Let’s make a controller.

controller

For more details click on the link 

Question 19: What are the services in AngularJS?

Answer

Services are one of the most important concepts in AngularJS. In general services are functions that are responsible for specific tasks in an application. AngularJS services are designed based on two principles.

AngularJS internal services

AngularJS internally provides many services that we can use in our application. $http is one example. There are other useful services, such as $route, $window, $location and so on. Some of the commonly used services in any AngularJS applications are listed below.

details

Question 21: Explain ng-include, Click, and Repeat directive in AngularJS.

Answer

ng-include is an AngularJS directive, it is very helpful to include the various files in a main page using the ng-include attribute.

For example, you have one page layout that contains a header, body, footer and so on. In that scenario, you can create various HTML files for a header and footer then you can include those in the main HTML file. Because of this implementation the page looks cleaner and the code/design is also separated.

code

ng-click 

This is also one of the directives; you can use this in one of the scenarios like when you click on a button. If you do any operation then this will be useful.

The form contains an input text box and Search button, whenever the user enters a value into a text box and clicks on the search button you need to display the user-entered value, if the user clicks on the search button without entering anything then we need to display a message.

The index.html file looks as in the following.

ng-click

ng-repeat

This directive is like a foreach loop in C#. By using this directive you can display a collection of items in a view (HTML page).

You can display a list of employees using the ng-repeat directive in AngularJS. 

For more details click on the link

Question 22: Explain ng-disabled Directive in AngularJS.

Answer

ng- disabled directive is used to enable or disable HTML elements. Let us see this with the help of an example.

Write the following HTML mark up in the webpage.

In the above example we have a checkbox and a button. If the checkbox is selected the button is disabled, but if we uncheck the checkbox then the button is enabled.

So let us check the output of the program.

output

When we select the checkbox let us see what happens!!

output

For more details click on the link 

Question 23: Explain ng-app directive.

Answer

ng-app directive is used to define AngularJS applications. We can use this to auto-bootstrap an AngularJS application. It designates the root element of AngularJS application and is generally 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); the other applications needs to be bootstrapped manually.

Example

For more details click on the link 

Question 24: Why are we using AngularJS and what are the advantages of AngularJS?

Answer

As we know AngularJS follows the  MVW* pattern and it allows us  to build well-structured, testable, and maintainable front end applications.

Note W* means "whatever," in place of which we use C (controller) or VM (view model)

Why we are using AngularJS

Advantages of AngularJS

For more details click on the link

Question 25: What is Representational State Transfer(REST) in AngularJS.

Answer

REST is a style of API that operates over HTTP requests. 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, a term used to indicate an API that follows the REST style. AngularJS is pretty flexible about how RESTful web services are consumed. You should use the services that I describe in this article when you are performing data operations on a RESTful API. You may initially prefer to use the $http service to make Ajax requests, especially if you are coming from a jQuery background. To that end, I describe the use of $http at the start of the article, before explaining its limitations when used with REST and the advantages of using the $resource service as an alternative. For this, we first need to create a RESTful web API.

A REST web service is said to be RESTful when it adheres to the following constrants:

HTTP methods have a particular purpose when used with REST services. The following is the standard way that HTTP methods should be used with REST services,

POST should be used to,

For doing this, we first create a model class with the below mention members

For more details click on the link

Question 26: Explain ng-Switch Directive in AngularJS.

Answer

This directive is used to swap DOM structure conditionally in our template based on a scope expression. ngSwitchWhen or ngSwitchDefault directives are used to show and hide the element within ngSwitch directive. We can show or hide the element inside this directive and are required to place a "when" attribute per element. The "when" attribute is used to inform the ngSwitch directive which element is to display based on expression, if the matching expression is found, the element is displayed, else it is hidden.

Example

HTML

Controller  

Output

Output

For more details click on the link 

Question 27: Why we use $http service or ajax request in AngualrJS?

Answer

Ajax is the foundation of the modern web application, and you will use the services that I describe in this article every time that you need to communicate with a server without causing the browser to load new content and, in doing so, dump your AngularJS application. That said, if you are consuming data from a RESTful API, then you should use the $resource service. I will describe REST and $resource in the next article, but the short version is that $resource provides a higher-level API that is built on the services I describe in this article and makes it easier to perform common data operations.

Making Ajax Requests

The $http service is used to make and process Ajax requests, which are standard HTTP requests that are performed asynchronously.

The first—and most common—is to use one of the convenience methods that the service defines, which I have described in the below table and which allows you to make requests using the most commonly needed HTTP methods. 

The other way to make an Ajax request is to treat the $http service object as a function and pass in a configuration object.

Configuring Ajax Requests

The methods defined by the $http service all accept an optional argument of an object containing configuration settings. For most applications, the default configuration used for Ajax requests will be fine, but you can adjust the way the requests are made by defining properties on the configuration object corresponding to the below table.

The most interesting configuration feature is the ability to transform the request and response through the aptly named transformRequest and transformResponse properties. AngularJS defines two built-in transformations; outgoing data is serialized into JSON, and incoming JSON data is parsed into JavaScript objects.

Html file code

AngularJS file code

Question 29: When and Why to use and create Services?

Answer 

Services are used to encapsulate functionality that we need to reuse in an application but don’t fit clearly into Model-View-Controller pattern as we discussed in the article. Services are mainly used for the purpose of cross cutting concerns. The AngularJS Module defines three methods for defining services : factory, service and provider. The result of using these methods is the same – a service object that provides functionality that can be used throughout the AngularJS application – but the way that the service object is created and managed by each method is slightly different. Below I mentioned the built in services of AngularJS.

I will discuss about this built in service of AngularJS in a later article. The main focus of this article is what are the different ways to create custom services as per our requirement in AngularJS. 

Using Factory method

The simplest method of defining a service is to use the Module.factory method, passing an argument, the name of the service and a factory function that returns the service objects. For doing this, we create three files as follows,

ServiceApp.Js

In the above file, I first create an angular module named serviceApp for defining the factory service which creates log message on execution.

App.js

Now, I define another angualr module named testApp in which I inject the ServiceApp module. This testApp module will be used from html page for controller.

Factory.html

Factory.js

The output is as follows,

output

Question 31: What is event handling in AngularJS?

Answer 

When we want to create advanced AngularJS applications such as User Interaction Forms, then we need to handle DOM events like mouse clicks, moves, keyboard presses, change events and so on. AngularJS has a simple model for how to add event listeners. We can attach an event listener to an HTML element using one of the following AngularJS event listener directives.

Here is a simple AngularJS event listener directive example,

When we click the text within the div, the myData.dvClick() function will be called. As you can see in the controller function, the myData object has a dvClick() function added to it. The event listener functions called are functions added to the $scope object by the controller function.

For more details click on the link 

Question 33: Explain $routeProvider in AngularJS?

Answer

The $routeProvider is used to set the configuration of urls and map them with the corresponding html page or ng-template and also attach a controller. Routing in AngularJS is taken care of by a service provide that is called $routeProvider. Routes for templates and urls in Angular are declared via the$routeProvider, that is the provider of the $route service. This service makes it easy to wire together controllers, view templates, and the current URL location in the browser.

We can use config() method of “myApp” module to configure $routeProvider. The when method of$routeProvideris used to bind the url with a template. This method takes a url(i.e. “/viewDelhi”) that will map with a template (i.e. delhi.htm) using the templateUrl parameter. The when method also binds a controller for templates using the controller parameter (i.e. controller: 'AddDelhi'), otherwise the method is used to set the default view.

Example

For more details click on the link

Question 34: What are the attributes can be used during creation of a new AngularJS Directives?

Answer

The following attributes can be used during creation of a new AngularJS Directives, 

For more details click on the link

Question 35: What are the different types of Directives in AngularJS?

Answer

Directives are one of the most important components of AngularJS application. They are extended HTML attributes. In other words, directives are something that introduces new syntax. They are markers on the DOM element which provides some special behavior to DOM elements and tell AngularJS's HTML compiler to attach. 

Their are many built in directives such as ng-model, ng-repeat, ng-show, ng-bind etc. All these directives provide special behavior to DOM elements. For example, ng-show directive conditionally shows an element, ng-click directive adds click events to the element; ng-app directive initializes an AngularJS application, etc.

Types of Directives

Type of directive determines how they are used. We can implement directives in the following ways,

Question 38: Mention what are the characteristics of “Scope”?

Answer

$scope is a glue between the View and the Controller. It connects a Controller with the View,

 

scope

Question 39: Give the differences between AngularJS and Backbone and Knockout?

Answer

Comparison with Backbone.js and Knockout.js,

For more details click on the link

Question 40: What is the difference between AngularJS and jQuery?

Answer 

jQuery and AngularJS have some common features like Unit test runner, animation support, AJAX/JSONP but they also have some differences.

jQuery Example

output

AngularJS Example

output

For more details click on the link

Question 41: What are the custom directives in AngularJS?

Answer

In AngularJS we can create the custom directive for the following types of elements.

Element directives Directive activates when a matching element is encountered. Restrict mode is defined by “E”. 

Example <ng-directives></ng-directives>

Attribute Directive activates when a matching attribute is encountered. Restrict mode is defined by “A”.

Example <span ng-directive></span>

CSS Directive activates when a matching css style is encountered. Restrict mode is defined by “C”. 

Example <span class="ng-directive"></span>

Comment Directive activates when a matching comment is encountered. Restrict mode is defined by “M”. 

Example <!-- directive: ng-directive -->

Let us create some custom directives:

Now we read how to create custom directives. We start with some simple examples and move towards some complex custom directives.

Example 1

Question 44: Explain ngClick And ngDblclick Directives In AngularJS?

Answer

AngularJS provides many built-in directives. In this article we will discuss about ngClick and ngDbclick directives.

ngClick

This directive allows us to define custom behavior on element click event. This directive has highest priority. In expression, event object is accessible as $event.

Syntax

Example

HTML

Controller

Output

Output

ngDblclick

This directive allows us to define custom behavior on element double click event. This directive has highest priority. In expression, event object is accessible as $event.

Syntax

Example

HTML

Controller

Output

output

For more details click on the link

Question 45: What is One-Way Data Binding in AngularJS?

Answer 

One-Way Data Binding simply means that HTML elements reflect the change. When the model values change the HTML elements don't change the values in the model.

In other words, when the model changes, this change is reflected in the view but the view doesn't change the model. In other words the developer must write extra code for automatic synchronization of data between the model and the view components. One-Way binding may also be called one-direction binding.

One-way Binding

         Figure 1 One-way Binding

Let us understand with an example.

code

Press F5

output

Question 46: What is One-Way Data Binding in AngularJS?

Answer

One of the core features of AngularJS which makes it popular is two way data binding. In two way data binding, any changes to the model are immediately reflected in the View and any changes in the View updates the model.

Data Binding

Example

In the above code, we have created a controller (i.e. myController) and registered it with myApp module. We used ng-model property for displaying the value of HTML control with the help of {{name}} Template. If we change the value in Textbox then it will update the model or if we change the value of model then it will immediately update the View.

Preview

Preview

For more details click on the link

Question 47: Explain ng-hide Directive in AngularJS?

Answer

ng- hide directive is used to make HTML elements invisible. Let us see this with the help of an example.

Write the following HTML mark up in the webpage.

We have taken twp<p> tags in HTML. In one of the tags we will assign a value, false, to the ng-hide directive and in the other we will keep the value to true. Let us see how the output turns out.

output

Question 49: What is ngClass directive in AngularJS?

Answer 

ngClass directive This directive lets us do things like,

Some Points about ng-class