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.
Let’s create a basic <HelloWorld> type application step by step to understand the basic building blocks of AngularJS.
Step 1: Load framework
<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>
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.
We’ve tried to provide all the relevant details about the AngularJS expressions in this tutorial. Hope, you could have learned it easily.