Ik gebruik AngularJS 1.x nu een paar maanden. Nu ga ik over naar Angular2 (met TypeScript) en eigenlijk weet ik niet zeker welke IDE ik moet gebruiken.
Het is mij ook niet duidelijk hoe ik de TypeScript-code in JavaScript moet compileren – is dit eigenlijk nodig?
Ik heb gelezen dat Visual Studio Code een leuke editor zou zijn voor Angular2-projecten – is er een TypeScript-compiler inbegrepen? Ik zou graag informatie in deze richting ontvangen.
Antwoord 1, autoriteit 100%
1) IDE
Ik vroeg me af welke IDE het meest geschikt is voor Angular2.
Ik ben een groot voorstander van Sublime Texten zelfs al is er een Typescript-plug-in … Het voelde niet perfect met de kracht van Typescript.
Dus ik probeerde het met mijn tweede favoriete editor: Atom(+ Typescript-plug-in).
Beter MAAR geen ondersteuning voor automatische import (misschien heeft het er nu een?) En ook moest ik 30 seconden wachten voordat ik automatisch werd aangevuld.
Vervolgens probeerde ik Webstorm omdat het bedrijf waar ik momenteel werk een aantal licenties heeft. Het was geweldig en ik was echt een maand blij. Maar een editor gebruiken die niet gratis is, voelde … raar. Ik zou het thuis niet gebruiken voor persoonlijke projecten, ik zou het niet gemakkelijk aan andere mensen kunnen aanbevelen. En eerlijk gezegd ben ik geen superfan van de Webstorm-interface.
Dus ik gaf (nog een) poging om Visual Studio-codedie ik deed vond het niet zo geweldig toen ik het een paar maanden geleden voor het eerst probeerde. Het is serieus geëvolueerd en:
– het is eenvoudig
– het is voltooid
– Code
– Debugger (op afstand –> super krachtig)
– Git-integratie
– Plugin winkel
– het heeft geweldige geweldige Angular2-ondersteuning
– intellisense is echt geweldig
Ik gebruik het sinds een maand en tot nu toe ben ik erg blij en heb ik niet de behoefte om te veranderen.
Om je te helpen beginnen met goede plug-ins, hier is de mijne:
2) Angular 2: Ontdek de basis
Omdat je bekend bent met AngularJs, weet ik niet wat je van de officiële documentatie vond, maar ik kon er niets van leren. Ik moest veel (verschillende) tutorials volgen en daarna ging ik doceren zodra ik AngularJs begreep.
Met Angular2 begrepen ze de uitdaging om een geweldige documentatie te hebben en ze besteden er aandacht aan sinds de alfaversie (zelfs als deze continu evolueerde =) !).
Dus ik raad je aan om naar https://angular.iote gaan en het document te lezen.
Het is goed gedaan en is niet alleen voor gevorderde gebruikers. Je vindt er goede tutorials!
3) Hoe Typescript te gebruiken met Visual Studio Code ?
Ik raad je ten zeerste aan om angular-clite gebruiken voor het ontwikkelen van een Angular2-app. Niet alleen voor de eenvoud, maar omdat we in een gemeenschap een basisstarter nodig hebben die ons de mogelijkheid geeft om vergelijkbare gestructureerde repo’s te hebben. Zodat we gemakkelijk de structuur van een ander project kunnen begrijpen.
Plus, angular-cli handelt Typescript-compilatie voor u af en u hoeft er niet mee om te gaan in de opdrachtregel of vanuit uw IDE.
npm i -g typescript
(Sinds Typescript 2.0 hoef je niet meer te typen!)
npm i -g angular-cli
ng new my-super-project --style=scss
cd my-super-project
Rennen dan gewoon
ng serve
En toegang tot uw app op: http://localhost:4200
Angular-cli compileert je Typescript en zelfs je (sccs|sass|less) bestanden.
Wanneer u uw app wilt implementeren:
ng serve --prod
Zal ook JS en CSS worden geminimaliseerd.
4) Wat nu?
Zodra u zich meer op uw gemak voelt bij Angular2 in het algemeen, raad ik u ten zeerste aan om (meer) te leren over
– Redux
– RxJ’s
En als je eenmaal bekend bent met die concepten, moet je beginnen met ngrx.
Veel succes op deze lange (en geweldige) reis!
Ik heb een ngrx-starter uitgebracht! Voor degenen die bekend zijn met Redux en die angular en/of ngrx willen ontdekken, kan het je misschien op weg helpen! Ik weet zeker dat het ook een goed idee kan zijn om deze sjabloon als starter te gebruiken voor elk soort ngrx-project (klein, medium of zelfs groot!). Ik heb geprobeerd in het Leesmij-bestand te beschrijven hoe het te gebruiken en er is veel commentaar op de code zelf: https ://github.com/maxime1992/angular-ngrx-starter
Antwoord 2, autoriteit 7%
Ik had hetzelfde probleem, want sinds Angular 2 werd uitgebracht, zie ik er goed uit als freeware IDE die Angular 2 ondersteunt. Ik zal mijn ervaring beschrijven.
NETBEANS
Het is een zeer goede IDE voor Java en redelijk goed voor webontwikkeling. Er zijn veel functies die uw werk een boost geven. Ik heb de plug-in Everlaw Typescript geïnstalleerd die wordt onderhouden op github:
Plug-in: https://github.com/Everlaw/nbts/releases
Voordelen
- Typescript-acties (bouwen, uitvoeren enz.) zijn beschikbaar in de projectverkenner.
- Plug-in kan TS-bestanden bouwen bij opslaan.
Nadelen
- Gebrek aan ondersteuning voor Angular 2, omdat deze plug-in alleen typescript ondersteunt.
- Problemen met intelisense en syntaxisaccentuering in hoekige sjabloonbestanden en ts-bestanden.
- Gebrek aan standaardsjablonen voor NG2.
VERduistering
IMHO Eclipse met Angular2Eclipse-plug-in is nu een van de beste IDE voor Angular 2-doeleinden. Het is een volwassen oplossing met veel functies die uw werk een boost geven.
Plug-in: https://marketplace.eclipse.org/content/angular2-eclipse
Voordelen
- Integratie met angular-cli
- Ondersteuning voor Angular2-syntaxis in de componentsjablonen.
- Ondersteuning voor getypte bestanden.
- Beschikbare Angular 2 standaardsjablonen.
Nadelen
IMHO er zijn geen nadelen.
Als je op zoek bent naar een goede tutorial over het configureren van IDE, probeer dan dit
https://jaxenter.com/angular-2-intellij -netbeans-eclipse-128461.html
VS-code+ Angular Language Service
Sinds de taalservice van Angular is uitgebracht, heb ik IDE gewijzigd in VS-code. Ik heb aan eclipse gewerkt, maar nu denk ik dat VS-code beter is, omdat het vrij sneller en lichter is dan eclipse met een hoekige add-on.
De Angular Language Service is een manier om aanvullingen, fouten, hints en navigatie binnen uw Angular-sjablonen te krijgen, of ze nu extern zijn in een HTML-bestand of zijn ingesloten in annotaties/decorators in een string.
Je kunt hier meer lezen https://angular.io/guide/language-service
Als u die add-on wilt installeren, start u VS Code Quick Open (Ctrl+P), plakt u de volgende opdracht en drukt u op enter.
ext install Angular.ng-template
Ad-donpagina https://marketplace.visualstudio.com/items?itemName =Angular.ng-sjabloon