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?

Ethan Li
  • 1,001
  • 1
  • 13
  • 18

4 Answers4

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:

Community
  • 1
  • 1
pkozlowski.opensource
  • 117,202
  • 60
  • 326
  • 286
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!

Community
  • 1
  • 1
BezR
  • 503
  • 1
  • 6
  • 12
  • 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 03 '15 at 07: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` –  Aug 18 '15 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.

Community
  • 1
  • 1
Guillaume86
  • 14,341
  • 4
  • 53
  • 53
  • thanks~~ I just figured it out as well. by the way, I found this link [http://blog.jetbrains.com/webide/2013/03/built-in-server-in-webstorm-6/], since I am using WebStorm, I can launch my site as a local web server – Ethan Li Apr 27 '13 at 11:38
  • And here's the revelant chromium issue (1055 stars...): https://code.google.com/p/chromium/issues/detail?id=47416&can=5&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified – Guillaume86 Apr 27 '13 at 11:40
  • 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` –  Aug 18 '15 at 23:42
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>
Ayotunde Olubiyo
  • 159
  • 1
  • 4