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.

Features

  • Directives
  • Data Binding
  • Filters
  • Modules
  • Routes
  • Controllers

AngularJS Directives

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

  • ng-app: It will load the dependencies and the module.
  • ng-bind: Automatically changes the text of an HTML element to the value of a given expression.
  • ng-model: Similar to ng-bind, but allows two-way data binding between the view and the scope.
  • ng-class: Allows class attributes to be dynamically loaded.
  • ng-controller: Specifies a JavaScript controller class that evaluates HTML expressions.
  • ng-repeat: Angular control structure act as for loop.
  • ng-click: Angular on click event

Install: Open the website angularjs.

 

Download

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

Getting Started

  • Start Visual Studio
  • Create a new website
  • Provide the name and location of website
  • Click "Next"

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" />&nbsp;&nbsp; {{ name }}        <br />        Country: <input type="text" data-ng-model="country" placeholder="Type something" />&nbsp;&nbsp; {{ country }}</div>

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

 

 

Source :csharpcorner,AngularJS



Share

Comments