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 — Vivek, Nov 18 '15 at 18:27
I did that. Still same thing, show in Dreamweaver, blank in browser. — Arthur, Nov 18 '15 at 18:39

score 1 · Answer 1 · edited Nov 18 '15 at 19:44

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 '15 at 19:44

Ram

3,092
10
40
56

answered Nov 18 '15 at 18:22

Nat

3,587
20
22

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. – Arthur Nov 18 '15 at 18:31
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 http://stackoverflow.com/questions/27742070/angularjs-error-cross-origin-requests-are-only-supported-for-protocol-schemes for duplicated question. – Nat Nov 18 '15 at 18:50

score 0 · Answer 2 · answered Nov 18 '15 at 20:09

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.

AngularJS Include reusable html content

2 Answers2