web-dev-qa-db-fra.com

Pourquoi AngularJS ng-view ne fonctionne-t-il pas localement?

Je travaille depuis quelques heures à faire en sorte que mes liens cliquent vers différentes vues avec mon application AngularJS.

Cependant, il me semble que la fonctionnalité ne fonctionne qu'en ligne sur Plunker.

J'ai essayé de tester la fonctionnalité de clic sur ma machine localement et ng-view ne semble pas se charger. Lorsque je télécharge mon code Plunker que je connais est correct car il fonctionne sur Plunker, ng-view semble cesser de fonctionner une fois qu'il est hébergé localement.

J'ai également eu des problèmes similaires avec ng-include et les directives que j'ai définies comme leurs propres balises HTML.

Y a-t-il une raison pour laquelle ceux-ci ne fonctionnent pas localement sur mon ordinateur? (Et un moyen de le réparer à des fins de test?)

Vous pouvez voir une partie du code dont je parle sur Plunker ici , si vous le souhaitez.

htmlangularjsangularjs-directiveangularjs-ng-include
21
user2494584

Tous les deux ng-view et ng-include utilisez AJAX pour charger les modèles. Le problème est que le navigateur par défaut n'autorise pas AJAX requêtes vers des fichiers situés sur votre système de fichiers local (pour des raisons de sécurité) Par conséquent, vous avez deux options:

  1. Exécutez un serveur Web local qui servira vos fichiers
  2. Dites à votre navigateur d'autoriser l'accès aux fichiers locaux

Si vous êtes sur Mac, la première option est plutôt simple car vous disposez de plusieurs serveurs Web intégrés (Apache httpd et Python appelé SimpleHTTPServer). Pour exécuter le module Python SimpleHTTPServer, ouvrez simplement la console dans le dossier où se trouvent vos fichiers et exécutez

python -m SimpleHTTPServer 3000

puis ouvrez votre navigateur et tapez http://localhost:3000. C'est tout.

Si vous êtes sous Windows, c'est également possible. Vous pouvez installer par exemple Wamp et y servir des fichiers.

La deuxième option est possible avec Chrome, il suffit de l'exécuter avec --allow-file-access-from-files option depuis la ligne de commande ou ajoutez cet indicateur au raccourci après le chemin vers Chrome exécutable.

Cette ressource peut également être utile pour comprendre comment exécuter les choses localement dans différents navigateurs et en utilisant différents serveurs Web.

28
Vadim

ng-view et ng-include font des requêtes ajax pour servir le fichier modèle. Parce que vous l'exécutez localement, il ne peut pas faire cette demande. Une solution simple est d'utiliser http-server pour servir votre contenu sur un serveur local.

17
Tyler McGinnis

ng-view fonctionnera localement si vous placez vos modèles dans index.html lui-même au lieu de placer des fichiers séparés à l'aide de balises de script, de sorte que angular n'aura plus besoin de faire AJAX demande de les récupérer.

<script type="text/ng-template" id="home.html">
  This is the Home template
</script>
4
Saidh