Primeros pasos en Angular 2 usando TypeScript
Ya hace algún tiempo que salio el Framework Angular 2 y muchos desarrolladores lo vienen usando, ya que brinda muchos beneficios respecto a la versión anterior como:
- Rapidez: Mejora la rapidez y el comportamiento en la actualización de grandes cantidades de datos, basándose en operaciones sobre los datos y no sobre el DOM (Document Object Model).
- Adaptado a Móviles: Angular 2 mejora la experiencia del usuario en dispositivos móviles haciendo uso de el renderizado en servidor y los webworkers de HTML5.
- Es flexible: Podemos desarrollar en diferentes lenguajes de programación como Javascript, Typescript o Dart. Además soporta diferentes formas de trabajar con estructuras de datos: POJO (Clases simples que no dependen de ningún framework especial) y functional reactive style.
- Basado en componentes: Angular 2 basa su desarrollo en componentes lo que hace que su desarrollo sea mucho más intuitivo. Un componente puede ser cualquier cosa, una silla, una mesa, un coche. Cada componente tiene su información y establece de que manera debe renderizarse.
Es por esto y muchas razones que los desarrolladores de hoy día lo prefieren.
También esta en lenguaje de programación de código abierto TypeScript que fue desarrollado por Microsoft, que es un lenguaje que convierte su código en JavaScript común. También es llamado Superset de Javascript, lo que significa que si el navegador está basado en Javascript, este nunca llegará a saber que el código original fue realizado con TypeScript y ejecutará el Javascript como lenguaje original.
¿Qué es un superset?
Se trata de un lenguaje escrito sobre otro lenguaje. En este caso Typescript es eso, un lenguaje basado en el original, ofreciéndonos grandes beneficios como el descrito anteriormente, aunque existen otros beneficios. Por ejemplo, mientras otros superset de JavaScript nos alejan del código original, TypeScript, por el contrario, es muy similar a JavaScript y a C# gracias a que su creador posee conocimientos de ambos lenguajes.
En esta ocasión les mostrare un pequeño tutorial de como empezar a usar Angular 2 usando TypeScript.
Creación del proyecto
Lo primero es establecer una carpeta que contendrá todo nuestro proyecto en este caso lo creare en mis documentos.
abrimos el terminal y creamos nuestra carpeta.
raitom@raitom-linux:~$ cd Documents/raitom@raitom-linux:~/Document$ mkdir Angular2
Ahora empezamos a crear lo necesario para usar Angular 2, en este caso voy a usar el editor de texto Sublime Text para crear algunos archivos y configuraciones de paquete que son necesarios de la siguiente manera:
- Primero creamos package.json para que defina los paquetes de la aplicación de inicio rápido y genere algunos scripts útiles para el proyecto.
- Segundo creamos tsconfig.json que es un archivo de configuración de texto mecanográfico que guía a nuestro compilador para que genere archivos JavaScript.
- Tercero creamos typings.json para decirle al compilador acerca de las bibliotecas que carga ya que muchas veces se genera error por el compilador mecanografiado, porque no reconoce las características y configuraciones de forma nativa y esto genera un error en nuestro proyecto.
- Cuarto, creamos systemjs.config.js que es una alternativa para cargar nuestros módulos de aplicaciones y bibliotecas.
- Quinto instalamos nuestros paquetes npm en la carpeta de nuestro proyecto.
raitom@raitom-linux:~/Documents/Angular2$ npm install- Sexto, creamos la carpeta app en nuestro proyecto para agregar los siguientes componentes:
app.component.ts este componente simple de inicio rápido tiene una estructura esencial que otros componentes tienen y es la de importar, decorar un selector y tener una clase de componente que controla la apariencia y una vista a través de su plantilla.
main.ts con esto cargamos el componente raíz para poder importar las dos cosas que necesitamos para nuestro proyecto, en este caso El navegador de angular de la función platformBrowserDynamicla y el módulo de aplicación, AppModule.
app.module.ts Componemos aplicaciones de angular en bloques estrechamente relacionados con la funcionalidad de los módulos angulares . Cada aplicación requiere al menos un módulo, el módulo de la raíz , que llamamos AppModule por convención.
Crear el archivo app/module.ts con el siguiente contenido:
- Séptimo, agregamos index.html en la carpeta de nuestro proyecto, aquí definimos las bibliotecas de JavaScript, el archivo de configuración SystemJS, también importamos y ejecutamos el módulo app que se refiere al archivo main y por ultimo <my-app> etiqueta en el <body> que muestra la visión de nuestra aplicación entre estas etiquetas.
Si deseas agregar algo de estilo creamos styles.css y ponemos lo siguiente:
- Octavo, abrimos nuestro terminal y nos localizamos en nuestro proyecto, generamos y ejecutamos nuestra aplicación.
raitom@raitom-linux:~/Documents/Angular2$ npm starty automáticamente se crearan los siguientes archivos.
y lo que se ve en nuestro localhost.
Este seria un ejemplo básico de como usar angular con TypeScript.
Puedes revisar mis otros posts:
gracias por leer este post, si te gustó recomiéndalo :).
