Home > DeveloperSection > Beginner > Basics of Angular Js

Basics of Angular Js

Angular JS Angular JS  JavaScript  Single Page App 
3 Comment(s)
 2347  View(s)
Rate this:

Basics of Angular Js

In this article, I’m explaining the basics of angular js.

AngularJS is a JavaScript Framework

AngularJS is a JavaScript framework. It is a library written in JavaScript. AngularJS takes declarative programming to whole new level. It adapts and extends traditional HTML to better serve dynamic content through two-way data-binding that allows for the automatic synchronization of models and views.

AngularJS is a framework that binds your HTML to JavaScript objects. When your models change, the page updates automatically. The opposite is also true – a model, associated with a text field, is updated when the content of the field is changed. Angular handles all the glue code, so you don’t have to update HTML manually or listen for events, like you do with jQuery.

AngularJS Extends HTML

AngularJS extends HTML with ng-directives.

The ng-app directive defines an AngularJS application.

The ng-model directive binds the value of HTML controls to application data.

The ng-bind directive binds application data to the HTML view.


First create an empty asp.net web application and add a webform to it:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"

Inherits="AngularJsHelloWorld.WebForm1" %>


<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">


    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">




    <div ng-app="">

        <p>Firstname : <input type="text" ng-model="firstname"></p>


        <p ng-bind="firstname"></p>






Basics of Angular Js


Basics of Angular Js

AngularJS starts automatically when the web page has loaded.

The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.

The ng-model directive binds the value of the input field to the application variable name.

The ng-bind directive binds the innerHTML of the <p> element to the application variable name.

Nice article

By Chintoo Semi on   2 years ago
Nice article

Good Article

By Pravesh Singh on   2 years ago
Good Article

Good Article

By Pravesh Singh on   2 years ago
Good Article

Don't want to miss updates? Please click the below button!

Follow MindStick