34

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?

4 Answers 4

71

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:

3
  • thanks~~ I also found out that since I am using WebStorm, I can actually launch the page as in a built-in web server
    – Ethan Li
    Apr 27, 2013 at 11:39
  • Excellent suggestion to use the script tag. Saved me some trouble for a simple project. May 31, 2015 at 22:12
  • what if I'm running it from a mobile? my project uses cordova, for example Sep 2, 2015 at 1:29
14

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!

2
  • Super quick way to serve your project if you already have node installed. Worked for me on my windows environment :) Just reloade my project and everything worked. I was experiencing the same issue where it angular wouldn't retrieve the local file for the template url.
    – rekordboy
    Jan 3, 2015 at 7:18
  • so if i have a server running in the directory with my project, what should my templateUrl look like? Right now I have directives/filename.html
    – user3465521
    Aug 18, 2015 at 23:42
3

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
0

You can also use the expressjs web server to load your index.html file. Install express server npm install express -S

server.js file

const express = require('express')
const  path = require('path');

const app = express();

load angularjs files by specifying the path

NOTE: Assuming your angular files( module/controller/directive files and the index.html file) are inside a public directory.

app.use(express.static(path.join(__dirname, 'public')));

listen (start app with node server.js)

app.listen(8080, () => console.log('App listening on port 8080'));

package.json file

{

  "scripts": {
    "dev": "node server.js"
  },
  "dependencies": {
    "express": "^4.16.4"
  },
}

Run npm run dev to start server.

public/index.html file

<!DOCTYPE html>
<html ng-app="mainApp">
    <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"  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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.