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.

Example

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">
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>
</head>
<body>
    <div ng-app="">
        <p>Firstname : <input type="text" ng-model="firstname"></p>
 
        <p ng-bind="firstname"></p>
    </div>
</body>
</html>

Output

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.

articles

Basics of Angular Js

AngularJS is a JavaScript Framework

Output

Sumit Kesarwani

Leave Comment

3 Comments

Comments

Liked By