Saltar al contenido

Angular2: cómo comenzar y con qué IDE

Poseemos la mejor respuesta que hemos encontrado en todo internet. Queremos que te sea de utilidad y si quieres aportar algo que nos pueda ayudar a crecer hazlo con total libertad.

Solución:

1) IDE

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

soy un grande Texto sublime partidario e incluso aunque hay un complemento de Typescript … No se sentía perfecto con el poder de Typescript.

Así que probé con mi segundo editor favorito: Átomo (+ Complemento de mecanografiado). 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 la finalización automática.

Luego probé Webstorm ya que la empresa en la que trabajo actualmente tiene algunas licencias. Fue genial y estuve muy feliz durante un mes. Pero usar un editor que no es gratuito me pareció… raro. No lo usaría en casa para proyectos personales, no podría recomendarlo a otras personas fácilmente. Y, sinceramente, no soy un gran fanático de la interfaz Webstorm.

Así que di (otro) intento de código de estudio visual que no encontré tan bueno cuando lo probé por primera vez hace unos meses. Ha evolucionado seriamente y:
– es simple
– está completo
– Código
– Depurador (remoto –> súper potente)
– Integración Git
– Tienda de complementos
– tiene un gran soporte para Angular2
– intellisense es realmente impresionante

Lo estoy usando 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:
ingrese la descripción de la imagen aquí


2) Angular 2: descubre los conceptos básicos

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

Con Angular2, entendieron el desafío de tener una gran 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 Typescript con Visual Studio Code?

Te recomiendo encarecidamente que uses 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 brinde la capacidad de tener un repositorio estructurado similar. Entonces podemos entender fácilmente la estructura de otro proyecto.

Además, angular-cli maneja la compilación de Typescript 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 es necesario escribir desde Typescript 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 Typescript 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 se sienta más cómodo con Angular2 en general, le recomiendo que aprenda (más) sobre
– Redux
– RxJ

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 Léame cómo usarlo y hay muchos comentarios en el código en sí: https://github.com/maxime1992/angular-ngrx-starter

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

NETBEANS

Es un IDE muy bueno para Java y bastante bueno para el desarrollo web. Hay muchas características que impulsan su trabajo. Instalé el complemento Everlaw Typescript que se mantiene en github:

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

Ventajas

  • Las acciones de mecanografiado (compilar, ejecutar, etc.) están disponibles en el explorador de proyectos.
  • El complemento puede crear 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 el complemento 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
  • Compatibilidad con la sintaxis de Angular2 dentro de las plantillas de componentes.
  • Soporte para archivos mecanografiados.
  • Plantillas repetitivas de Angular 2 disponibles.

Desventajas

En mi humilde opinión no hay desventajas.

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

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

Código VS + Servicio de lenguaje angular

Desde que se lanzó el servicio de idioma angular, cambié 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 liviano que Eclipse con el complemento angular.

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

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 Intro.

ext install Angular.ng-template

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

Valoraciones y comentarios

Ten en cuenta mostrar esta división si te ayudó.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *