Angular gemStore doesn't output anything
Question
I'm currently trying out angularJS to see how it works. I followed a tutorial on egghead.io which is quite good.
Came up with this fiddle but it annoys me that I cant find the issue/error.
Nothing shows/outputs
app.js
(function() {
var app = angular.module('gemStore', []);
app.controller('StoreController', function() {
this.products = gems;
});
var gems = [
{
name: "Soap",
price: 25,
quantity: 10,
canPurchase: false
},
{
name: "Bag",
price: 100,
quantity: 15,
canPurchase: false
}
];
});
index
<body ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
<h1>{{product.name}}</h1>
<h2>${{product.price}}</h2>
<button ng-show="product.canPurchase">Add to cart</button>
</div>
This is the fiddle: https://jsfiddle.net/Vwsej/618/ (UPDATED) Hope you could point me in the right direction.
In advance, thanks.
2 answers
solution1
1 ACCPTED 2015-10-08 08:48:39
You forgot to include angular in your page. Simply add:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
to your HTML page. Note that jsfiddle has a button on the top left under "Frameworks & Extensions" that allows you to quick-add libraries such as angular.
You also forgot to call your IIFE:
(function() {
//Your JS...
})(); //<--- you forgot the ()
I forked your fiddle and fixed those issues , it works just fine.
solution2
1 2015-10-08 09:03:17
You forgot to call the self calling function: JS Fiddle: https://jsfiddle.net/Vwsej/620/
This is how self calling structure is:
(function(){
// your js code to execute
})();//forgot to call
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.