Menu
I am just learning Angularjs, and how to use templateUrl to load a template.
I have a simple directive:
var mainApp = angular.module("mainApp", []);
mainApp.directive("request", function() {
return {
restrict: "E",
scope: {
data: "@"
},
templateUrl: "te.html"
}
})
I try to use the directive like this:
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.0.0.js"></script>
<script src="js/angular.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="js/bootstrap.js"></script>
<script src="js/main.js"></script>
<style type="text/css">
div {
background-color: cornflowerblue;
}
#appPanel {
width: 900px;
height: 1000px;
}
</style>
</head>
<body>
<div id="appPanel" ng-app="mainApp" class="container">
<div class="row-fluid" style="height: 15%">
<div class="span12">
title
</div>
</div>
<div class="row-fluid" style="height: 85%">
<div class="span3" style="height: 100%">
actions
</div>
<div class="span9" style="height: 100%" ng-controller="AppCtrl">
<div ng-repeat="request in data.requests">
<request data="request"></request>
</div>
</div>
</div>
</div>
</body>
</html>
Once I open my page, I got this exception:
XMLHttpRequest cannot load file:///Users/chenguangli/Documents/workspace-web/ournotes/te.html. Origin null is not allowed by Access-Control-Allow-Origin. default.html:0
Error: Failed to load template: te.html
at Error (<anonymous>)
at file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:4503:17
at file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:8898:11
at wrappedErrback (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:6806:57)
at file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:6882:53
at Object.Scope.$eval (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:8011:28)
at Object.Scope.$digest (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:7876:25)
at Object.Scope.$apply (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:8097:24)
at done (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:9111:20)
at completeRequest (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:9274:7) js/angular.js:5704
js/angular.js:5704
js/angular.js:4800
wrappedErrback js/angular.js:6808
js/angular.js:6882
Scope.$eval js/angular.js:8011
Scope.$digest js/angular.js:7876
Scope.$apply js/angular.js:8097
done js/angular.js:9111
completeRequest js/angular.js:9274
xhr.onreadystatechange js/angular.js:9244
I am not trying load the template file cross domain for sure (te.html is in the same fold where default.html is).
Could anyone help me to figure out what is going on?
666
The problem is that you are running your example off the file system (using the file:// protocol) and many browsers (Chrome, Opera) restricts XHR calls when using the file:// protocol. AngularJS templates are downloaded via XHR and this, combined with the usage of the file:// protocol results in the error you are getting.
You've got several options when it comes to resolving this situation:
<script> directive: http://docs.angularjs.org/api/ng.directive:script so your templates are downloaded with the main HTML file and it is no longer necessary to load them via XHRfile:// protocol. For example this can be done in Chrome like so: Allow Google Chrome to use XMLHttpRequest to load a URL from a local file
83
If you have Node and NPM installed then run: npm install http-server -g
Then navigate to the folder containing your app and run: http-server
I found my answer in this SO post: Quick Node Server
You can download Node here (NPM comes with Node): Node
Hope this helps!
43
Chrome does not allow ajax requests on the file: protocol.
Take a look at: Google Chrome --allow-file-access-from-files disabled for Chrome Beta 8 for a workaround, or you could run a web server on your computer.
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
