AngularJS: Directive not working with templateUrl

If you are testing locally and using Google Chrome then this will not work because AngularJS is making an Ajax call to these html files, but Chrome blocks this with the error:

XMLHttpRequest cannot load file:///[filepath...] Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

You can verify this by opening up your developer console and viewing the errors.

To get around this a couple ways:

1. You can create a simple web server to run your code. If you have python you can just run the command (EDIT: from your folder containing index.html):

   python -m SimpleHTTPServer

2. You can disable same origin policy in Chrome: https://stackoverflow.com/a/6083677/1100379

3. Use an Chrome extension which may do this for you. I looked one up and this was the first result: Allow-Control-Allow-Origin

Everything works fine, just make sure your syntax is correct. Do not miss comma's in JSON

myApp.directive("hello", function() {
  return {
    restrict: 'E',
                 ^
    templateUrl:"hello.html"
  };
})

Demo: http://plnkr.co/edit/Z6rjbsuqzmcD4gBem36c

Actually we need to give the relative path for the templateUrl directive. Relative path which totally depends on component file in which you are giving path.

lets assume your file path may be like - app/hello.html

then your templateUrl path should be like - templateUrl:"./hello.html"

open dev tools in chrome go to network tab find reqest for hello.html compare reqested path with your path to hello.html on server. Move hello.html in proper place or update templeteUrl

Open your NodeJS command propmpt and install http-server using npm install http-server

http-server is a simple zero configuration command-line http server.

Once installed, just use http-server -o in your NodeJS command prompt.

1. Download Python and add it to you path environment variable

2. Create a cmd file to start python server in the directory where your index.html stays.

2 a) Create a new text document in the same root as your index.html

2 b) write - python -m SimpleHTTPServer 8080

2 c) Save as type 'All Files' and with some name like startServer .cmd

3. Now the workaround for failing AJAX call has been done. Oen in browser 127.0.0.1:8080/index.html

You can import template in the script and use it as a "template", not "templateUrl":

import hello from 'hello.html';
var myApp = angular.module('myApp', []);
myApp.directive("hello", function() {
 return {
    restrict: 'E'
    template: hello
  };
})

You can use:

userManagementApp.directive("ngCreateUserForm", function () {
    return {
        templateUrl : '/template/create.html'
    };
});

and in Server side, you must serve youre template like static file

in Go: e.Static("/template", "/path/to/static/folder") or

in httpd config:

Alias /template/ "/path/to/template/folder"