Features Of Angular

AngularJS is an incredible JavaScript system that has some extremely convincing highlights for engineers as well as designers too. In this section/ exercise, we will cover what I consider to be the most fundamental highlights, and how they can help make your next web application wonderful.

It is as follows,

 

1	2	3	4	5	6	7	8
MVC Architecture	Two Way Data Binding	Templates	Directives	Expressions	Modules	Scope	Filters

 

MVC Architecture

The main imperative component is the MVC or Model-View-Controller engineering. The thought behind utilizing this outline design (engineering), from my perspective, is to divide the web application into a more reasonable structure. The MVC engineering involves three imperative components, the Model, View, and Controller.

Model

The model is the place your information is stored. Either the information we are discussing can be a static information or powerfully got from an information source, tucked in a server that is miles far from the customer, utilizing JSON.

A model includes a straightforward JavaScript question called the degree. Attached to a controller, the model question gets the information (from the source) and conveys it to a view (HTML).

myApp.controller(
'myController',
['$scope', function ($greet) {
   $greet.greetings = function () {
   $greet.theguest = 'Hello ' + $greet.name;
   }
   } ]
);

In the above content, the $scope is a protest in the model. Perceive how it is epitomized inside the controller() technique.

View

In Angular, the view contains HTML components and orders. This is the area of use, which is unmistakable to clients (utilizing a program). Other than markups, each view has as an articulation (with wavy props), which is fixing things up to the extension protest.

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

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

<p><input type="button" value="Click Me" ng-click="greetings()"/></p>

<p> {{ theguest }} </p>

</div>

The above bit of markup, otherwise called Template in Angular, when bound, is then called the view.

Controller

The controller really controls the whole business rationale of your application. The underlying stage is set here, that is, it introduces and enrolls the application by making another Angular Module.

Tap the beneath demo connect to see the model, see, the controller that we examined above in a solitary page.

Two-Way Data Binding

Data-Binding makes a connection amongst model and view.

The two-way Data Binding is an uncommon element at any point coordinated in a JavaScript structure. In two-way information, any change made in the view will reflect in the demonstration, likewise changes made in the model will reflect in the view. It is a two-way process.

In Angular, we have to utilize the ng-show mandate to make a two-way information authoritative. This mandate will tie the model to the view. We'll do an example to comprehend the procedure better.

A Two-Way Data-Binding Example,

Let's take the case of an offering procedure. I have set the default cost of an item as "75". Be that as it may, we need our clients to enter their own particular cost for the item.

<div ng-app="">
    <p> <label>Current Bid Value</label> <input type="text" ng-model="bid" ng-init="bid ='75'" /> </p>
    <p> ${{bid}} </p>
</div>

In the above illustration, I have bound the model variable "offer" to an information box, likewise set a default esteem (75) utilizing ng-init mandate. This is one- route authoritative, since the information box and articulation (with wavy props) shows the model factors esteem. Sufficiently reasonable.

In any case, when the client inputs an alternate esteem, it changes the model variable. A two-way restricting scenario is happening in real life.

Templates

In Angular, a layout typically implies a view with HTML components connected to Angular Directives, include markup for information restricting utilizing articulations (with wavy supports). We will examine about the orders and articulations later in this article.

Layout case

<div ng-app="app1"> <input type="text" ng-model="expamt" />
    <p> ${{expamt}} </p>
</div>

An Angular layout looks essentially like a markup, aside from its qualities. To make it dynamic, be that as it may we have to include a controller and a model.

Recorded underneath are the components and properties, which make up the layout.

• Directive – In the above illustration, the ng-application and ng-demonstrate are orders.
• Markup – Binding the view with a model utilizing the wavy props {{ offer }} (articulations) is the markup.
• Filters – Filters are helpful for organizing the incentive in an articulation. It is extremely helpful. I have clarified about channels later in this article.
• Form Controls – We can utilize Angular Form Controls to approve client inputs. It gives us a chance to expect the shape has an information field, which acknowledges email ids, as it were. The shape control will approve the information and show a message if the esteem is invalid.

Directives

Directives are qualities connected in the View. Joined to HTML components, the mandates enlarge the components with new practices. Did you see the above illustrations, every component has orders, prefixed with ng-. At whatever point, we connect an order with a component, it discloses to AngularJS that it is a piece of Angular application and Angular treats it that way.

I suggest you read my first article about AngularJS where I have clarified about different orders in detail with cases. Here in this illustration, I have utilized another valuable mandate, called the ng-incorporate, to include the substance of a .htm record.

<!DOCTYPE html>
<html>

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

<body>
    <div ng-app>
        <div ng-include="'hello-child.htm'"></div>
    </div>
</body>

</html>

It has two directives. The first is the ng-application to instate the application. This will inform Angular regarding the application and its highlights. Next is the ng-incorporate order, which is valuable for showing information extricated from an outer record.

Expressions

 

