55 votes

Angular2 - comment commencer et avec quel IDE

J'utilise AngularJS 1.x depuis quelques mois maintenant. Maintenant, je vais passer à Angular2 (avec TypeScript) et en fait, je ne sais pas quel IDE utiliser. Il est également difficile pour moi de savoir comment compiler le code TypeScript en JavaScript - est-ce réellement nécessaire? J'ai lu que Visual Studio Code serait un bon éditeur pour les projets Angular2 - un compilateur TypeScript est-il inclus? Je serais heureux pour toute information dans cette direction.

140voto

Maxime Points 1054

1) IDE

Je me demandais moi-même IDE qui est le mieux adapté pour Angular2.

Je suis un grand Sublime Texte partisan et même quand il y a un Tapuscrit plugin ... Il n'a pas senti parfait avec Tapuscrit de puissance.

J'ai donc essayé avec mon deuxième préféré de l'éditeur : de l'Atome (+ Tapuscrit plugin). Mieux, MAIS pas de support pour l'importation automatique (peut-être qu'il a un peu maintenant ?) et aussi, j'ai dû attendre 30 ans avant que je sois tout l'autocomplétion.

Ensuite, j'ai essayé Webstorm l'entreprise que je suis en train de travailler à a certaines licences. C'était génial et j'ai vraiment été heureux pendant un mois. Mais l'aide d'un éditeur qui n'est pas libre senti ... bizarre. Je ne voudrais pas l'utiliser à la maison pour les projets personnels, je n'arrivais pas à le recommander à d'autres personnes facilement. Et honnestly, je ne suis pas un super fan de Webstorm interface.

Je lui ai donc donné (un autre) essayez de Code de Visual Studio que je ne l'ai pas trouvé si grande quand j'ai d'abord essayé il y a quelques mois. Il a sérieusement évolué et :
- c'est simple
- c'est complet
- Code
- Débogueur (à distance --> super puissant)
- L'intégration de Git
- Plugin store
- il a une grande grande Angular2 soutien
- intellisense est vraiment génial

Je l'utilise depuis un mois et jusqu'à présent, je suis vraiment heureux et ne se sentent pas le besoin de changer.

Juste pour vous aider à démarrer avec de bons plugins, voici la mienne : enter image description here


2) Angulaire 2 : Découvrir les bases

Comme vous êtes familier avec AngularJs, je ne sais pas comment vous vous êtes senti au sujet de la documentation officielle, mais je ne pouvais pas apprendre de lui. J'ai eu à suivre (différents) tutoriels et ensuite, j'ai utilisé de doc une fois que j'ai compris AngularJs.

Avec Angular2, ils ont bien compris l'enjeu d'avoir une bonne documentation et qu'ils paient l'attention sur elle depuis la version alpha (même quand il était en train d'évoluer en permanence =) !).

Donc, je vous recommande d'aller sur https://angular.io et il suffit de lire la doc.

C'est bien fait et n'est pas seulement pour les utilisateurs avancés. Vous trouverez de bons tutoriels !


3) Comment faire pour utiliser la Machine avec le Code de Visual Studio ?

Je voudrais vous recommandons vivement d'utiliser angulaires-cli pour l'élaboration d'un Angular2 app. Pas seulement pour des raisons de simplicité, mais parce que dans une communauté, nous avons besoin d'avoir une base de starter qui nous donne la possibilité d'avoir de semblables structuré repo. Ainsi, nous pouvons comprendre facilement la structure d'un autre projet.

De Plus, angulaires-cli poignées de la Machine de compilation pour vous et vous n'avez pas à traiter avec elle en ligne de commande ou à partir de votre IDE.

npm i -g typescript

(pas besoin de typings plus depuis le Tapuscrit 2.0 !)

npm i -g angular-cli
ng new my-super-project --style=scss
cd my-super-project

Ensuite, il suffit d'exécuter

ng serve

