Your First AngularJS Application – A Tutorial for Beginners

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 Angular concepts, then do go through the below post once.

Let’s start to create you 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, so 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 You 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.

  • 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 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.

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 (Facebook/Twitter) accounts.

Best,

TechBeamers.