In this article I will explain a simple AngularJS tutorial and also show you how to write your first Hello World AngularJS application example.
What is AngularJS?
AngularJS is a MVC (Model – View - Control) based JavaScript Framework which allows us to make the HTML DOM dynamic. With JavaScript or jQuery, a static HTML DOM can be dynamically manipulated at runtime but using AngularJS framework the HTML DOM is made dynamic during design time.
An AngularJS App structure
Following picture displays a simple AngularJS application. It comprises of the following directives.
![Simple AngularJS Tutorial and Hello World app example]()
ng-app
This directive notifies AngularJS that the HTML element is an AngularJS app. This attribute can be specified to HTML or BODY tag if you want to make the whole page an AngularJS app and if you want to make a part of page an AngularJS app then you can specify it to an HTML DIV.
Note: You need to set the ng-app directive value blank when you are not using ng-controller.
ng-model
This directive binds the control’s value to the AngularJS variable.
ng-bind
This directive binds the model value to the HTML element.
ng-controller
This directive is used when you need to write a controller for your AngularJS app.
Template
Templates are wrapped within curly braces {{ }}. It is used to bind expressions to HTML.
The AngularJS Hello World application
Following is the simplest AngularJS Hello World example. In this example, I have set the ng-model directive for the TextBox.
There are two HTML SPAN elements of which one is set with a template expression while other is specified with the ng-bind directive.
As we type in the TextBox, both the HTML SPAN elements display the value of the TextBox dynamically and that too without writing a single line of JavaScript code.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="">
UserName :
<input type="text" ng-model="UserName">
<hr />
Hello <span>{{UserName}}</span>
<br />
Hello <span ng-bind="UserName"></span>
</div>
</body>
</html>
Screenshot
![Simple AngularJS Tutorial and Hello World app example]()
Demo
Downloads
