CODEWITHSUNDEEP
javascripthtmlangularjs
StackUser
StackUser

Reputation: 597

I can't include another html page in my index.html using Angularjs

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:

my web-site

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:

errors in console

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

Upvotes: 1

Views: 2637

Answers (2)

StackUser
StackUser

Reputation: 597

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"/>

Upvotes: 0

dfsq
dfsq

Reputation: 193271

You need to provide a string path in ngInclude, otherwise it's treated as an expression. Correct code in your case would be (note single quotes in path):

<div ng-include="'product-description.html'"></div>

Upvotes: 2

Related Questions