Hello AngularJS
Description
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><!-- www .j av a2s . co m-->
</head>
<body>
<input ng-model="name" type="text" placeholder="Your name">
<h1>Hello {{ name }}</h1>
</body>
</html>
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.