Empiece con Angular: el tutorial de InfoWorld

Angular, el sucesor de AngularJS, es una plataforma de desarrollo para crear aplicaciones móviles y de escritorio usando TypeScript y / o JavaScript y otros lenguajes. Angular es popular para crear sitios web de gran volumen y es compatible con aplicaciones web, web móvil, móviles nativas y de escritorio nativas.

El equipo de desarrollo central de Angular se divide entre los empleados de Google y una comunidad sólida; no va a desaparecer pronto. Además de sus propias y extensas capacidades, la plataforma Angular tiene un fuerte ecosistema externo: varios IDE prominentes son compatibles con Angular, tiene cuatro bibliotecas de datos, hay media docena de herramientas útiles y más de una docena de conjuntos de componentes de UI, y hay docenas de Libros y cursos angulares. En 2015, cuando se le otorgó a AngularJS un premio Bossie, le expliqué que se trata de un marco AJAX de JavaScript modelo-vista-lo que sea (MVW) que extiende HTML con marcado para vistas dinámicas y enlace de datos bidireccional. Angular es especialmente bueno para desarrollar aplicaciones web de una sola página y vincular formularios HTML a modelos y controladores JavaScript. El nuevo Angular está escrito en TypeScript en lugar de JavaScript, lo que tiene muchos beneficios, como explicaré.

El patrón "modelo-vista-lo que sea" que suena extraño es un intento de incluir los patrones modelo-vista-controlador (MVC), modelo-vista-vista-modelo (MVVM) y modelo-vista-presentador (MVP) en uno apodo. Las diferencias entre estos tres patrones estrechamente relacionados son el tipo de cosas sobre las que a los programadores les encanta discutir ferozmente; los desarrolladores de Angular decidieron excluirse de la discusión.

Básicamente, Angular sincroniza automáticamente los datos de su interfaz de usuario (vistas en AngularJS y plantillas en Angular 2 y superior) con sus objetos JavaScript (modelo) a través de un enlace de datos bidireccional. Para ayudarlo a estructurar mejor su aplicación y facilitar la prueba, Angular le enseña al navegador cómo realizar la inyección de dependencia y la inversión de control. El nuevo Angular (versión 2 y superior) reemplaza vistas y controladores con componentes y adopta convenciones estándar, lo que hace que sea más fácil de entender y permite a los desarrolladores concentrarse en desarrollar módulos y clases de ECMAScript 6. En otras palabras, Angular 2 es una reescritura total de AngularJS que intenta implementar las mismas ideas de una mejor manera. Las plantillas de vista angular, que tienen una sintaxis bastante simple, se compilan en JavaScript que está bien optimizado para los motores JavaScript modernos.El nuevo enrutador de componentes en Angular 2 puede dividir el código (carga diferida) para reducir la cantidad de código entregado para representar una vista.

descargar Comience con Angular Descargue este tutorial de Angular en formato PDF conveniente

¿Por qué Angular? ¿Y cuándo no es una buena elección?

La elección de un marco de JavaScript para una aplicación web es el tipo de proceso que desencadena guerras religiosas entre desarrolladores. No estoy aquí para hacer proselitismo de Angular, pero quiero que conozcas sus ventajas y desventajas. Idealmente, debería elegir el marco que sea apropiado para su aplicación, teniendo en cuenta las habilidades en su organización y los marcos que está utilizando en otras aplicaciones. En general, Angular tiene buenas herramientas y es adecuado para proyectos realmente grandes y de alto tráfico. Angular, como una reescritura completa de AngularJS, fue diseñado desde cero para su uso en dispositivos móviles y para un alto rendimiento. Al igual que su predecesor, enlaza datos fácilmente y bien.

Angular usa un patrón de componente web, pero no componentes web per se. No es Polymer, que crea componentes web reales, aunque puede utilizar Polymer Web Components en aplicaciones angulares si lo desea. Angular usa patrones de inversión de control (IoC) e inyección de dependencia (DI), y soluciona algunos problemas con la implementación de AngularJS de estos.

Angular usa directivas y componentes que mezclan lógica con marcado HTML. Una escuela de pensamiento dice que mezclar la lógica con la presentación es un pecado capital. Otra escuela de pensamiento dice que tener todo lo que hace un programa declarado en un solo lugar hace que sea más fácil de desarrollar y comprender. Ese es un problema que tendrás que decidir por ti mismo, ya que me he encontrado en diferentes lados de la cuestión para diferentes proyectos.

Angular tiene algunos problemas de documentación, problemas frecuentes de compatibilidad con versiones anteriores y muchos conceptos para que los aprenda un nuevo desarrollador. Por otro lado, Angular tiene un ecosistema enorme que llena los vacíos en la documentación de Angular con tutoriales web, videos y libros de terceros.