Et l'accès à votre application : http://localhost:4200

Angulaires-cli compile votre Tapuscrit et même votre (sccs|sass|less) des fichiers.

Lorsque vous souhaitez déployer votre application :

ng serve --prod

Sera également minimify CSS et JS.


4) Quelle est la prochaine ?

Une fois que vous vous sentez plus à l'aise avec Angular2 en général, je recommanderais fortement de vous apprendre (plus) sur
- Redux
- RxJs

Et une fois que vous êtes familier avec ces concepts, vous devriez commencer à jouer avec ngrx.

Bonne chance dans ce long (et génial) voyage !

J'ai publié une ngrx starter! Pour ceux qui sont familiers avec Redux et prêts à découvrir angulaire et/ou ngrx il pourrait vous aider à démarrer! Je suis sûr qu'il pourrait également être une bonne idée d'utiliser ce modèle comme un démarreur pour tout type de ngrx projet (petite, moyenne ou grande!). J'ai essayé de décrire dans le fichier lisez-moi comment l'utiliser et il y a beaucoup de commentaires dans le code lui-même: https://github.com/maxime1992/angular-ngrx-starter

10voto

Jacek Gzel Points 175

J'ai eu le même problème, parce que, depuis Angulaire 2 est sorti, je suis à la recherche de bonnes freeware IDE qui prend en charge Angulaire 2. Je vais décrire mon expérience.

NETBEANS

C'est un très bon IDE pour Java et très bon pour le développement Web. Il y a de nombreuses fonctionnalités qui améliorent votre travail. J'ai installé le plugin Everlaw Tapuscrit qui est maintenue sur github:

Plugin: https://github.com/Everlaw/nbts/releases

Avantages

  • Tapuscrit actions (build, run etc.) sont disponibles à partir de l'explorateur de projet.
  • Plugin peut construire des fichiers TS sur enregistrer.

Inconvénients

  • Le manque de soutien Angulaire 2, parce que ce plugin appuyer uniquement des caractères d'imprimerie.
  • Des ennuis avec les intelisense et de la syntaxe dans angulaire du modèle de fichiers et les fichiers ts.
  • Le manque de standard des modèles pour NG2.

ECLIPSE

À mon humble avis Eclipse avec Angular2Eclipse plugin est maintenant l'un des meilleurs IDE Angulaire 2 but. C'est la solution mature avec de nombreuses fonctionnalités qui améliorent votre travail.

Plugin: https://marketplace.eclipse.org/content/angular2-eclipse

Avantages

  • L'intégration avec angulaires-cli
  • Soutien pour Angular2 de la syntaxe à l'intérieur du composant de modèles.
  • Soutien pour le fichier d'enregistrement des fichiers.
  • Disponible Angulaire 2 modèles standard.

Inconvénients

À mon humble avis il n'y a pas d'inconvénients.

Si vous êtes à la recherche pour de bon tutoriel comment configurer l'IDE essayer cette

https://jaxenter.com/angular-2-intellij-netbeans-eclipse-128461.html

VS Code + Angulaire de la Langue de Service

Depuis angulaire libéré de la langue de service, j'ai changé d'IDE VS Code. J'ai travaillé sur eclipse mais maintenant, je pense que VS Code est mieux parce que c'est très rapide et plus léger que l'éclipse angulaire addon.

L'angle de la Langue de Service est un moyen d'obtenir des achèvements, d'erreurs, de conseils et de navigation à l'intérieur de votre Angulaire des modèles si ils sont à l'extérieur dans un fichier HTML ou incorporés dans les annotations/décorateurs dans une chaîne de caractères.

Vous pouvez en lire plus ici https://angular.io/guide/language-service

Si Vous souhaitez l'installer addon, lancez VS Code Rapide Ouvrir (Ctrl+P), collez la commande suivante et appuyez sur entrée.

ext install Angular.ng-template

Addon page https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X