My first html page using the AngularJS

angularjs

I have been using the jQuery JavaScript library for designing the interactive web pages from the last couple of years and I feel very familiar to update the DOM using the JQuery.

Some month ago, one of the my friends asked me about the AngularJS(that time he was developing a web application using the AngularJS). And this is amazing the know that you can create a one-page web applications that only require HTML, CSS, and JavaScript on the client side with the help of AngularJS.

One question is here that- Should I learn the AngularJS when I am very familiar with the JQuery library?. The good answer is here.

Anyway this is the challenging work for me. Additionally same time I were searching a best resource for learning this. I impressed with w3schools (Good for beginner label) and angularjs (need some technical knowledge).

angularjs

AngularJS is an open-source web application framework(Read What is this) that is written in the JavaScript and maintained by Google and community so you don’t worry about the maintenance of this library.

Let starts with the following example.

First just write the simple html page and add the AngularJS to an HTML page with a <script> tag.

<!DOCTYPE html>
<html>
   <head>     
       <script src="//ajax.googleapis.com/ajax/libs/
                    angularjs/1.2.15/angular.min.js">
</script>
   </head>
<body>
   <div ng-app="">
       <p>Name: <input type="text" ng-model="name"></p>
       <p>Hello {{ name }}</p> 
   </div>
</body>
</html>

In the body tag the div tag is present with the ng-app. The ng-app defines the root element of an application(AngularJS), this is called as ng-app directive. In the next line input element has the ng-model directive that binds the value of the input element in to the variable named ‘name’. And in this next line the entered name updates frequently on change of value in input element.

AngularJS application in html web page

[kb] How AngularJS can be initialize in application

You need to add reference of AngularJS using script tag. It is recommended that add reference at the bottom of page for decreasing the page load time.

Next add ng-app directive at the root of the application.

ng-app directive is the important

The ng-app attribute represents an Angular directive named ngApp that declare the root element of the your Angular application. If you miss this attribute then html page behaves as usual.
In the above example the div element is the root of the Angular application. You can make the entire page as angular application after set the ng-app attribute the body tag.

Summery

In the next article we will create a another program of the addition of two numbers using AngularJS.js.