templateUrl not working in AngularJS

Question

So for some reason the HTML page i'm trying to load with templateUrl is not showing up. The files are all in the same directory, console shows no error, it just doesn't load the page elements i'm trying to add. My directive is as simple as:

.directive('tagTeste',function(){
    return{
        templateUrl: 'templateUrl.html'
    };
});

My template html i'm trying to load:

<!doctype html>
<html ng-app="teste">
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<table border="1" width="500" height="150">
   <thead>
      <tr>
         <td>Nome</td>
         <td>Telefone</td>
      </tr>
    </thead>
    <tbody>
        <tr ng-repeat="pessoa in pessoas">
          <td>{{pessoa.nome}}</td>
          <td>{{pessoa.telefone}}</td>
        </tr>
    </tbody>
</table>
<form>
  <p> Nome: <input type="text" ng-model="nomenovo" required> </p>
  <p> Telefone: <input type="number" ng-model="numeronovo" required> </p>
  <input type="button" ng-click="add()">
</form>
<body>
</html>

My index page:

<!doctype html>
<html ng-app="teste">
  <head>
    <h1 align="center">Table teste</h1>
  <meta charset="utf-8">
  <title>Teste</title>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="repeaterdirective.js"></script>
  <script type="text/ng-template" id="templateUrl.html">
  </head>
  <div ng-controller="index" align="center">
  <body>
    <div tag-teste></div>
  </body>
  </div>
</html>

Is the closing </div> after </body> in your index page just a typo? — Sébastien
– Sébastien, Commented Jan 18, 2018 at 17:54

lzagkaretos · Accepted Answer · 2018-01-18 17:54:04Z

2

Remove <script type="text/ng-template" id="templateUrl.html"> from index.

And clear a bit templateUrl.html. Tags as <html> and <body> are already contained in index.

Take a look at plunker.

Updated after comment:

Change index as:

<!doctype html>
<html ng-app="teste">
  <head>

  <meta charset="utf-8">
  <title>Teste</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="index" align="center">
      <h1 align="center">Table teste</h1>
      <div tag-teste></div>
    </div>
  </body>

</html>

edited Jan 18, 2018 at 17:54

answered Jan 18, 2018 at 17:38

lzagkaretos

2,9202 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

João Lell Over a year ago

Now it gives me the error: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. Which i guess it's cause i'm not using a web server

João Lell Over a year ago

That's why i was trying to load the templateUrl page with the script tag.

lzagkaretos Over a year ago

Can you please create a demo of this problem in fiddle or plunker to take a look? Or try to change your code as in plunker just posted, where template of the directive is being loaded without cross-origin errors.

João Lell Over a year ago

Here is the plunker plnkr.co/edit/e24Y7C9rjsKXkt0PTyJx?p=preview

lzagkaretos Over a year ago

Updated my answer. Change a little the index.html

|

Sébastien · Accepted Answer · 2018-01-18 17:49:58Z

1

If you use templateUrl while loading your file in Chrome browser with the file:///, protocol you will always get this error.

On the other hand Mozilla Firefox will allow it, so will Microsoft Edge.

The other solution is to serve your pages from an HTTP server.

An easy one to use is http-server.

answered Jan 18, 2018 at 17:49

Sébastien

12.1k12 gold badges60 silver badges83 bronze badges

6 Comments

João Lell Over a year ago

How should I proceed with this? I installed http-server and as a beginner don't know how to start the server with my index file.

Sébastien Over a year ago

To start the server you simply use the command http-server followed by the absolute path to your folder, for example http-server c:\myFolder . This will start the server on port 8080, so just open a browser to http://localhost:8080.

João Lell Over a year ago

I've tried running http-server C:\home\joao\Desktop\projetosAtom\Testedirectives\ but nothing happens

João Lell Over a year ago

It says now the page wasn't found

Sébastien Over a year ago

If your page is not named index.html it will not be loaded automatically. Then add the file name at the end of the path http-server C:\home\joao\Desktop\projetosAtom\Testedirectives\file.html

|

Collectives™ on Stack Overflow

templateUrl not working in AngularJS

2 Answers 2

17 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

17 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related