• Articles
  • Tutorials
  • Interview Questions

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:

Video Thumbnail

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">
</script>

Step 2: Define Application using ng-app directive

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

Angular JS Expert

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

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

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

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

Example: Hello Program in AngularJS

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

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

Course Schedule

Name Date Details
Web Development Courses 14 Dec 2024(Sat-Sun) Weekend Batch View Details
21 Dec 2024(Sat-Sun) Weekend Batch
28 Dec 2024(Sat-Sun) Weekend Batch

About the Author

Technical Research Analyst - Full Stack Development

Kislay is a Technical Research Analyst and Full Stack Developer with expertise in crafting Mobile applications from inception to deployment. Proficient in Android development, IOS development, HTML, CSS, JavaScript, React, Angular, MySQL, and MongoDB, he’s committed to enhancing user experiences through intuitive websites and advanced mobile applications.