I'm a newbie when it comes to Angular and I'm eager to start practicing some coding. I've put together a simple app, but for some reason, the Angular expression isn't getting evaluated in the browser. When I try to display
{{inventory.product.name}}
, it just shows up as {{inventory.product.name}} on the page. Strangely enough, when I check the page source, I can see that my angular.min file has been loaded. Can anyone help me figure out what I might be doing wrong? Thanks in advance.HTML CODE
<title>Angular Practice</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body ng-app="inventory">
<div ng-controller="InventoryController as inventory">
<h1>{{inventory.product.name}}</h1>
<h2>Product Amount</h2>
<p>Product description</p>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
ANGULAR CODE
(Function(){
var app = angular.module('inventory', []);
app.controller('InventoryController', function(){
this.product = item;
});
var item = {
name: 'Test Item',
amount: 10,
description: 'This is the first test item',
}
})();