I'm following the browser courses of angularjs that you can find here: https://www.angularjs.org/
My main page is "index.html":
<!DOCTYPE html>
<html ng-app="bookStore">
<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">
<header>
<h1 class="text-center"> BOOKS OF THE MAGIC LIBRARY </h1>
</header>
<div class="list-group">
<div class="list-group-item" ng-repeat="product in store.products">
<h2>{{product.title}} <em class="pull-right">{{product.price | currency}}</em></h2>
<div class="img-wrap">
<img src="{{product.image}}"/>
</div>
<div ng-include="product-description.html">
</div>
<product-decsription></product-description>
</div>
</div>
</body>
</html>
You can see that I tried two times to include a second page, in the code above, but It didn't work. The code in which I try to include a second page is the following (I have tried to use ng-include and the directive also singularly, but I obtained the same result):
<div ng-include="product-description.html">
</div>
<product-decsription></product-description>
The following is the code of app.js:
(function(){
var app = angular.module('bookStore', []);
app.controller('StoreController', function(){
this.products = books;
});
app.directive('productDescription', function(){
return {
restrict:'E',
templateUrl: 'product-description.html'
}
});
books = [
{
author : "J.K. Rowling",
title: "The prisoner of Azkaban",
description: "the story of an innocent prisoner",
price: 10.50,
image: "hpa.jpg"
},
{
author: "J.K. Rowling",
title: "H.P and the Chamber of Secrets",
description: "the story of a bloody chamber",
price: 8.00,
image: "cos.jpg"
},
{
author: "J.K. Rowling",
title: "H.P and the deathly hollows",
description: "the story fo deathly hollows",
price: 15.00,
image : "dh.jpg"
}
];
})();
The following is the code of "product-description.html":
<h3>Description</h3>
<blockquote>{{product.description}}</blockquote>
I have put all this files (both html ones, both javascript one) in the same folder. Everytime I open the file "index.html" using my browser (google chrome), I can't see the descriptions. The following image shows what I see:
I have tried to put a single quote in ng-include inside the double quote, as suggested by dfsq, but it doesn't work (I still have the same result as in the image above):
<!DOCTYPE html>
<html ng-app="bookStore">
<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">
<header>
<h1 class="text-center"> BOOKS OF THE MAGIC LIBRARY </h1>
</header>
<div class="list-group">
<div class="list-group-item" ng-repeat="product in store.products">
<h2>{{product.title}} <em class="pull-right">{{product.price | currency}}</em></h2>
<div class="img-wrap">
<img src="{{product.image}}"/>
</div>
<div ng-include="'product-description.html'"></div>
</div>
</div>
</body>
</html>
I have found those errors in console running the code above:
The problem, as highlighted by comments and replies was that I used "file" as protocol instead of "http" (to do that I should have used a web service). I have installed an IDE which has an integrated web service, so that I have solved the problem. Moroever, there was also another little mistake in the code:
<img src="bla bla"/>
instead of:
<img ng-src="bla bla"/>
I still wait for someone who could tell me why "http-server" didn't work. I will give him the best answer eventually
