AngularJS Include reusable html content

Question

I am new to AngularJS.

I want to include reusable html in the main html. When I try to redo this example, it fails. Currently I have myUsers_List.htm, myUsers_Form.htm, myUsers.js, and main.html all in one folder.

The code in main.html is as follow:

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">

<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>

<script src= "myUsers.js"></script>

</body>
</html>

I can see the content in myUsers_List.htm and myUsers_Form.htm when I open main.html in Dreamweaver, but when I open it in browser, it's blank.

Could someone help me out the problem about that? Is is about the path of files or some other issue? Thanks.

Download bootstrap.min.css, angular.min.js and put them in the same folder. In main.html include them directly <link rel="stylesheet" href="bootstrap.min.css"> <script src= "angular.min.js"></script> — Vivek
– Vivek, Commented Nov 18, 2015 at 18:27
I did that. Still same thing, show in Dreamweaver, blank in browser. — Arthur
– Arthur, Commented Nov 18, 2015 at 18:39

Ram · Accepted Answer · 2015-11-18 19:44:05Z

1

When I try to check it out in the Chrome JavaScript debugger to see whether there is any error.

Since your error is

XMLHttpRequest cannot load file:///C:/Users/Desktop/New%20folder/myUsers_List.htm. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

It seems that you need to run your angular app from a web server instead of trying it locally.

edited Nov 18, 2015 at 19:44

Ram

3,09110 gold badges43 silver badges57 bronze badges

answered Nov 18, 2015 at 18:22

Nat

3,72723 silver badges22 bronze badges

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

2 Comments

Arthur Over a year ago

Error shown as: XMLHttpRequest cannot load file:///C:/Users/Desktop/New%20folder/myUsers_List.htm. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Nat Over a year ago

You have to run your code from the web server instead of locally. XMLHttpRequest does not allow local file access by default. Please take a look at stackoverflow.com/questions/27742070/… for duplicated question.

Lee Brindley · Accepted Answer · 2015-11-18 20:09:40Z

0

You need to either run your project under a webserver, xampp is simple to setup.

You could perhaps download angularjs and bootstrap and serve them locally from the file system, at the minute you're using a cdn.

Also, just an observation, you're missing your tag, on mobile so can't test if that'd cause any issues.

answered Nov 18, 2015 at 20:09

Lee Brindley

6,5326 gold badges44 silver badges67 bronze badges

Collectives™ on Stack Overflow

AngularJS Include reusable html content

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related