Create your first AngularJs App

 

Hi Friends,

In the below post we will create an AngularJs app.

First of all we will need angular js file and for some CSS we will need bootstarp files. you can download it from the official website.

Angular Js https://angularjs.org/
BootStrap http://getbootstrap.com/

 

you can download it and set it as below.

image

here I have added grocerylist.html file

open that file and update the code as below.

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><!DOCTYPE html>
<html ng-app="myGroceryApp">
<head>
<title>Grocery List</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.css" rel="stylesheet" />
<script src="js/angular.js"></script>

<script type="text/javascript">

</script>
</head>
<body>
<h1>August's Grocery List</h1>
<table>
<thead>
<tr>
<th>Sr.No
</th>
<th>Item Name
</th>
<th>Quantity
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>

Here I am creating an angular js app “myGroceryApp” and I added that using angular js ng-app tag. I also create a table structure for showing list, it will have SrNo, Item Name and quantity as columns and the row will be dynamically using model object.

So, here we will need a model object which will preserve the added grosery items, for simplicity we will store the data in a in-memory model object.

I updated the script as below

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><script type="text/javascript">
var model = {
month:
"August",
items: []
};

var myGroceryApp = angular.module("myGroceryApp", []);

myGroceryApp.controller(
"itemListCtrl", function ($scope) {
$scope.itemList
= model;


$scope.AddGroseryItem
= function (itemName, quantity) {
var srNo = $scope.itemList.items.length+1;
$scope.itemList.items.push({
srNo: srNo,
itemName: itemName,
quantity: quantity
});

}
});
</script>

here I have declared a model object and it have month and items as property. The “items” will store the added items.

next I declared a variable name “myGroceryApp”( it is same we declared at ng-app tag) and assigned it as angular js module.

next we declared a controller name “itemListCtrl” and using $scope object of angular js I have created itemList property and a method “AddGroceryItem”.

next I have updated the html. The entire page is as below.

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><!DOCTYPE html>
<html ng-app="myGroceryApp">
<head>
<title>Grocery List</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.css" rel="stylesheet" />
<script src="js/angular.js"></script>

<script type="text/javascript">
var model = {
month:
"August",
items: []
};

var myGroceryApp = angular.module("myGroceryApp", []);

myGroceryApp.controller(
"itemListCtrl", function ($scope) {
$scope.itemList
= model;

$scope.AddGroseryItem
= function (itemName, quantity) {
var srNo = $scope.itemList.items.length+1;
$scope.itemList.items.push({
srNo: srNo,
itemName: itemName,
quantity: quantity
});
}
});
</script>
</head>
<body ng-controller="itemListCtrl">
<h1>August's Grocery List</h1>
<div>
<div class="input-group">
Item Name :
<input ng-model="itemName" />
Quantity :
<input ng-model="quantity" />
<button class="btn btn-default" ng-click="AddGroseryItem(itemName,quantity)">Add Item</button>
</div>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Sr.No
</th>
<th>Item Name
</th>
<th>Quantity
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in itemList.items track by $index">
<td>{{item.srNo}}</td>
<td>{{item.itemName}}</td>
<td>{{item.quantity}}</td>
</tr>
</tbody>
</table>
</body>
</html>

here I have used couple of angular directive like ng-repeat,ng-click,ng-model etc. you can get complete information of these directives at angular js official site.

https://docs.angularjs.org/api/ng/directive/ 

After running the page you will see the below behavior

image

I hope you found this post useful. Thanks for reading. Happy Coding .Smile

Advertisements

2 thoughts on “Create your first AngularJs App

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s