page - Angular2: cómo comenzar y con qué IDE

router angular navigationend

Question

He usado AngularJS 1.x ahora por un par de meses. Ahora cambiaré a Angular2 (con TypeScript) y en realidad no estoy seguro de qué IDE usar. Tampoco está claro para mí cómo compilar el Código TypeScript en JavaScript, ¿es realmente necesario? He leído que Visual Studio Code sería un buen editor para proyectos de Angular2. ¿Se incluye un compilador TypeScript? Estaría encantado de cualquier información en esta dirección.

Answer 1

Tuve el mismo problema, porque desde que se lanzó Angular 2, estoy buscando un buen IDE gratuito que soporte Angular 2. Describiré mi experiencia.

NETBEANS

Es un buen IDE para Java y bastante bueno para el desarrollo web. Hay muchas características que impulsan tu trabajo. Instalé el plugin Everlaw Typecript que se mantiene en github:

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

Ventajas

• Las acciones mecanografiadas (compilación, ejecución, etc.) están disponibles desde el explorador de proyectos.
• El complemento puede compilar archivos TS al guardar.

Desventajas

• Falta de soporte Angular 2, porque este complemento solo admite mecanografiado.
• Problemas con intelisense y resaltado de sintaxis en archivos de plantilla angular y archivos ts.
• Falta de plantillas repetitivas para NG2.

ECLIPSE

En mi humilde opinión, Eclipse con Angular2Eclipse ahora es uno de los mejores IDE para Angular 2. Es una solución madura con muchas características que impulsan su trabajo.

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

Ventajas

• Integración con angular-cli
• Soporte para sintaxis Angular2 dentro de las plantillas de componentes.
• Soporte para archivos mecanografiados.
• Angular 2 plantillas disponibles repetitivas.

Desventajas

En mi humilde opinión no hay inconvenientes.

Si está buscando un buen tutorial sobre cómo configurar IDE, intente esto

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

Servicio VS Code + Angular Language

Desde el servicio de lenguaje lanzado angular, he cambiado IDE a VS Code. He trabajado en eclipse pero ahora creo que VS Code es mejor porque es bastante más rápido y más ligero que eclipse con addon angular.

El Servicio de lenguaje angular es una forma de obtener terminaciones, errores, sugerencias y navegación dentro de sus plantillas angulares, ya sean externas en un archivo HTML o incrustadas en anotaciones / decoradores en una cadena.

Puede leer más aquí https://angular.io/guide/language-service

Si desea instalar ese complemento, inicie VS Code Quick Open (Ctrl + P), pegue el siguiente comando y presione Entrar.

ext install Angular.ng-template

Página de complementos https://marketplace.visualstudio.com/items?itemName=Angular.ng-template

Answer 2

1) IDE

Me preguntaba qué IDE es el más adecuado para Angular2.

Soy un gran defensor de Sublime Text e incluso aunque haya un plugin de Typecript ... No se sentía perfecto con el poder de Typecript.

Así que intenté con mi segundo editor favorito: Atom (+ plugin de mecanografía). Mejor PERO no hay soporte para la importación automática (¿tal vez tiene algo ahora?) Y también, tuve que esperar 30 segundos antes de obtener cualquier autocompletado.

Luego probé Webstorm ya que la compañía en la que estoy trabajando actualmente tiene algunas licencias. Fue genial y estuve muy feliz por un mes. Pero usar un editor que no se siente gratis ... raro. No lo usaría en casa para proyectos personales, no podría recomendarlo a otras personas fácilmente. Y sinceramente, no soy un súper fanático de la interfaz de Webstorm.

Así que le di (otro) intento al Código de Visual Studio que no me pareció tan bueno cuando lo probé hace unos meses. Ha evolucionado seriamente y:
- es sencillo
- esta completo
- Código
- Depurador (remoto -> súper potente)
- Integración Git
- Tienda de complementos
- tiene un gran soporte Angular2
- Intellisense es realmente asombroso

Lo uso desde hace un mes y, hasta ahora, estoy muy feliz y no siento la necesidad de cambiar.

Solo para ayudarlo a comenzar con buenos complementos, aquí está el mío:

2) Angular 2: Descubre lo básico

Como está familiarizado con AngularJs, no sé cómo se sintió con respecto a la documentación oficial, pero no pude aprender de ella. Tuve que seguir muchos tutoriales (diferentes) y luego solía documentar una vez que entendía AngularJs.

Con Angular2, entendieron el desafío de tener una excelente documentación y le prestaron atención desde la versión alfa (¡aunque estaba evolucionando continuamente =)!).

Así que te recomiendo que vayas a https://angular.io y simplemente leas el documento.

Está bien hecho y no es solo para usuarios avanzados. ¡Encontrarás buenos tutoriales allí!

3) ¿Cómo usar Typecript con Visual Studio Code?

Te recomiendo encarecidamente que utilices angular-cli para desarrollar una aplicación Angular2. No solo por simplicidad, sino porque en una comunidad necesitamos tener un iniciador básico que nos permita tener un repositorio estructurado similar. Entonces podemos entender fácilmente la estructura de otro proyecto.

Además, angular-cli maneja la compilación de Typecript por usted y no tiene que lidiar con ella en la línea de comandos o desde su IDE.

npm i -g typescript

(¡ya no hay necesidad de tipings desde Typecript 2.0!)

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

Entonces solo corre

ng serve

Y acceda a su aplicación en: http: // localhost: 4200

Angular-cli compila su mecanografiado e incluso sus archivos (sccs | sass | less).

Cuando desee implementar su aplicación:

ng serve --prod

También minimizará JS y CSS.

4) ¿Qué sigue?

Una vez que te sientas más cómodo con Angular2 en general, te recomiendo que aprendas (más) sobre
- Redux
- RxJs

Y una vez que esté familiarizado con esos conceptos, debe comenzar a jugar con ngrx .

¡Buena suerte en este largo (e increíble) viaje!

¡He lanzado un iniciador ngrx! Para aquellos familiarizados con Redux y dispuestos a descubrir angular y / o ngrx, ¡podría ayudarlos a comenzar! Estoy seguro de que también podría ser una buena idea usar esta plantilla como iniciador para cualquier tipo de proyecto ngrx (¡pequeño, mediano o incluso grande!). Traté de describir en el archivo Léame cómo usarlo y hay muchos comentarios en el código: https://github.com/maxime1992/angular-ngrx-starter