web-dev-qa-db-fra.com

Ai-je besoin de node.js pour utiliser Angularjs?

Je voudrais utiliser angular.js pour mon outil d’édition d’images sur mon site Web. Ai-je besoin node.js aussi?

Je ne comprends pas le scénario. Si je n'en ai pas besoin, quand utiliserons-nous les nœuds nodejs et angularjs ensemble?

74

NodeJS n'est pas nécessaire pour créer un outil d'édition d'images côté client.

AngularJS est un framework d’applications Web, géré par Google et la communauté, qui facilite la création d’applications d’une page unique, qui consiste en une page HTML avec CSS et JavaScript du côté client.

Mais si un jour vous souhaitez télécharger et stocker ces images sur un serveur et les rendre accessibles à plusieurs clients, alors vous aurez également besoin d'un serveur. Ce serveur pourrait être créé avec NodeJS.

61
Catalin MUNTEANU

Je ressens ta douleur.

Pour quelqu'un de nouveau dans le développement de Angular 2, je peux ressentir la douleur de devoir apprendre les technologies côté serveur pour quelque chose qui est essentiellement un technologie côté client . D'après ce que j'ai compris:

  1. node.js Sert uniquement à gérer les dépendances d'une application angular 2. Si vous parvenez d'une manière ou d'une autre à obtenir ces dépendances sans utiliser node.js, npm ou jspm, vous pourrez alors exécuter et développer votre application hors connexion. Cependant, le faire manuellement prendra un temps inexorable, car vous devez télécharger des fichiers manuellement, ce qui peut avoir d'autres dépendances nécessitant le téléchargement de fichiers supplémentaires (oui, j'y suis déjà allé). node.js Ou npm ou jspm automatise ce processus et effectue toutes les étapes nécessaires à la configuration des fichiers (jspm) de sorte que utiliser une dépendance particulière dans votre application, l'autre dépendance de cette dépendance sera également présente dans votre système.
  2. Certains navigateurs, notamment Google Chrome, restreignent les fichiers chargés localement à des fins de sécurité, de sorte que certaines technologies HTML 5 utilisées par Angular 2 génèrent une erreur lors du chargement à l'aide du protocole file:. Il vous faut donc un serveur à partir duquel vous pouvez servir votre application, de sorte que toutes les technologies HTML 5 disponibles soient disponibles pour l'exécution de Angular 2.
  3. node.js Est également nécessaire pour la fonctionnalité hot-module-reload Pour le développement rapide d'applications, car elle fournit un file watcher api Pour détecter les modifications apportées au code source.

Mais il existe un moyen de développer une application Angular 2 hors ligne sans node.js.

  1. Rappelez-vous quand j'ai dit que si vous parvenez à obtenir toutes les dépendances requises, vous pouvez exécuter et développer votre application hors connexion? Si vous pouvez trouver ou créer un paquet contenant toutes les dépendances requises par votre application, vous n'avez pas besoin de npm ou de jspm pour gérer les dépendances à votre place.
  2. Pour le problème file-access-restriction, Vous pouvez charger votre projet en tant qu’extension. Les extensions peuvent utiliser toutes les technologies HTML 5 disponibles, ainsi que certaines API puissantes (non disponibles même pour les applications servies sur un serveur), tout en restant locales par rapport à votre environnement de développement. Il n’est donc pas nécessaire de déclencher un serveur Web pour accéder aux technologies HTML 5 si vous utilisez votre application comme une extension.
  3. Pour la capacité hot-module-reload, Vous pouvez l'aborder de l'autre côté. Au lieu d'avoir un observateur de fichiers sur le serveur Web pour surveiller les modifications apportées aux fichiers du système local, vous pouvez le faire à partir de l'application elle-même. Puisque l'application peut fetch ou xmlhttprequest ressources nécessaires à l'application, vous pouvez périodiquement fetch ou xmlhttprequest les ressources dont votre application a besoin et les comparer un peu de cache. Mais comment savoir quels fichiers vérifier? Vous pouvez rechercher links dans la page, script, de img.. Si vous utilisez SystemJS comme chargeur de module, vous pouvez utiliser son registre pour rechercher les fichiers nécessaires à votre application mais pas chargé dans la page, car il a été transpilé ou quelque chose. Bien que tout cela puisse entraîner des pertes de performances pour votre système ainsi que la charge supplémentaire liée à la transposition ou au prétraitement du code non natif, ce travail peut être sous-traité à un web worker, Ce qui libère le thread d'exécution principal du système. pour votre code d'application.

Ne me crois pas? Voici la preuve.

  1. Le projet Angular dans Chrome sur github contient un fichier compressé qui contient les dépendances requises pour développer une application minimale Angular 2 (par minimal, je fais référence à dans le didacticiel Tour of Heroes (reportez-vous à la page de démarrage rapide). Ainsi, si vous êtes sur un système non pris en charge par node.js (oui, par exemple, ChromeOS) ou uniquement sur un système restreint dans lequel node.js n'est tout simplement pas disponible, toutes les dépendances requises sont disponibles et vous ne le faites pas. besoin de npm ou de jspm pour gérer les dépendances requises pour vous.
  2. Il existe un extension de preuve de concept qui sert localement le tutoriel de héros (les fichiers de développement, TypeScript et tous) sous la forme d'une extension chrome.
  3. L'extension implémente également une fonctionnalité hot-module-reload En se connectant aux primitives hmr développées par alexis vincent pour SystemJS. La fonctionnalité hot-module-reload Est activée par un seul fichier javascript. Ainsi, si cette fonctionnalité n'est pas nécessaire ou occupe trop de ressources, vous pouvez simplement supprimer la ligne de code incriminée.

Mais soyez prévenu cependant.

  1. Si vous utilisez ce système, vous avez besoin d'un moyen de mettre à jour votre package de développement à mesure que la technologie avance et avance à un rythme rapide (parler de Angular 3 alors que Angular 2 vient de paraître ) ou les technologies que vous utilisez pour développer votre application risquent de devenir obsolètes ou qu’à un moment donné, un changement d’application API pourrait empêcher votre application d’être fonctionnelle à l’avenir. De plus, il n’est pas garanti que vous disposiez de référentiels à jour pour les dépendances, car ces types de packages sont gérés manuellement.
  2. Le regroupement de votre application en tant qu’extension Chrome, comme dans Angular dans Chrome, créera des goulots d’étranglement en termes de performances. Étant donné que le code est transpilé et que les modules sont chargés paresseux, vous perdez les avancées de la compilation JIT et les autres améliorations de performances utilisées par les moteurs javascript modernes pour optimiser le code exécuté sur le navigateur. Cependant, ce que vous perdez en performance, vous gagnez la flexibilité nécessaire pour utiliser la technologie que vous préférez développer. Il y a toujours un compromis à faire. De plus, les performances ne sont au début que lorsque le code est chargé. Une fois chargé par l'application, le système saura comment implémenter les améliorations de performances. Lorsque vous distribuez votre application, vous devez vraiment compiler les ressources nécessaires pour tirer parti des améliorations apportées aux performances des moteurs javascript modernes.
  3. La fonctionnalité hot-module-reload Est actuellement un moyen rigolo d’implémenter un observateur de fichiers qui utilise des conventions communes pour un projet (temp1.ts, temp1.css, temp1.htm) car il n’ya aucun moyen (j’ai peut-être tort ) pour obtenir une liste définitive de toutes les ressources nécessaires à l'application mais non chargées sur la page principale (ressources transpilées ou pré-traitées).
72
windsinger

node.js est utilisé pour écrire du Javascript côté serveur. angular.js est un framework côté client.

Vous n'avez pas besoin de node.js pour utiliser angular.js, mais vous pouvez installer npm (gestionnaire de paquets de noeuds) pour utiliser des outils géniaux qui faciliteront votre vie de développeur angular). Par exemple: yoeman qui est un excellent outil d’échafaudage. Il existe de nombreux autres outils disponibles sur npm, voici un lien vers leur site En savoir plus sur angular sur le site officiel angular ou sur le angular chaîne youtube =

9
hasanain

N ° Angular est utilisé côté client et Node pour le côté serveur.

Ils ont l'habitude d'aller ensemble comme le MEAN Stack mais ce n'est pas nécessaire.

8
kike

Il est difficile de répondre sans connaître le fonctionnement de votre outil de traitement d'images. Mais pour répondre à votre question, non, vous n’avez pas besoin de Node.js pour utiliser AngularJS.

Angular est un framework javascript frontal qui fonctionne dans le navigateur Web du client.

Node est un service qui peut exécuter javascript et qui est souvent utilisé sur un serveur en remplacement de PHP ( comme dans MEAN stack ). Aussi, car Node est un service qui peut exécuter JavaScript. Il peut être utilisé sur votre ordinateur local lors du développement d'applications Angular) pour effectuer des tâches d'arrière-plan telles que la minification des fichiers CSS et JavaScript et l'exécution de tests.

Ainsi, si votre outil de traitement d'images est développé en javascript et que votre application utilise Angular et Node (en tant que serveur Web), le serveur peut être exécuté), le code peut être exécuté sur l'un des clients. côté ou côté serveur.

Ayez une lecture sur MEAN stack pour voir où Node et Angular s’intègre. Vous n’avez même pas besoin de Node à tout mais c'est bien de développer tout dans le même langage.

3
JayMc

Vous n'avez pas besoin de Node.JS pour qu'AngularJS fonctionne. NodeJS est côté serveur, AngularJS est côté client.

Si vous êtes nouveau sur AngularJS, je suggérerais ce tutoriel Tutoriel AngularJS . Dans le tutoriel, vous utiliserez NodeJS, vous comprendrez pourquoi les deux fonctionnent ensemble, mais ne sont pas nécessaires.

3
Billy