01) MVC Architecture
The first important feature, which comes to my mind, is the MVC or Model-View-Controller architecture. The idea behind using this design pattern (architecture), from my point of view, is to split the web application into a more manageable structure. The MVC architecture comprises of three important elements, the model, view and controller.
Model
The model is where your data are. Either the data we are talking about can be a static data or dynamically fetched from a data source, tucked in a server that is miles away from the client, using JSON.
A model comprises of a simple JavaScript object called the scope. Tied to a controller, the model object receives the data (from the source) and delivers it to a view (HTML).
myApp.controller(
'myController',
['$scope', function ($greet) {
$greet.greetings = function () {
$greet.theguest = 'Hello ' + $greet.name;
}
} ]
);In the above script, the $scope is an object in the model. See how it is encapsulated inside the controller() method.
View
In Angular, the view comprises of HTML elements and directives. This is the section of application, which is visible to users (using a browser). Other than markups, every view has as an expression (with curly braces), which is tied up to the scope object.
<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 piece of markup, also known as Template in Angular, when bound, complied and loaded on the browser is then called the view.
Controller
The controller actually controls the entire business logic of your application. The initial stage is set here, that is, it initializes and registers the application by creating a new Angular Module.
Click the below demo link to see the model, view, controller that we discussed above in a single page.
02) Implement two way data binding in AngularJS
Angular Data-Binding creates a link between model and view.
The two-way Data Binding is an extraordinary feature ever integrated in a JavaScript framework. In two-way data binding, any change made in the view will reflect in model, similarly changes made in the model will reflect in the view. It is a two way process.
In Angular, we need to use the ng-model directive to create a two-way data binding. This directive will bind the model to the view. We'll do an example to understand the process better.
A Two Way Data-Binding Example
Let us take the example of a bidding process. I have set the default price of a product as “75”. However, we want our users to input their own price for the product.
<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 example, I have bound the model variable “bid” to an input box, also set a default value (75) using ng-init directive. This is one-way binding, since the input box and expression (with curly braces) displays the model variables value. Fair enough.
However, when the user inputs a different value, it modifies the model variable. A two-way binding is in action.
See for yourself by clicking the demo link below.
This is amazing (if you understand it properly). As you can see, I have not written any extra code to manipulate the results or create any event. This process will drastically reduce the codes, usually written to make a dynamic application.
03) Templates
In Angular, a template usually means a view with HTML elements attached to Angular Directives , add markup for data binding using expressions (with curly braces). We will discuss about the directives and expressions later in this article.
Template example
<div ng-app="BiddingApp"> <input type="text" ng-model="bid" /> <p> ${{bid}} </p> </div>
An Angular template looks pretty much like a markup, except for its attributes. To make it dynamic, however we need to add a controller and a model.
Listed below are the elements and attributes, which make up the template.
a) Directive – In the above example, the ng-app and ng-model are directives.
b) Markup – Binding the view with a model using the curly braces {{ bid }} (expressions) is the markup.
c) Filters – Filters are useful for formatting the value in an expression. It is very useful. I have explained about filters later in this article.
d) Form Controls – We can use Angular Form Controls to validate user inputs. Let us assume the form has an input field, which accepts email ids only. The form control will validate the input and display a message if the value is invalid.
04) Directives
Angular Directives are attributes applied in the View. Attached to HTML elements, the directives augment the elements with new behaviors. Did you see the above examples, each element has directives, prefixed with ng-. Whenever we attach a directive with an element, it tells AngularJS that it is a part of Angular app and Angular treats it that way.
I recommend you read this AngularJS article first, where I have explained about different directives in detail with examples.
Here in this example, I have used another useful directive, called the ng-include, to add the content of an .htm file.
<!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-world.htm'"></div>
</div>
</body>
</html>The example has two distinct directives. The first is the ng-app to initialize the app. This will tell Angular about the app and its features. Next is the ng-include directive, which is useful for displaying data extracted from an external file.
05) Expressions
Angular Expressions are JavaScript like expressions, however with lots of difference. Written inside two curly braces, these expressions will bind Angular application data to HTML elements.
I written an article on AngularJS expressions for beginners. I want you to read the article if you want to explore and understand more about expressions.
{{ bid | currency }}
As I said, Angular expressions are different from JavaScript expressions. You cannot use an Angular Expression for setting conditions (if...else) or run loops. Instead, an Angular expression will receive values from the model ($scope) and display the result exactly where it is located.
String Expressions
<div ng-app ng-init="region={country:'India', state:'Delhi'}">
<span>Country: {{region.country + ", State: " + region.state }} </span>
</div>06) Modules
In the beginning of this article while explaining about MVC, I have said how the architecture helps in designing Angular application by splitting the app into little manageable structures. The Modules are pillar of this architecture. A module creates a well-defined structure, which will keep everything organized, at one place.
A single application may more than one module. By creating a new module, each application is first initialized and registered.
<script>
// INITIALIZE FIRST APP.
var mailApp = angular.module('myMails', []);
// INITIALIZE THE SECOND APP.
var bullionApp = angular.module('myMoney', []);
</script>We just initialized and registered two different apps in a single page.
07) Scope
A Scope is a JavaScript object that sits inside the model, and delivers data to the view. The view’s expression will receive the value(s) from the $scope and display the result exactly where the expression is located.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myMoney" ng-controller="moneyController">
<p>Dollar Today: {{ rate }} </p>
</div>
</body>
<script>
var bullionApp = angular.module('myMoney', []);
bullionApp.controller(
'moneyController',
['$scope', function ($currency) {
$currency.rate = '62.15';
} ]
);
</script>
</html>Output
Dollar Today: 62.15
See, how the expression property rate in the view is accessed inside the controller using $scope. The variable $currency is passed to the controller and assigns the value to the property rate.
08) Filters
An Angular Filter modifies the data before presenting it to the user. We can use these filters with expressions and directives. A filter is usually a predefined keyword, used with the symbol “|” (a pipe).
While explaining about Template in this article (see the template section above), I have used an expression to display the bid amount.
<div ng-app="BiddingApp"> <input type="text" ng-model="bid" /> <p> ${{bid}} </p> </div>
The expression has a text inside the curly braces {{bid}} and is prefixed with the “$” (dollar) sign. The Angular Filter currency would spare me from using the “$” sign. Simply add a “|” pipe after the text bid and add currency.
<p> {{bid | currency}} </p>
Filters are case-sensitive. Therefore, be careful while adding it in your application.
Some commonly used filters are…
a) currency
b) number
c) uppercase
d) lowercase
e) date
f) orderBy
g) filter
When I started writing this article, I was skeptic about the frameworks usefulness to web designers. However, now I have concluded that the framework is not just for web developers, but has features, which would tempt web designers to take the task of designing enterprise level applications, any time soon.
If you have gone through the entire article and read all the features carefully, you would imagine how much it would spare you from writing difficult scripts to design a dynamic application. I guess this article would help beginners to understand the features, offered by the AngularJS framework.