Angularjs templateUrl emplacement du fichier non trouvé

Je suis en local le développement d'un single page app.

Je n'arrive pas à charger un fichier HTML comme un modèle à l'aide d'une simple coutume directive en Angularjs. Si je tente d'utiliser du html brut, à l'aide de la template: attribut, il fonctionne très bien mais j'ai plus de 400 lignes de code que j'ai besoin pour l'utilisation de ce modèle, et dès que j'essaie d'utiliser templateUrl: rien de charges. J'ai essayé de 30 chemins possibles, y compris la copie du fichier HTML à de nombreux endroits différents, tels que C:/my-customer.html dans une tentative désespérée, voici mon projet structure:

    App--
        |
        css
        |
        img
        |
        js--
           |
           main.js
           |
           foundation.js
           |
           my-customer.html
        |
        templates--
                  |
                  my-customer.html
        |
        bcf.html
        |
        fluidType.html
        |
        start.html
        |
        my-customer.html

Garder les choses simples, je suis en utilisant l'exemple de la angulaire docs voici mon code de la directive (à l'intérieur main.js avec mon contrôleur):

app.directive('myCustomer', function() {
  return {
    templateUrl: 'my-customer.html'
  };
});

de plus, j'ai essayé les chemins comme: ../my-customer.html ../templates/my-customer.html et ainsi de suite, mais rien ne fonctionne pour templateUrl:, je suis sur windows sans serveur web local en cours d'exécution si cela aide.

Voici quelques erreurs de la console, mais en tant que débutant vous ne savez pas ce qu'ils veulent dire, j'ai un sentiment que j'ai besoin de faire tourner un serveur web et d'analyser à travers le protocole http.

 XMLHttpRequest cannot load file:///C:/Users/Dylan/Google%20Drive/PA/Dev/Grossing%20App/templates/my-customer.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
angular.js:11594 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/Dylan/Google%20Drive/PA/Dev/Grossing%20App/templates/my-customer.html'.
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:87:261
    at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:83:133)
    at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:80:366)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:112:276
    at l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:84)
    at l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:123:195)
    at l.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:362)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:448
    at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:37:96)angular.js:11594 (anonymous function)
angular.js:11594 Error: [$compile:tpload] http://errors.angularjs.org/1.3.8/$compile/tpload?p0=templates%2Fmy-customer.html
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:6:416
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:137:65
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:112:276
    at l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:84)
    at l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:123:195)
    at l.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:362)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:448
    at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:37:96)
    at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:369)

Nouveau à Angularjs. J'ai frappé un mur dans le projet, et je suis complètement coincé maintenant.

Même problème ici, ça peut aider: stackoverflow.com/questions/16887018/...
Essayé à l'aide de cet article avant de poster n'a pas résolu mon problème malheureusement. J'ai juste ajouté de la console d'erreurs si, toute aide est grandement appréciée.
Vous êtes de la SCRO erreur. Cela signifie que l'URL de votre code html et URL de votre webapp sont deux choses différentes.
Ah oui, à propos de la SCRO erreur: vous devez exécuter angulaire de l'application sur un serveur (par exemple serveur nodejs), et non pas de façon statique comme il sera la cause de la SCRO erreurs
Merci, je suis la copie de ce projet à une linux box et va terminer le projet.

OriginalL'auteur DylanH | 2014-12-30

12

Il devrait déjà être par rapport à la racine. Donc, cela devrait fonctionner:
```
app.directive('myCustomer', function() {
  return {
    templateUrl: '/templates/my-customer.html'
  };
});
```
Si cela ne fonctionne pas, assurez-vous d'abord, vous pouvez parcourir votre répertoire de modèle:

http://localhost/templates/my-customer.html

Vous devriez être en mesure d'obtenir le modèle directement. Une fois que vous trouver le modèle, puis il suffit de supprimer l'hôte et le port.

vous pouvez également supprimer de départ / je pense
Pour une raison quelconque, cela ne fonctionne pas non plus.
Avez-vous essayé de rechercher le modèle directement?
oui cette charge file:///C:/Users/Dylan/Google%20Drive/PA/Dev/Grossing%20App/templates/my-customer.html
Votre PC local a probablement un serveur web intégré. Vous devez étudier et exécuter par le serveur. Puis, tout fonctionnera comme prévu.

OriginalL'auteur Davin Tryon

Vous devez vous connecter pour publier un commentaire.