Your First AngularJS Application

Meenakshi Agarwal
By
Meenakshi Agarwal
Hi, I'm Meenakshi Agarwal. I have a Bachelor's degree in Computer Science and a Master's degree in Computer Applications. After spending over a decade in large...
3 Min Read
Write Your First AngularJS App

If you’re new to AngularJS development, then this is where you should begin. In this tutorial, you’ll learn to build your very first AngularJS app.

We’ll give you a step-by-step process with simple instructions to get you on board quickly.

After reading this, first, create this basic app and then go ahead to build more advanced AngularJS applications.

If you like to quickly brush up on Angular concepts, then go through this list of AngularJS interview questions and answers.

Create Your First AngularJS App

Write Your First AngularJS App
Write Your First AngularJS App

Let’s create a basic <HelloWorld> type application step by step to understand the basic building blocks of AngularJS.

Step 1: Load framework

Since it is a pure JavaScript framework, we should add its reference using the <script> tag.

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
 </script>

Step 2: Define the AngularJS Application

Next, we will define the AngularJS Application using <ng-app> directive.

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

Step 3: Define a Model

In this step, we’ll define a model <name> using <ng-model> directive.

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

Step 4: Bind Model

Now we will bind a value to the model using <ng-bind> directive.

<p>Welcome <span ng-bind = "name"></span>!!</p>

Run Your First AngularJS App

First, complete all the above steps. Save the file as HTML file <firstAngularJSApp.htm>.

<html>
<head>
<title>AngularJS First Application</title>
</head>

<body>
<h1>My First Application</h1>

<div ng-app = "">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Welcome <span ng-bind = "name"></span>!!</p>
</div>

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

</body>
</html>

Output

Open <firstAngularJSApp.htm> in a web browser. Once you enter the name of the person, a welcome message gets printed on the screen.

My First Application
Enter your Name: 
Welcome, Meenakshi !!

Here is an insight into the AngularJS code working with HTML.

  • The presence of <ng-app> directive in the HTML marks the start of the AngularJS application.
  • We use <ng-model> directive to create model variables. In this example, it’s <name>. These variables can then be used with the HTML page and within the div having <ng-app> directive.
  • Use of the <ng-bind> directive is to display the value of the model variable using the HTML span tag, whenever the user attaches a value to that variable. In this example value of <name> gets printed after the user enters it in the text box.
  • The closing </div> tag indicates the end of the AngularJS application.

Quick Wrap-up – Your First AngularJS App

We’ve tried to provide all the relevant details about the AngularJS expressions in this tutorial. Hope, you could have learned it easily.

If you liked this post and are interested in seeing more such posts, then follow us on our social media accounts to ensure timely notification for future updates.

Best,

TechBeamers.

Share This Article
Subscribe
Notify of
guest

0 Comments
Newest
Oldest
Inline Feedbacks
View all comments