Post
Ask Question

Getting Started AngularJS

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
  • Directives
  • Data Binding
  • Filters
  • Modules
  • Routes
  • Controllers

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:
  • 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 Angular.js

Click on the download button.



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>

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.


Similar Articles