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.
 
 

HTML Markup

Inside the HTML Markup, the following AngularJS script file is inherited:
1. angular.min.js
 
DIV – For applying ng-app.
TextBox – For capturing the user input.
The HTML TextBox has been assigned with an AngularJS ng-model directive.
SPAN – For displaying message.
The first HTML SPAN element is set with a template expression and the second HTML SPAN element is specified with the ng-bind directive.
ng-bind – For binding the model value to the HTML element.
Note: For more details on ng-bind directive, please refer my article Simple AngularJS ng-bind and Template Tutorial with example.
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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>
 
 

Screenshot

Simple AngularJS Tutorial and Hello World app example
 
 

Demo

View Demo
 
 

Downloads

Download Code