web-dev-qa-db-fra.com

Angular2 - comment commencer et par qui IDE

J'utilise AngularJS 1.x depuis quelques mois maintenant. Maintenant, je vais passer à Angular2 (avec TypeScript) et je ne suis pas sûr de savoir lequel 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 éditeur Nice pour les projets Angular2 - un compilateur TypeScript est-il inclus? Je serais heureux pour toute information dans cette direction.

angularide
50
quma

1) IDE

Je me demandais lequel IDE était le mieux adapté à Angular2.

Je suis un grand partisan de Sublime Text et même s'il existe un plugin TypeScript ... Cela ne semblait pas parfait avec le pouvoir de TypeScript.

J'ai donc essayé avec mon deuxième éditeur favori: Atom (+ plugin TypeScript). Mieux, mais pas de support pour l'importation automatique (peut-être qu'il en a maintenant?) Et j'ai également dû attendre 30 secondes avant d'obtenir une complétion automatique.

Ensuite, j'ai essayé Webstorm car la société dans laquelle je travaille a quelques licences. C'était génial et j'ai été vraiment heureux pendant un mois. Mais en utilisant un éditeur qui n'est pas libre senti ... bizarre. Je ne l'utiliserais pas chez moi pour des projets personnels, je ne pourrais pas le recommander facilement à d'autres personnes. Et honnêtement, je ne suis pas un grand fan de l'interface Webstorm.

Alors j'ai donné (un autre) essayer de Code Visual Studio que je n'ai pas trouvé aussi génial quand je l'ai essayé pour la première fois, quelques-uns il y a des mois. Il a sérieusement évolué et:
- c'est simple
- c'est complet
- Code
- Débogueur (à distance -> super puissant)
- Intégration de Git
- Magasin de plugins
- il offre un excellent support Angular2
- IntelliSense est vraiment génial

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

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

2) Angular 2: Découvrez les bases

Comme vous connaissez bien AngularJs, je ne sais pas ce que vous ressentiez à propos de la documentation officielle, mais je ne pouvais en tirer aucun enseignement. Je devais suivre de nombreux tutoriels (différents) puis, une fois que je comprenais AngularJs, je documentais.

Avec Angular2, ils ont compris le défi de disposer d’une bonne documentation et y prêtent attention depuis la version alpha (même si elle évoluait continuellement =)!).

Je vous recommande donc de continuer https://angular.io et de lire simplement le document.

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

3) Comment utiliser TypeScript avec du code Visual Studio?

Je vous recommande fortement d'utiliser angular-cli pour développer une application Angular2. Non seulement pour des raisons de simplicité, mais parce que dans une communauté, nous avons besoin d'un démarreur de base qui nous donne la possibilité d'avoir un repo structuré similaire. Nous pouvons donc comprendre facilement la structure d’un autre projet.

De plus, angular-cli gère la compilation TypeScript pour vous et vous n’avez pas à la gérer en ligne de commande ou à partir de votre IDE.

npm i -g TypeScript

(plus besoin de dactylographie depuis TypeScript 2.0!)

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

Alors viens courir

ng serve

Et accédez à votre application à l'adresse suivante: http: // localhost: 42

Angular-cli compile votre TypeScript et même vos fichiers (sccs | sass | less).

Lorsque vous souhaitez déployer votre application:

ng serve --prod

Réduira également JS et CSS.

4) Et ensuite?

Une fois que vous vous sentirez plus à l’aise avec Angular2 en général, je vous recommanderais vivement d’apprendre (plus) sur
- Redux
- RxJs

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

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

J'ai sorti un démarreur Ngrx! Pour ceux qui sont familiers avec Redux et qui souhaitent découvrir angular et/ou ngrx, cela pourrait vous aider à démarrer! Je suis sûr que ce serait également une bonne idée d’utiliser ce modèle comme point de départ pour tout type de projet Ngrx (petit, moyen ou même grand!). J'ai essayé de décrire dans le fichier Lisez-moi comment l'utiliser et le code lui-même contient de nombreux commentaires: https://github.com/maxime1992/angular-ngrx-starter

130
maxime1992

J'ai eu le même problème, car depuis que Angular 2 est sorti, je cherche un bon freeware IDE qui prend en charge Angular 2. Je vais décrire mon expérience.

NETBEANS

C'est très bien IDE pour Java et assez bon pour le développement Web. De nombreuses fonctionnalités stimulent votre travail. J'ai installé le plugin Everlaw TypeScript qui est maintenu sur github:

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

Avantages

  • Les actions TypeScript (construction, exécution, etc.) sont disponibles à partir de l'explorateur de projet.
  • Le plugin peut créer des fichiers TS lors de la sauvegarde.

Inconvénients

  • Absence de support Angular 2, car ce plugin ne prend en charge que TypeScript.
  • Problèmes liés à l'intellisense et à la coloration syntaxique dans angular fichiers de modèle et fichiers ts.
  • Absence de gabarits passe-partout pour NG2.

Eclipse

Le plug-in IMHO Eclipse with Angular2Eclipse est maintenant l'un des meilleurs IDE pour Angular 2. C'est une solution mature avec de nombreuses fonctionnalités qui dynamisent votre travail.

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

Avantages

  • Intégration avec angular-cli
  • Prise en charge de la syntaxe Angular2 dans les modèles de composant.
  • Prise en charge des fichiers TypeScript.
  • Disponible Angular 2 modèles de passe-partout.

Inconvénients

IMHO il n'y a pas d'inconvénients.

Si vous cherchez un bon tutoriel, comment configurer IDE essayez ceci

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

Code VS + Angular Service linguistique

Depuis que angular a publié un service linguistique, j'ai remplacé IDE en VS Code. J'ai travaillé sur Eclipse, mais je pense que VS Code est meilleur car il est plus rapide et plus léger qu'Eclipse avec l'adaptateur angular.

Le service de langage Angular permet d’obtenir des compléments, des erreurs, des astuces et une navigation dans vos modèles Angular, qu’ils soient externes dans un fichier HTML ou incorporés dans des annotations/décorateurs dans une chaîne. .

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

Si vous souhaitez installer ce complément, lancez VS Code Quick Open (Ctrl + P), collez la commande suivante et appuyez sur entrée.

ext install Angular.ng-template

Page de l'addon https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

9
Jacek Gzel