Configuration minimaliste d'Angular2

Question

J'ai du mal à comprendre ce qui est réellement nécessaire pour utiliser les fonctionnalités de base d'Angular2 avec Typescript. En d'autres termes, à quoi ressemble un projet minimaliste ? Quelles dépendances dois-je absolument avoir dans un "vrai" projet (pas seulement "Hello World", mais rien de complexe) ?

Je me rends compte que cette question a des réponses, par exemple, sur la site angulaire mais ils semblent inclure beaucoup d'informations générales. Les livres sur Angular semblent être dépassés. Par exemple, j'ai lancé npm install sur angular2 et j'ai obtenu des paquets différents de ceux listés dans ng-book2 (même s'il est vrai que je l'ai obtenu il y a un certain temps, donc il a pu être mis à jour).

1. Installer nœud OU ASSUREZ-VOUS D'AVOIR LA DERNIÈRE VERSION ! Même les installations relativement récentes peuvent être dépassées. Le moyen le plus simple de réinstaller node sous Windows est d'aller sur le site et de télécharger à nouveau le programme d'installation.
2. npm install angular2
3. npm install -g typescript
4. ? ??

Je suis en train de lancer une prime sur ce projet, donc il serait bien d'obtenir une liste d'étapes et un peu de code d'exemple avec une fonctionnalité de base. Je suis également intéressé par ce qui doit être référencé dans le projet et pourquoi. (Par exemple, une différence que j'ai remarquée par rapport à Angular 1 est que les gens semblent référencer plusieurs fichiers dans le dossier d'Angular 2 que npm installe, pourquoi ?)

P.S. De préférence avec Webpack, ou une explication sur le fait que SystemJs et WebPack peuvent être ignorés pour une installation minimaliste.

Answer 1

Laissez-moi vous présenter le meilleure graine angulaire2 En fait, je le sais.

Cette graine est particulière car ce n'est pas un projet angular2 classique, mais une graine isomorphe pour angular2 basée sur une technologie appelée universel angulaire . Il dispose également d'un système de compression qui rend votre projet plus rapide, merci à webpack .

Voici un schéma qui vous montre le concept d'une application isomorphe .

Le concept est assez simple : Isomorphe vient du grec "isos" pour "égal" et "morph" pour "forme". L'isomorphisme décrit que si vous regardez la même entité dans deux contextes différents, vous devriez obtenir la même chose. Ici, les contextes sont le serveur et le client. Bien que le terme ait été principalement utilisé en mathématiques jusqu'à présent, il est approprié pour décrire un modèle de programmation web où le code est partagé par le front-end et le back-end.

Pour résumer, ce modèle est censé vous permettre de faire un rendu du serveur . Cette amélioration rendra votre application web plus rapide, ce qui, par ailleurs, est très favorable au référencement et plus facile à maintenir. Google va vraiment l'adorer, car sans modèle isomorphe, votre application angular2 aura une structure HTML presque vide, ce qui est très mauvais pour la sémantique. .

Je vous invite également à regarder cette démonstration d'Angular Universal .

Je suppose que vous avez entendu parler de React.JS qui est un concurrent sérieux d'Angular2. React est également un framework isomorphe et vous pourriez le préférer pour certaines raisons, c'est pourquoi vous devriez lire cet article intitulé " Angular 2 contre React : Il y aura du sang ".

Convaincu ? Installons Angular2 Universal !

La première étape est simple : vérifier que vous avez les prérequis. Il suffit de taper la commande suivante :

node -v && npm -v

Si votre résultat ressemble à la sortie suivante, cela signifie que vous avez installé NodeJS et NPM.

v5.8.0
3.10.6

Si la sortie est différente, voici l'explication complète à installer NodeJS y NPM sur votre environnement spécifique. Pour cloner le dépôt, vous devrez également il faut installer git .

Lorsque vous avez terminé, clonez le dépôt en écrivant :

git clone https://github.com/angular/universal-starter myProject
cd myProject

Ensuite, vous devrez installer les modules Node qui sont utilisés par ce projet. La liste des dépendances du projet est détaillée dans le fichier paquet.json fichier. Pour les installer, il suffit d'utiliser la commande suivante dans le dossier de votre projet :

npm install

Si vous utilisez Ubuntu, il se peut que vous ayez un problème d'autorisation npm. Dans ce cas, vous pouvez simplement exécuter npm install en tant que sudo utilisateur, mais soyez prudent, cela peut échouer parce que la version de npm pour votre utilisateur sudo peut être différente de la version de npm pour votre utilisateur actuel . Cela signifie que sudo npm -v pourrait vous donner un résultat différent de la commande précédente, dans ce cas, mettez à jour npm en tant qu'utilisateur sudo et en tant qu'utilisateur actuel pour avoir la dernière version dans les deux cas.

Pour terminer l'installation, vous avez besoin d'un paquet npm appelé typographies Il suffit de l'installer en exécutant

npm install typings --global

Lorsque c'est fait, il suffit d'exécuter la commande suivante pour installer les dépendances de typings :

typings install

Lorsque vous avez terminé, vous pouvez simplement lancer le projet en exécutant

npm start

Si vous avez un problème d'EACCESS (autorisation), vous pouvez le réparer ou encore lancer cette commande en tant qu'utilisateur sudo. Maintenant vous pouvez explorer ce projet, jouer avec, et si vous avez des questions : la documentation Angular2 est là pour vous !

Answer 2

APPLICATION DE DÉMARRAGE EN LIGNE FONCTIONNELLE À PARTIR DU 6 JUILLET 2018.

On dirait que l'équipe Angular ne maintient plus le PLNKR Quick Start. Ils sont passés à stackblitz, le plunker de la réponse acceptée est maintenant périmé. Utilisez le lien ci-dessus.

Si cela se produit à l'avenir, l'équipe Angular semble poster des liens mis à jour à cette adresse : https://angular.io/guide/setup

Ironiquement, le lien qui y mène est maintenant rompu.