AngularJS: Directive not working with templateUrl

Question

New to angular and I've been having trouble with what should be a simple directive for the past hour or so. Would really appreciate some help!

I believe hello should appear, can't seem to get it to work?

test.html

   <html>
   <head lang="en">
     <title>Test</title>
   </head>
   <body>
    <div ng-app="myApp">
        <hello></hello>
    </div>


    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
    </body>
  </html>

main.js

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

hello.html

<p>Hello</p>

Replace `templateUrl:` with `template:
Hello
` - does it work then? — tymeJV, Jul 09 '14 at 17:42
Sorry didn't specify, I got it to work with just template but I'm having trouble with templateUrl, which is what I want to use. The simple Hello is just a placeholder — user3821516, Jul 09 '14 at 17:45
Im guessing your URL is wrong...if you open the console and head to the network tab you should see the request for `hello.html` and it'll probably be red. — tymeJV, Jul 09 '14 at 17:59
try this link http://stackoverflow.com/questions/29528922/how-to-create-a-localhost-server-to-run-an-angularjs-project — Suparna, Feb 11 '16 at 11:18

score 15 · Answer 1 · edited May 23 '17 at 10:31

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:

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
You can disable same origin policy in Chrome: https://stackoverflow.com/a/6083677/1100379
Use an Chrome extension which may do this for you. I looked one up and this was the first result: Allow-Control-Allow-Origin

This was the case using angular inside an android webview. – sarwar Aug 06 '15 at 13:58 — sarwar, Aug 06 '15 at 13:58

score 9 · Answer 2 · answered Jul 09 '14 at 17:53

9

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

answered Jul 09 '14 at 17:53

Raghavendra

4,929
4
32
49

The code might work properly on Plunker, but might result in cross origin issues if we are running it locally and not using a local server. – kensplanet Feb 03 '16 at 21:06

score 1 · Answer 3 · answered May 13 '17 at 17:20

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"

score 0 · Answer 4 · answered Jul 09 '14 at 17:51

0

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

answered Jul 09 '14 at 17:51

sylwester

16,312
1
22
32

score 0 · Answer 5 · answered Feb 03 '16 at 21:10

0

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.

answered Feb 03 '16 at 21:10

kensplanet

472
7
14

score 0 · Answer 6 · answered Jul 03 '17 at 06:26

Download Python and add it to you path environment variable
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

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

Milad Mohamadi · Answer 7 · 2020-04-25T09:22:29.630

0

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
  };
})

edited Apr 25 '20 at 09:22

answered Apr 25 '20 at 08:17

Milad Mohamadi

111
1
9

score 0 · Answer 8 · answered May 06 '20 at 07:04

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"

AngularJS: Directive not working with templateUrl

8 Answers8

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