Introduction

AngularJS is a client-side JavaScript framework developed by Google and the community for developing single-page applications that only require CSS, HTML and JavaScript on the client side. Its goal is to augment web applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

Features

Let's discuss a few directives in this sample.

AngularJS Directives

AngularJS Directives are nothing but commands that allow the developer to specify custom and reusable HTML tags that moderate the behavior of certain elements as in the following:

Install: Open the website angularjs.

Download Angular.js

Click on the download button.



Now select Branch and build if you want to uncompress or Zip. And click Download.

Getting Started

Add angular.min.js to the scripts directory.



Now let's work on the view part.

To begin let's see how to do data binding using AngularJS:

First of all add a new HTML page and provide a relevant name, now add a angularjs reference to the page.

<script src="Scripts/angular.min.js"></script>

Now add the ng-app directive on the top root of the page or in any div like this.

<html ng-app="">
<div class="container" ng-app="">

Let's

<div class="container" ng-app="">

<h3>AngularJS Data Binding Template </h3>

Name: <input type="text" ng-model="name" placeholder="Type something" /> {{ name }}

<br />

Country: <input type="text" data-ng-model="country" placeholder="Type something" /> {{ country }}

</div>

add ng-app directive


One more example that calculates 2 numbers:

<div>

<h3>AngularJS Data Binding Template</h3>

<input type="number" ng-model="FirstValue" value="0" placeholder="Enter First value here">

+

<input type="number" ng-model="SecondValue" placeholder="Enter Second value here">

={{FirstValue+SecondValue}}
</div>

<script src="Scripts/angular.min.js"></script>

Output


In the next article we'll learn Looping with ng-repeat with real-time examples.