AngularJS Tutorial - AngularJS Hello World

Let's build our hello world application.

The following code demonstrates data binding from AngularJS. As you type in the input text box, the H1 header will be updated.

Example


<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</script><!-- w w w .j  a v a 2  s  .  c o  m-->
</head>
<body>
     <input  ng-model="name" type="text"  placeholder="Your name">
     <h1>Hello  {{  name  }}</h1>
</body>
</html>

The code above is rendered as follows:

Note

In the code includes angular.js using normal script tag.

Pay attention to the <html ng-app>. The ng-app attribute declares that everything inside of it belongs to the Angular app.

The only components that will be affected by Angular are the elements with the ng-app attribute.

The code above defined a variable named name with ng-model, then referenced it inside the h1 tag.

Whatever value is placed in the input field will be reflected in the model object.