Note: In this Program We’re will use Visual Studio as a Code Editor. You
can use any other as per you interest and requirement
Step 1: Create a Blank Project.
Step 2: Create a Blank HTML Page.
Step 3: In the Head Section of HTML Page set the CDN Link of angular Js.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
Step 4: In this step we
will tell what part of HTML contains the Angular Js app, we can specify this in
any part i.e. in html tag, head tag or in the body tag.
<html ng-app>
Step 5: Now, Paste the
below code in Body Section of HTML page.
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="firstName" placeholder="Enter your name" />
</div>
<hr />
<h1> Hello, {{firstName}}</h1>
</body>
Explanation of above code
ng-model = "firstName" ==>> This directive bind the Angular js application data to HTML input control.
{{firstName}} ==>> This is the expression of AngularJs.
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div>
<label>Enter
Name:</label>
<input type="text" ng-model="firstName" placeholder="Enter your name" />
</div>
<hr />
<h1> Hello, {{firstName}}</h1>
</body>
</html>
No comments:
Post a Comment