My First AngularJS Application

Introduction

In this article I mainly want to give confidence to the growing numbers of beginners who are very much interested in the AngularJS application.

AngularJS is one of the trending technologies and whoever reads this application will feel much more comfortable that they can also easily code the AngularJs applications using a notepad pad application and internet connectivity.

Yes, I made very simple way to do an AngularJs application, and hope this will give you knowledge and confidence also.

What is AngularJS?

AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0.

Sample Application

Please try the same way as demonstrated in each step as follows,

Step 1

Create a notepad and save the notepad as your sample application name to your desktop.

“FirstAngApp.HTML” – this is the file name I have used to save the file.





Step 2

Define the HTML file document structure as shown in the screen shot.

It has the HTML, Body part, if you need it it can also have head to define title all which is optional.



Step 3

This is the place where I am going to include the “AngularJS” file into our web page, from the shared network.

As per the pre-requisite here you need the internet to consume the AngularJs file from the Google shared location.

The AngularJs field can be consumed from your local if you have a downloaded copy but consuming from “CDN” like google or some other source has more advantages than consuming from local.



CDN Content Delivery Network, which provides sources for many libraries example Google, GitHub, etc.

I have sourced this link for AngularJs file.

Step 4

Here I have specified the <div> tag with the ng keyword which denotes as angular directive, where whatever content inside this “ng-app” div will be having the behaviour of AngularJs.

<div ng-app="">



Step 5

AngularJs can do any expression manipulation using the symbol represented

{{Math-expression}}



Step 6

I have also included the HTML controls to get a value from user using textbox and print the value below using AngularJs code.



ng-model which binds the value of textbox to the “name” property and that can be used anywhere.

Which is similar to assigning some value to property name?

You are done now, now save the application and view the html file in browser.

Step 7

Now click on the HTML file and open in browser,



Results