Em Ae Em Ae - 4 months ago 20
AngularJS Question

Can't find angularJS libs

I am new to front end development and learning angularJS. I have following folder structure

.
├── angular.min.js
├── app.js
├── bootstrap.min.css
└── index.html


And here is my
index.html


<!DOCTYPE html>
<html ng-app="gemStore">

<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>

<body ng-controller="StoreController as store">
<div class="product row" ng-hide="store.product.soldOut">
<h3>
{{store.product.name}}
<em class="pull-right">${{store.product.price}}</em>
</h3>
<button ng-show="store.product.canPurchase">Add to cart</button>
</div>
</body>

</html>


and my
app.js
file is

(function(){
var app = angular.module('gemStore', []);

app.controller('StoreController', function(){
this.products = gem;
});

var gem = [{
name: 'Azurite',
price: 2.95,
canPurchase: false,
soldOut: true;
}, {
name: 'Azurite 2',
price: 2.95,
canPurchase: false,
soldOut: true,
}]
})();


When i open this index.html page on chrome, I don't see
angularJS
directives being replaced by real value. I haven't hosted this file on any server. As per my understanding, for html, i can just keep all the resources in relative path and the
html
file could see them. then why not here
angularJS
is able to resolve it ?

Here is my
html
output when i open it on chrome

enter image description here

Answer

You just forgot to include the ngApp directive, as below:

angular.module('app', [])
...

<html ng-app="app">