AngularJS First Application

How to create first application in AngularJS

An AngularJS application consists of following three main parts −

ng-app− Defines and links application to HTML.
ng-model− Binds the values of application data to HTML input controls.
ng-bind− Binds the Application data to HTML tags.

Watch this Full Stack Web Development Course Video:

Steps to create AngularJS Application

Step 1: Load framework
It is done by using <Script> tag.

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"><br>
</script><br>

Step 2: Define Application using ng-app directive

<div ng-app = ""><br>
//code<br>
</div><br>

Step 3: Define a model name using ng-model directive

<p>Enter Text: <input type = "text"  ng-model = "name"></p><br>

Step 4: Bind the value of above model defined using ng-bind directive.

<p>Hello<span ng-bind = "name"></span></p><br>

Example: Hello Program in AngularJS

<html><br>
<head><br>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><br>
<title> Welcome AngularJS </title><br>
</head><br>
<body><br>
<h1> Hello Program in AngularJS </h1><br>
<div ng-app = ""><br>
<p>Enter Text:<input type = "text" ng-model = "name"></p><br>
<p>Hello <span ng-bind = "name"></span></p><br>
</div<br>
</body><br>
</html><br>

Save this file as HelloAngularJs.html and run in web browser.
Output
output2

About the Author

Ayaan Alam

Software Developer | Technical Research Analyst Lead | Full Stack & Cloud Systems

Ayaan Alam is a skilled Software Developer and Technical Research Analyst Lead with 2 years of professional experience in Java, Python, and C++. With expertise in full-stack development, system design, and cloud computing, he consistently delivers high-quality, scalable solutions. Known for producing accurate and insightful technical content, Ayaan contributes valuable knowledge to the developer community.