Acerca de TypeScript

Angular se implementa en TypeScript, un superconjunto de JavaScript de tipo pato que se transpila a JavaScript. En general, las aplicaciones TypeScript son más fáciles de mantener a escala de producción que JavaScript. El simple proceso de determinar si sus tipos son correctos en tiempo de compilación elimina una gran clase de errores comunes de JavaScript, y conocer los tipos permite a los editores, herramientas e IDE ser más útiles para completar, refactorizar y verificar el código.

Resulta que soy un gran admirador de TypeScript. Encuentro que es mucho más productivo trabajar en un gran proyecto de TypeScript que trabajar en un gran proyecto de JavaScript. Con JavaScript, realmente nunca sé si hay errores al acecho en el código esperando para morderme, sin importar la frecuencia con la que ejecute JSHint. Con TypeScript, al menos cuando agregué los tipos, clases, módulos e interfaces opcionales, me siento mucho más seguro.

Comenzar: Instale Angular, TypeScript y Visual Studio Code

Dicho esto, instalemos el software y comencemos.

Instalar Node.js y NPM

Antes de hacer cualquier otra cosa, debe instalar Node.js y NPM, el administrador de paquetes de Node, porque son la base de gran parte de la instalación y las herramientas de Angular. Para saber si están instalados y, de ser así, qué versiones están instaladas, vaya a una consola o indicador de terminal y escriba los dos comandos siguientes:

$ nodo -v $ npm -v

En mi computadora, la versión de Node.js informada es v6.9.5 y la versión de NPM es 3.10.10. Esas son las versiones actuales de soporte a largo plazo en este momento, como puedo ver al mirar //nodejs.org/. Si sus versiones son actuales, puede pasar a la siguiente sección. Si no se encuentra alguno de los comandos o si alguna de las versiones está desactualizada, debe instalar las versiones actuales. Mis versiones son actuales porque recientemente reinstalé Node, como se muestra en la captura de pantalla a continuación. La instalación de Node.js y NPM es una cuestión de navegar a nodejs.org, presionar el botón verde LTS y seguir las instrucciones.

Una vez que haya completado la instalación, verifique las versiones nuevamente para asegurarse de que estén realmente actualizadas. Sé que repetir la comprobación suena paranoico, pero un buen programador necesita una buena dosis de paranoia para evitar errores, y las instalaciones abortadas no son infrecuentes.

1. Instale Angular

Hay dos formas de instalar y usar Angular. Primero le mostraré el método de la interfaz de línea de comandos (CLI), por varias razones. La primera es que encaja mejor con mi forma de trabajar. La segunda es que la CLI genera una aplicación de inicio más completa que la semilla QuickStart. La tercera es que el paso de limpieza en las instrucciones de inicio rápido parece que podría causar estragos si se usa en el momento incorrecto o en el directorio incorrecto.

Busque //angular.io/ y haga clic en uno de los tres botones Comenzar. Todos van al mismo lugar, Angular QuickStart.

Lea esa página y no dude en probar el ejemplo de inicio rápido en Plunker a través del enlace después del primer bloque de código. Una vez que crea que puede seguir la @Componentfunción decoradora y la expresión de enlace de interpolación angular {{name}}, haga clic en el enlace Inicio rápido de CLI a la izquierda. No se preocupe demasiado por cómo se implementan la función decoradora y el enlace de interpolación: llegaremos a eso.

1a. Instalar y probar Angular-CL

Vamos a seguir las instrucciones para configurar el entorno de desarrollo CLI. El primer paso es instalar Angular y su CLI globalmente con npm:

$ npm instalar -g @ angular / cli

Si observa con atención a medida que avanza la instalación, verá un montón de requisitos previos y herramientas instaladas antes de Angular y su CLI. Si hay advertencias, no se preocupe por ellas. Si hay errores, es posible que deba corregirlos; Yo solo he visto advertencias. Es seguro reinstalar la CLI de Angular cuando lo desee.

El siguiente paso es crear un nuevo proyecto con Angular CLI. Pongo el mío dentro de un directorio llamado Trabajo en mi carpeta de usuario de inicio.

$ cd work $ ng nueva mi-aplicación

Como se indica en las instrucciones, la generación de la nueva aplicación Angular tarda unos minutos. Este es un buen momento para preparar una buena taza de té o café.

Verá en la captura de pantalla que verifiqué mi versión de TypeScript ( tsc -v) después de la instalación de Angular CLI. Sí, fue un poco paranoico. Y sí, es una buena idea que tú también lo hagas. Si aún no ha instalado TypeScript, ocupémonos de eso ahora:

$ npm install –g mecanografiado

