web-dev-qa-db-fra.com

Pourquoi ai-je besoin d'un serveur HTTP pour fonctionner? Angular 2?

Je viens de l'environnement Java/Spring traditionnel pour apprendre Angular 2 framework et j'ai du mal à saisir la plupart des concepts fondamentaux. 

Je lis le livre de Manning Angular 2 Development with TypeScript et il dit que j’ai besoin de HTTP-server pour exécuter mon SAP's. Pourquoi donc? 

Je pensais que Angular fonctionnait sur la machine cliente. Alors, quelle est exactement la fonction du serveur? Si je viens d'ouvrir HTML, Angular ne fait pas sa magie.

20
Tuomas Toivonen

En fait, les applications Angular supposent un accès via le protocole HTTP, il est donc judicieux d'utiliser un serveur HTTP pour le développement. Vous serez dans les "mêmes conditions". De plus, cela évite certaines limitations et restrictions:

  • Liens absolus relatifs à un nom de domaine. Je veux dire si vous essayez de référencer une ressource avec un chemin absolu à partir du chemin racine de votre domaine. Cela ne fonctionnera probablement pas avec le protocole de fichier car son chemin racine est le dossier racine de votre système de fichiers.
  • JavaScript et AJAX. JavaScript ne fonctionne pas bien avec le protocole file:// et vous pouvez appliquer certaines restrictions de sécurité selon les navigateurs.

Voir ces liens pour plus de détails sur ces problèmes:

En ce qui concerne le choix d'un serveur Web, les serveurs Web statiques suffisent pour les applications Angular et il existe plusieurs serveurs HTTP légers à cet effet:

Une fonctionnalité intéressante (avec lite-server par exemple) consiste en un rechargement en direct. Le serveur détecte la mise à jour de certains contenus (HTML, JavaScript, CSS) et recharge automatiquement les pages correspondantes dans le navigateur. Cela vous permet d'être plus efficace lors de la mise en œuvre de votre application.

Enfin, si vous implémentez les côtés client (angulaire) et serveur, ces composants doivent être exécutés sur différents serveurs (dans l'environnement de développement, ils pourraient/devraient être différents dans d'autres environnements, tels que la production). Je veux dire:

  • Un serveur HTTP statique pour le serveur frontal, qui sert uniquement les éléments de l'application Angular.
  • Un serveur HTTP dynamique pour le back-end qui fournit le traitement côté serveur. Vous êtes libre d'utiliser la technologie de votre choix (Node, Java, ...)

En raison de ces deux serveurs, vous devez activer CORS (Cross Origin Resource Sharing) pour permettre à l'application Angular d'exécuter des requêtes AJAX sur l'application serveur. En fait, vous n'êtes pas sur le même domaine. C'est quelque chose qui doit être configuré côté serveur pour renvoyer les en-têtes CORS lorsque le navigateur envoie un en-tête Origin dans la demande. Pour plus de détails, vous pouvez consulter ces liens:

Une autre chose à savoir si vous utilisez la fonctionnalité de routage de Angular est que le mode d’historique HTML5 simule certaines "vraies" adresses, mais que dans ce cas, vous devez configurer le serveur Web pour configurer point d’entrée) pour chaque URL correspondant à chaque route. Voir cette réponse pour plus de détails: Quand j'actualise mon site, je reçois un 404. C'est avec Angular2 et firebase .

Le dernier point à considérer est l'emballage de votre application pour votre environnement de production. Vous devez rendre votre application efficace (minimiser les éléments, concaténer des fichiers JavaScript, modèles de préchargement, ...). À ce niveau, il n'est pas nécessaire de conserver deux serveurs distincts et la partie Angular peut être intégrée à l'application côté serveur. Dans ce cas, ce dernier doit pouvoir servir certains fichiers de statistiques.

J'espère que ça vous aide, Thierry

19
Thierry Templier

Si cela ressemble à AngularJS 1.3, il fait des demandes AJAX pour obtenir des modèles HTML, et au moins pour cela il aurait besoin d’un vrai serveur HTTP.

6
jameswilddev

Actuellement Angular utilise PathLocationStrategy par défaut, ce qui nécessite un serveur effectuant une redirection (voir par exemple Angular le routeur 2.0 ne fonctionne pas pour recharger le navigateur ) Si vous utilisez HashLocationStrategy ce n'est pas nécessaire . Habituellement, vous chargez quand même une application de navigateur à partir d'un serveur HTTP et si vous configurez correctement Angular cela devrait le faire.

Pendant le développement, vous avez besoin d’un serveur car les navigateurs ont certaines limitations à ce qu’ils permettent lorsque vous chargez directement à partir de fichiers.

4
Günter Zöchbauer

Il a besoin d'un serveur léger pour servir les fichiers statiques.

Le raisonnement derrière cela est la sécurité. 

Les navigateurs n'autorisent pas les requêtes directes sur le système de fichiers.

2
Ali Gajani

Je viens de trouver que le serveur léger ne s'installerait pas pour moi.

angular-http-server a parfaitement fonctionné pour moi immédiatement:

https://www.npmjs.com/package/angular-http-server

1
Sharpiro