Below is a very simple example of AngularJS to explain few important directives which we gonna use from very start.
First, we need to know what are directives basically?
So, To enhance our HTML, AngularJs provides us some in built attributes called
"Directives", but we can also create our own directives which we will discuss later.
ng-app : This initializes AngularJs application i.e. The first ng-app found in the document will automatically initializes application when web page is loaded. This defines a root element of an AngularJs application.
ng-model : This binds the value of HTML element to application data. This binding goes both ways i.e. if value of HTML element is changed then AngularJs property automatically getting updated without refreshing a page.
ng-click : defines AngularJS code that will be executed when the element is being clicked. This directive comes under AngularJs Events.
ng-controller : The ng-controller directive defines the application controller,created by a standard JavaScript object constructor.
The StudentController function is a JavaScript function. AngularJS will invoke the controller with a
$scope object which is the application object i.e. we can access any function and properties through this.
The controller creates properties in the scope.
The ng-model directives bind HTML elements to the controller properties.
In below example we can see the use of all the directives above explained in short obviously..;)
Example
<!doctype html>
<html ng-app>
<head>
<title>Simple TableRow Addition</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
</head>
<body ng-controller="StudentController">
<table>
<thead>
<tr>
<td>
<label> User: </label>
<input type="text" placeholder="Enter Name" ng-model="name" />
</td>
</tr>
<tr>
<td>
<label> Age: </label>
<input type="number" placeholder="Enter Age" ng-model="age" />
</td>
</tr>
<tr>
<td>
<label> Class: </label>
<input type="text" placeholder="Enter Class" ng-model="uclass" />
</td>
</tr>
</thead>
<td align="right">
<button type="button" ng-click="addUser()"> adduser </button>
</td>
</table>
<table border="1" cellpadding="10">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
<th>
Title
</th>
</tr>
</thead>
<body>
<tr ng-repeat="user in users">
<td>
{{ user.name }}
</td>
<td>
{{ user.age }}
</td>
<td>
{{ user.uclass }}
</td>
</tr>
</body>
</table>
<script>
function StudentController($scope)
{
$scope.users = [];
$scope.addUser = function(){
$scope.users.push({name : $scope.name,age:$scope.age,uclass:$scope.uclass});
}
}
</script>
</body>
</html>
Result :
