Hello World ! with AngularJS

Saturday, June 13, 2015 AngularJS, Tips and Tricks

AngularJS is a JavaScript framework used to develop cross browser applications. AngularJS is open source completely free & working in MVC (Model, View & Controller) pattern.

AngularJS is working on ng-directives, 3 main directives are:

ng-app: Directive defines the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags.

ng-model: Directive binds the value of HTML controls (Input, Select, Textarea) to application data.

ng-bind: Directive binds the application data to HTML controls/tags.

Let’s start our first Hello World ! application using AngularJS and Visual Studio Code (can be used any text editor even notpad but I used VS Code).

Create a simple HTML page as below:

<!DOCTYPE html>
<html>
    <head>
        <title>
            Angular JS sample Application.
        </title>
    </head>
    <body>
        <h2>Hello World! with Angular JS.</h2>
    </body>
</html>

Browse the page & it will looks like as shown below

Now let’s add AngularJS file using CDN

<head>
    <title>
        Angular JS sample Application.
    </title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>

Add ng-app directive in the HTML body tag

<body ng-app="">

Define ng-model to a HTML input tag and associate a userInput property to it.

<input type="text" ng-model="userInput">

Add ng-bind to a HTML label tag and assign userInput model property.

<label ng-bind="userInput"/>

Full page markup is as below

<!DOCTYPE html>
<html>
    <head>
        <title>
            Angular JS sample Application.
        </title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    </head>
    <body ng-app="">
        <h2>Hello World! with Angular JS.</h2>
        Enter text here <input type="text" ng-model="userInput"><br/>
        <b><label ng-bind="userInput"/> </b> with AngularJS is ready.
    </body>
</html>

Once run and Enter Hello World ! you will see that as soon you type text in textbox same time it getting reflected in the label tag without extra code or page refresh.

Note: I used CDN to AngularJS reference and will work only with internet access, but if you need to run/work offline then download and refer local AngularJS file as below.

<!DOCTYPE html>
<html>
    <head>
        <title>
            Angular JS sample Application.
        </title>
        <script src="Scripts/angular.min.js"></script>
    </head>
    <body ng-app="">
        <h2>Hello World! with Angular JS.</h2>
        Enter text here <input type="text" ng-model="userInput"><br/>
        <b><label ng-bind="userInput"/> </b> with AngularJS is ready.
    </body>
</html>

Hello World ! with AngularJS

1 Comment