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