Angular Js Tutorial Part – 2

Published on : April 27, 2026

Author: wahid

Category: HTML/CSS

Today we describe how to use angular js.
Static example

[sourcecode]
<html>
<head>
<title>Static Example</title>
</head>
<body>
<ul>
<li>
<span>Neymar</span>
<p>Brazil</p>
</li>
<li>
<span>Ronaldo</span>
<p>Portugal</p>
</li>
</ul>
<p>Total number of phones: 2</p>
</body>
</html>
[/sourcecode]

This is very simple example. In this example we create simple list and count list of item by static. This is very easy to understand. In this code we use simple html code.

Now we try this using angular.js
First step: create a model. We give a simple name app.js

[sourcecode]
var app = angular.module(‘MyTutorialApp’,[]);
[/sourcecode]

Second step: Create controller. We give a simple name maincontroller.js

[sourcecode]
app.controller("MainController", function($scope){
$scope.inputValue = ”;

$scope.players = [
{
name: ‘Neymer’,
country: ‘Brazil’
},
{
name: ‘Ronaldo’,
country: ‘Portugal’
},
];
});
[/sourcecode]

Third step: Now create html file.

[sourcecode]
!–
==> Document Name: Tutorial Angular.js
–>
<html>
<head>
<title>Angular example</title>
<script src="angular.js"></script>
<script src="app.js"></script>
<script src="maincontroller.js"></script>
</head>

<body>
<div id=’content’ ng-app=’MyTutorialApp’ ng-controller=’MainController’>
<ul>
<li ng-repeat=’player in players’>
{{player.name}}
<p style="color:blue;">{{player.country}}</p>
</li>
</ul>
<p style="color:green;">Total number of players: <span style="color:red;">{{players.length}}</span></p>
</div>
</body>
</html>
[/sourcecode]

You can use the following link for angular.js

[sourcecode]
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
[/sourcecode]