Angular JS: Angular Introduction

Angular.js is a open source JavaScript library.

Angular uses MVC framework.

Features

Angular handles ajax communication with server, and the data is stored in javascript objects.
Two way binding - Two way binding allows updates of the UI automatically whenever data model changes.
Routing – handles from moving from one view to another based on user interaction, angular also updates URL of browser.

Passing data to View

$scope – is special object that angular uses to pass data between controller and view.

Controller and Scope

Primary responsibility of Controller is to create scope object and define the properties/functions on scope object which would be used by View.

Scope communicates with view in two way communication. Hence Data passes from Controller to scope and from scope to View.

Creating Hello world application with angularJS

Following are the steps to create Hellow world application using angularJS.

Add ng-app attribute to html tag - This tells that this html has angular code in it, which would be processed by angular engine.
Define Controller by defining a javascript function. This controller function would have $scope as parameter. Define properties on $scope variable which would be used to bind data to DOM elements.
In view define a placeholders using “{{ }}” angular expression or angular directives
Tell angular that which element is controlled by which controller using “ng-controller” attribute. Defining ng-controller tells angular that current element and all the child elements will get data from the speicified controller.

Here is my complete code for the Hellow world application

Here is my complete page code.

Here i have used aspx page you can use html page and put this code in it.

Just you will have to include reference to angular.js library and update its reference in this code as per your library path.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HelloworldApp.aspx.cs" Inherits="BasicsOfAngular.HelloworldApp" %>

<!DOCTYPE html>

</head>

<body>

<div>

<h1 ng-controller="HelloWorldCtrl">{{HelloWorldMessage}}</h1>

</div>

</form>

function HelloWorldCtrl($scope) {

$scope.HelloWorldMessage = "This is Hello World Demo...";

}

</script>

</body>

</html>

Angular JS