CODEWITHSUNDEEP
angularjs
TBA
TBA

Reputation: 1187

AngularJS ng-include issue

I had following html code,

index.html

<li class = "list-group-item" style="margin:50px;" ng-repeat="product in store.products">
      <h3>
              {{product.name}}
<em class="pull-right">{{product.price | currency}}   </em>
      </h3>
</li>

In order to get to know the directive ng-include,I added another html in the same directory of index.html.

product-title.html

{{product.name}}
<em class="pull-right">{{product.price | currency}}   </em>

And I changed the index.html to,

<h3 ng-include="'product-title.html'">
</h3>

But when I run the index,html, I am not getting the h3 details,

Please help me to find the mistake.

My Controller:

var app = angular.module("store", []);
    app.controller('StoreController', function () {
        this.products = gems;
    });



var gems = [
        {
            name: 'Product1',
            price: '2',
            description: 'Bla bla bla',
            images: [...],
            reviews: [...]
        },
{ .....}
];

Browser Error:

Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///D:/Angular%20JS/Source%20Codes/product-title.html'.
at Error (native)
    at file:///D:/Angular%20JS/Source%20Codes/angular.min.js:79:137
    at s (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:74:109)
    at f (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:71:429)
    at L (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:100:187)
    at L (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:100:187)
    at file:///D:/Angular%20JS/Source%20Codes/angular.min.js:101:350
    at k.$eval (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:112:68)
    at k.$digest (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:109:147)
    at k.$apply (file:///D:/Angular%20JS/Source%20Codes/angular.min.js:112:398) angular.min.js:92
(anonymous function) angular.min.js:92
(anonymous function) angular.min.js:68
L angular.min.js:100
L angular.min.js:100
(anonymous function) angular.min.js:101
k.$eval angular.min.js:112
k.$digest angular.min.js:109
k.$apply angular.min.js:112
(anonymous function) angular.min.js:18
d angular.min.js:35
c angular.min.js:18
fc angular.min.js:18
Xc angular.min.js:17
(anonymous function) angular.min.js:214
a angular.min.js:145
(anonymous function) angular.min.js:31
r angular.min.js:7
c

Upvotes: 1

Views: 1241

Answers (3)

HibernatedGuy
HibernatedGuy

Reputation: 2059

I had same issue while running through "file://....".
If you are using Mac or Linux, run your app with python simplehttpserver without installing anything.

1. cd [your-project-dir] 2. python -m SimpleHTTPServer

Your app will run on http://localhost:8000/

Upvotes: 0

Ivan Santiago
Ivan Santiago

Reputation: 1782

Another way to solve the issue is to create the website using Microsoft Visual Studio Express for Web. (This version is for free). Once you run your website you will get http://localhost/....

Upvotes: 0

Jens Neubauer
Jens Neubauer

Reputation: 1090

You should not be loading index.html from file:///.... Most browsers will have issues loading data from file URLs, because it triggers cross site scripting protection. Instead, host your directory on a local webserver like LAMP or nodeJs, so your files are coming from http://localhost/....

Upvotes: 2

Related Questions