Casi estámos allí. Luego, ingrese al nuevo directorio y sirva la aplicación.

$ cd my-app $ ng servir

Como te dirá el servidor, está escuchando en el puerto 4200. Así que abre una pestaña del navegador en // localhost: 4200 y verás la imagen a la izquierda.

El equilibrio de la página de inicio rápido de CLI le indica que cambie la propiedad del título y su CSS. Siéntase libre de hacerlo con cualquier editor de programaciónno un procesador de texto!) Que tenga instalado, o espere hasta que instale Visual Studio Code más tarde. La ventana del navegador se actualizará automáticamente cada vez que guarde, ya que el servidor observa el código y actualiza los cambios.

Cuando hayas terminado con el servidor, presiona Control-C en la ventana de la terminal para finalizar el proceso.

1b. Instale la semilla Angular QuickStart

Solo realice este paso si se saltó el paso 1a. Si realiza ambos pasos, esta instalación afectará a parte de la instalación de la CLI, y tendrá que rehacerlo si desea volver a utilizarlo. Las instrucciones para instalar la semilla QuickStart ofrecen dos opciones para iniciar el proceso: descargar la semilla y descomprimirla o, alternativamente, clonar la semilla, de la siguiente manera:

$ git clone //github.com/angular/quickstart.git inicio rápido

Cualquiera que sea la opción que elija para obtener el código, los siguientes pasos son los mismos:

$ cd inicio rápido

(o como sea que le pusieras nombre a la carpeta)

$ npm instalar

$ npm inicio

El npm installpaso hace esencialmente lo mismo que el $ npm install -g @angular/clipaso en la versión CLI de la instalación, excepto que instala TypeScript y no instala Angular CLI, ya que no está en la lista de dependencias en package.json. De hecho, si Angular CLI ya está instalado, este script lo desinstalará .

El npm startpaso ejecuta este script:

"start": "simultáneamente \" npm ejecutar build: watch \ "\" npm ejecutar serve \ ""

Para expandir eso, los scripts de build: watch y serve son:

"build: watch": "tsc -p src / -w"

y

"servir": "lite-server -c = bs-config.json"

¿He mencionado que tsces el compilador de TypeScript? La -popción establece el directorio del proyecto para compilar, y la -wopción dice ver archivos de entrada.

El npm startpaso (ejecutar los dos scripts al mismo tiempo) hará esencialmente lo mismo que el ng servepaso en la versión CLI de la instalación, excepto que es probable que elija un puerto diferente, además de que cargará automáticamente la página que está sirviendo en su configuración predeterminada. navegador, y la página se verá como la imagen de la izquierda.

Cuando haya terminado de jugar con su aplicación Angular QuickStart, simplemente presione Ctrl + C o cierre la ventana del terminal para finalizar el proceso. Puede iniciarlo nuevamente regresando al directorio y ejecutándolo ng serve.

El siguiente paso (opcional) en las instrucciones de inicialización de QuikStart es el que me pone nervioso: te dice que elimines los archivos no esenciales usando rm -rfen MacOS o delen Windows. Si decide hacer eso, al menos verifique que se encuentre en el directorio correcto antes de iniciar el script que copió del sitio de documentación. No lo intente después de haber comenzado a agregar archivos al proyecto.

No importa si siguió las instrucciones de la CLI o QuickStart, su siguiente paso será explorar el código fuente de un proyecto Angular. Con ese fin, instalemos un editor compatible con Angular.

2. Instale Visual Studio Code

La página de recursos de Angular recomienda tres IDE: IntelliJ IDEA, Visual Studio Code y WebStorm. Utilizo los tres, pero para los propósitos de este ejercicio, Visual Studio Code es la mejor opción porque es gratuito y de código abierto. Vaya a la página de inicio de Visual Studio Code y descargue la versión estable actual para su plataforma, luego instale el paquete.

Una vez que Visual Studio Code esté instalado, ejecútelo y abra el directorio que contiene su proyecto base. En mi Mac, el proyecto generado por CLI está en ~/work/my-appy la semilla está en ~/work/quickstartmaster. Su ubicación variará dependiendo de si hizo la instalación CLI o la instalación inicial, y cualquier elección que haya hecho sobre sus directorios de destino. El árbol de origen debería verse así:

Visual Studio Code admite TypeScript listo para usar, por lo que no hay nada más que instalar. Si desea instalar otros idiomas más tarde, es fácil hacerlo en el panel Extensiones, que se muestra fácilmente al hacer clic en el icono inferior en la parte superior izquierda. Escriba el nombre del idioma o herramienta que desee en el cuadro de búsqueda en la parte superior del panel Extensiones. Puede volver al Explorador de archivos haciendo clic en el icono superior en la parte superior izquierda.