I attempted to utilize Angular JS by using a factory for my data structure...
However, it seems to be malfunctioning. I simply added some basic json data to be returned by the factory, and as a result,
the script stopped working. This is a fundamental example of angularjs that involves json
to be repeated and iterated through.
Below is the angularjs code that I wrote:
var Item = angular.module("Item", ['ngRoute']);
Item.config(function($routeProvider){
$routeProvider
.when("/add", {
controller : "ItemController",
templateUrl : "index.html"
})
.when("/edit", {
controller : "ItemController",
templateUrl : "index.html"
});
});
Item.factory("ItemsFactory", function(){
var items = [
{ name : "Washing Powder",
price : "2000",
balance : 14
},
{ name : "Shampoo",
price : "8500",
balance : 03
},
{ name : "Soap",
price : "1850",
balance : 27
}
];
var factory = {};
factory.getItems() = function(){
return items;
};
factory.postItems() = function(){
// POST items
};
return factory;
});
Item.controller("ItemController", function($scope, ItemsFactory){
$scope.items = ItemsFactory.getItems();
init();
function init()
{
$scope.items = ItemsFactory.getItems();
}
$scope.AddNewItem = function(){
$scope.items.push({
name : $scope.NewItem.name,
price : $scope.NewItem.price
});
};
});
And here is the HTML markup:
<!DOCTYPE html>
<html >
<head>
<title>Practicing AngularJS Framework...!</title>
<script src="angular.js" type="text/javascript"></script>
<script src="ngroute.js" type="text/javascript"></script>
<script src="scripts.js" type="text/javascript"></script>
</head>
<body data-ng-app="Item">
<div data-ng-controller="ItemController">
<div data-ng-repeat="each in items">
<p>Item {{ each.name }} costs {{ each.price }}.</p>
</div>
<div>
<input type="text" data-ng-model="NewItem.name" />
<input type="text" data-ng-model="NewItem.price" />
<br />
<input type="submit" value="Add Item" data-ng-click="AddNewItem()" />
</div>
</div>
</body>
</html>
The json content is not being loaded correctly to repeat them instantly...No action is taking place..