AngularJS ng-include issue

Question

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

look like empty store.products, can you show your controller ? — Pascalz
– Pascalz, Commented Aug 26, 2014 at 9:47
See browser console if there are 404 errors related to partial template loading. — Chandermani
– Chandermani, Commented Aug 26, 2014 at 9:57
Yes I do have an error "Failed to execute 'send'", please see updated question. — TBA
– TBA, Commented Aug 26, 2014 at 10:00
It would suggest to use yeoman for development of projects using angularJs as it takes care making things like testing the app, starting a server, bootstraping etc — Ankit Ladhania
– Ankit Ladhania, Commented Aug 26, 2014 at 10:13
Thanks. But what should I do to host my web files?, I used the command npm install -g yo and installed successfully. What next. no IDE? — TBA
– TBA, Commented Aug 26, 2014 at 10:44

Jens Neubauer · Accepted Answer · 2014-08-26 10:09:19Z

2

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

edited Aug 26, 2014 at 10:09

answered Aug 26, 2014 at 10:03

Jens Neubauer

1,0901 gold badge13 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jens Neubauer Over a year ago

Either use github.com/nodeapps/http-server or use yeoman to scaffold your angular application, which will configure a grunt serve task for you.

Ivan Santiago · Accepted Answer · 2015-03-07 04:53:10Z

0

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

answered Mar 7, 2015 at 4:53

Ivan Santiago

1,7821 gold badge17 silver badges13 bronze badges

Comments

HibernatedGuy · Accepted Answer · 2015-09-25 04:25:14Z

0

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/

answered Sep 25, 2015 at 4:25

HibernatedGuy

2,0992 gold badges13 silver badges15 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-include issue

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related