AngularJS is a JavaScript framework. Using this, we can build rich and extensible web applications. This is completely built on HTML, Javascript and CSS, and will not having any other dependency to make it work.
Anugular is very close to MVC and MVVM but Angular has been declared as MVW pattern where "W" stand for "Whatever" (whatever works for you).
Basically, Angular has three components as shown below:
- Template (View)
- Scope (Model)
- Controller
Advantages of AngularJS
- Angular does not depend on any server side technologies, this builds on pure HTML, Javascript and CSS.
- This is a very light weight application.
- This works on the SPA (Single Page Application) principle.
- AS in Angular components are separated, so the application can be highly testable. This support TDD development.
- Less development effort, in any project HTML developers are different and they develop HTML pages and provide to the development team, developer then converts all the HTML files to cshtml or ASPX or any other technologies and continues working. In this case, double effort is required for development and testing.
AngularJS Directives
AngularJS directives are extended HTML attributes with the prefix ng-.
The ng-app directive initializes an AngularJS application.
The ng-init directive initialize application data.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
AngularJS Filters
AngularJS filters can be used to transform data:| Filter | Description |
|---|---|
| currency | Format a number to a currency format. |
| filter | Select a subset of items from an array. |
| lowercase | Format a string to lower case. |
| orderBy | Orders an array by an expression. |
| uppercase | Format a string to upper case. |
Adding Filters to Expressions
A filter can be added to an expression with a pipe character (|) and a filter.(For the next two examples we will use the person controller from the previous chapter)
The uppercase filter format strings to upper case:
<div ng-app="" ng-controller="personController">
<p>The name is {{ lastName | uppercase }}</p>
</div>
<div ng-app="" ng-controller="costController">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>Total = {{ (quantity * price) | currency }}</p>
</div>
<div ng-app="" ng-controller="namesController">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>
<div ng-app="" ng-controller="namesController">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
