First Application With AngularJS

AngularJS

AngularJS is basically a structural framework. These are dynamic web applications. It is a very powerful language. AngularJS is an open source language. AngularJS language is easy and fast compared to other script languages. AngularJS is used to have Single Page Application (SAP) projects. It is very easy to update, insert and get information from our HTML document.

There are three important parts in AngularJS,

ng-aap
ng-model
ng-bind

ng-app: It is the first point of AngularJS to the page. It is defined to link an AngularJS Application to HTML.

Syntax:

<div ng-app="modulename">
here right code..
</div>

ng-model: It works to bind the values of HTML controls to the Application data.

Syntax:

<element ng-model="name"></element>

ng-bind: It is used to bind AngularJS Application data to HTML tags.

Syntax:

<element ng-bind="expression"></element>

Here is the AngularJS first program.

Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<p>Fill the TextBox</p>
<div ng-app="App" ng-controller="myCtrl"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> Degree: <input type="text" ng-model="Degree"><br> <br> Full Description: {{firstName + " " + lastName +" "+ Degree}} </div>
<script>
var app = angular.module('App', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "";
$scope.lastName = "";
$scope.degree = "";
});
</script>
</body>
</html>

Output