An Angular expression displays the result exactly where it is located or assigned. Let us see an example.

Syntax

{{ expression }}

<!DOCTYPE html>
<html>

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

<body>
    <div ng-app> Hello <b> {{ 'Angular expression' }} </b> </div>
</body>

</html>

Result::: Hello Angular expression

This is one of the least complex cases of an Angular articulation. Perceive how I have appointed the name inside the wavy supports. I am utilizing a string incentive as an articulation, and it shows the yield there itself, between the HTML striking tag.

String Expressions

Use a chance to take this String articulation case to the following level. You can appoint qualities to the articulations, powerfully utilizing an Angular order. This system will save you from allocating static esteems and rather you can include distinctive sorts of qualities as indicated by your decision.

Note

I won't utilize the <html> and <head> labels over and over in my cases. Rather, I'll include the articulations inside the <div> tag.

<div ng-application ng-init="name='Hello Hamid'">

Emp Name is <b> {{ name }} </b>

</div>

The yield of this illustration is the same as above. But I have introduced the esteem utilizing ng-init mandate and later stretched out the variable name to the articulation.

Number Expressions

We can utilize numbers or numeric esteems in Angular articulations. Numeric esteems can have decimal esteems as well.

<div ng-app
   I have rs <b> {{100}} </b> in my pocket.
</div>

Result

I have rs 100 in my pocket.

Moreover, you can utilize numbers in Angular articulations powerfully, utilizing orders. In the underneath case I have pronounced a variable utilizing ng-demonstrate mandate, and later showing the variable's an incentive in the articulation. I have likewise included a channel "money" with the variable.

<div ng-app>
   <span>
      <label>Enter your expectation amount</label>
      <input type="text" ng-model="expAmount" />
   </span>
<br/>
   <p> <span> {{expAmount | currency}} </span></p>
</div>

One-time binding Expressions

 

With adaptation 1.3, Angular presented another component, called the One-time official, surprisingly. In the event that you utilize :: (no spaces) in an articulation, it will make one-time ties. What is the motivation behind this component? It is not exceptionally basic for a learner to comprehend this idea promptly. In any case, I'll clarify it.

Like some other applications, an Angular application too may have numerous components, and we tie these components with information. The Angular $watch() API keeps a watch on every authoritative. It runs a circle through every one of the ties, searching for information changes. These circles can devour significant assets if at any stage a view includes numerous information ties.

When we announce an articulation utilizing::, it advises Angular to overlook the watch once an esteem is relegated to it. Thus, we can proclaim different articulations as one-time official, which will diminish the circles ($digest() cycles), and the last outcome is enhanced execution.

Give us initial a chance to make an ordinary official. Here in this application, I need my clients to enter the EmpolyeeId consistently and tap the submit catch.

<div ng-app>
EmpId <input type="text" ng-model="EmpolyeeId" />
<button ng-click="newId = EmpolyeeId" ng-init="EmpolyeeId">Submit</button>

<p>Normal Binding: {{ newId}} </p>
</div>

<p>One-time Binding: {{:: newId}} </p>

Modules

 

In the start of this article, while clarifying about MVC, I have said how the engineering helps in outlining Angular applications by dividing the application into minimal reasonable structures. The Modules are the mainstay of this engineering. A module makes an all-around characterized structure, which will continue to get everything sorted out, in one place.

A solitary application may be more than one module. By making another module, every application is first introduced and enrolled.

<script>
// FIRST APP.
var mailApp = angular.module('app1', []);

// SECOND APP.
var bullionApp = angular.module('app2', []);
</script>

Scope

 

A Scope is a JavaScript protest that sits inside the model, and conveys information to the view. The view's demeanor will get the value(s) from the $scope and show the outcome precisely where the articulation is found.

<div ng-app="app1" ng-controller="ctrl1">
<p>name: {{ empName }} </p>
</div>

<script>
var app1 = angular.module('app1', []);

app1.controller(
'ctrl1',
   ['$scope', function ($name) {
      $scope.empName = 'hamid';
   } ]
);
</script>

Filters

An Angular Filter adjusts the information before showing it to the client. We can utilize these channels with articulations and mandates. A channel is normally a predefined watchword, utilized with the image "|" (a pipe).

While clarifying about Template in this article (see the format segment above), I have utilized an articulation to show the offer sum.

<div ng-app="app1">
<input type="text" ng-model="myamt" />

<p> ${{myamt}} </p>
</div>

The articulation has content inside the wavy supports {{bid}} and is prefixed with the "$" (dollar) sign. The Angular Filter money would save me from utilizing the "$" sign. Basically include a "|" pipe after the content offer and include money.

<p> {{myamt | currency}} </p>

Filters are case-delicate. In this manner, be cautious while including it in your application.

Some normally utilized ones are as follows,

• currency
• number
• uppercase
• lowercase
• date
• orderBy

Summary

I hope this article will help learners to comprehend the highlights, offered by the AngularJS structure.