Estás viendo la documentación de Angular

Inicio rápido de Angular con TypeScript

Esta guía demuestra como construir y ejecutar una aplicación simple de Angular usando TypeScript.

¿No te gusta TypeScript?

Además de Typescript puedes escribir aplicaciones de Angular usando JavaScript y Dart. En esta guía en español por ahora nos vamos a enfocar en Typescript. Puedes consultar la documentación oficial de Angular para ver otros lenguajes.

¿Qué vamos a hacer?

La aplicación de inicio rapido tiene la estructura de una aplicación real de Angular y muestra un mensaje simple:

[Captura del mensaje]

¡Pruebalo tu mismo! Puedes ver una aplicación vivo en la siguiente página

También puedes clonar la aplicación entera desde GitHub.

¡Hora de construir la aplicación!

Prerequisitos: Instalar Node.js y npm.
Paso 1: Crear y configurar el proyecto.
Paso 2: Crear tu aplicación.
Paso 3: Crear un componente y agregarlo a tu aplicación.
Paso 4: Arrancar tu aplicación.
Paso 5: Definir la página web que va a alojar tu aplicación.
Paso 6: Compilar y ejecutar la aplicación.
Paso 7: Hacer algunos cambios.
Sintetizando y proximos pasos.

Prerequisitos: Instalar Node.js y npm

Si Node.js y npm no están ya instalados en tu computadora, debes instalarlos. Nuestros ejemplos requieren node v4.x.x o superior y npm 3.x.x o superior. Para verificar cual es tu versión instalada puedes abrir una consola / terminal y ejecutar node -v y npm -v

Paso 1: Crear y configurar el proyecto

En este paso vas a:

Crear el directorio del proyecto
Crear los archivos de configuración
Instalar los paquetes

Crear el directorio del proyecto

Usando una ventana de terminal, crea un directorio para el proyecto y cambia la ubicación a este directorio.

mkdir angular-quickstart
cd angular-quickstart

Crear los archivos de configuración

Nuestros típicos proyectos de Angular necesitan varios archivos de configuración:

package.json identifica las dependencias de npm del proyecto
tsconfig.json define como el compilador de TypeScript genera javascript a partir de los archivos del proyecto
typings.json provee archivos de definición adicional para librerías que el compilador de TypeScript no reconoce de forma nativa (como archivos javascript.).
systemjs.config.js provee información al cargador de módulos acerca de donde encontrar los módulos de la aplicación, y registra los paquetes necesarios. También contiene otros paquetes que van a ser necesitados en otros ejemplos posteriores de esta documentación.

Crea cada uno de estos archivos en directorio de tu proyecto. Llenalos pegando los textos siguientes:

package.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "@angular/router": "~3.1.0",
    "@angular/upgrade": "~2.1.0",
    "angular-in-memory-web-api": "~0.1.5",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3",
    "typings":"^1.4.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  }
}

systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

Puedes aprender más de estos archivos de configuración en la Guía de configuración de paquetes npm (en inglés) y en la Guía de configuración de TypeScript (en inglés). Una discusión detallada de la carga de modulos va mas alla del alcance de esta guía.

¿SystemJS o Webpack?

Aunque vamos a usar SystemJS para propósitos ilustrativos aquí, es solo una opción para cargar módulos. Usa el cargador de módulos que prefieras. Para Webpack y Angular, puedes ver Introducción a Webpack (en inglés). O aprender más de la configuración de SystemJS en general aquí (en inglés)

Instalar los paquetes

Usa npm desde la línea de comandos, para instalar los paquetes listados en el archivo package.json con el comando:

npm install

Los mensajes de error (en rojo) pueden aparecer durante la instalación, y es probable que veas mensajes npm WARN. Mientras no veas mensajes npm ERR! puedes asumir que la operación se completo exitosamente.

Ahora deberías tener la siguiente estructura:

angular-quickstart
|-> node_modules ...
|-> typings ...
|-> package.json
|-> systemjs.config.js
|-> tsconfig.json
|-> typings.json

Si el directorio typings no aparece despues de ejecutar npm install vas a necesitar instarlo de forma manual con el comando:

npm run typings install

Ahora estás listo para ver algo de código.

Paso 2: Crear tu aplicación

Las aplicaciones Angular se componen de bloques de funcionalidad relacionada con NgModules. Angular en sí mismo está dividido en modulos de Angular separados. Esto hace que sea posible que tus aplicaciones se mantengan livianas solo importando las partes de Angular que tu aplicación necesita.

Cada aplicación de Angular tiene al menos un módulo: el módulo raiz, nombrado aquí AppModule

Crea un subdirectorio en la raiz del directorio del proyecto

mkdir app

Crea el archivo app/app.module.ts con el siguiente contenido:

app/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports:      [ BrowserModule ]
})
export class AppModule { }

Este es el punto de entrada a tu aplicación.

Dado que la aplicación de Inicio rápido es una aplicación Web que se ejecuta en un navegador, tu módulo raiz necesita importar el módulo BrowserModule desde @angular/platform-browser en el array imports.

Este es la cantidad más pequeña de Angular que se necesita para que una aplicación corra en el navegador.

La aplicación de Inicio rápido no hace nada más, así que no necesitas otros módulos. En una aplicación real, probablemente importarías los módulos FormsModule como así también Router Module y HttpModule. Estos serán presentados en el tutorial Tour de los heroes.

Nota sobre módulos y cargadores de módulos

Una cosa que puede confundir un poco es que hablamos anteriormente de cargadores de módulos (ver aclaración anterior sobre SystemJS y Webpack) y ahora de módulos de nuestra aplicación los módulos que SystemJS y Webpack cargan son los que importamos usando la sentencia import es una forma que tienen TypeScript y la nueva versión de JavaScript para importar clases y otros sin usar variables globales.

Los módulos de Angular son los que se declaran usando el decorador NgModule y son formas de organizar nuestra aplicación y de compartir funcionalidad.

Paso 3: Crear un componente y agregarlo a tu aplicación

Cada aplicación tiene al menos un componente: el componente raiz, en este ejemplo lo llamamos AppComponent.

Los componentes son los bloques básicos de construcción de las aplicaciones Angular. Un componente controla una porción de la pantalla (una vista) a través de su plantilla asociada.

Crea el archivo del componente app/app.component.ts con el siguiente contenido.

app/app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})
export class AppComponent { }

La aplicación de Inicio rápido tiene la misma estructura esencial que cualquier otro componente de Angular:

Una sentencia import. Importar le da acceso a tu componente a la función decorador @Component
El decorador @Component asocia los metadatos con la clase AppComponent
- un selector especifica un selector simple de CSS para el elemento HTML que representa el componente.
- un template (plantilla) le dice a Angular como renderizar la vista de este componente.
Una clase para el componente que controla la apariencia y el comportamiento de la vista a través de su plantilla.

Lo que hacemos es exportar la clase AppComponent para poderla importar en la aplicación que acabas de crear.

Edita el archivo app/app.module.ts para importar tu nueva clase AppComponent y agregarla a los campos declaration y bootstrap en el decorador NgModule:

app/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Paso 4: Arrancar tu aplicación

Ahora necesitas decirle a Angular que arranque tu aplicación.

Crea el archivo app/main.ts con el siguiente contenido:

app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Este código incializa la plataforma en la que tu aplicación corre, y luego usa la plataforma para arrancar tu AppModule.

¿Por qué crear archivos separados para main.ts, AppModule y AppComponent?

Arrancar la aplicación es una cuestión diferente de crear un módulo o la presentación de la aplicación. Hacer testing de un componente por separado es mucho más facil si este no intenta arrancar la aplicación entera.

Arrancar una aplicación depende de la plataforma

Dado que la aplicación de Inicio rápido se ejecuta en el navegador, main.ts importa la función platformBrowserDynamic de @angular/platform-browser-dynamic y node @angular/core. En un dispositivo móvil, podrías cargar un módulo con Apache Cordova o NativeScript usando una función de arranque específica para esa plataforma.

Paso 5: Definir la página web que va a alojar tu aplicación.

En el directorio raiz del proyecto, crea un archivo index.html y pega las siguientes líneas en el:

index.html

<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Las secciones importantes son:

Librerías de JavaScript: los polyfills de core-js para navegadores un poco más antiguos, zone.js y reflect-metadata que son librerías necesarias por Angular, y la librería SystemJS para la carga de módulos.
El archivo de configuración para SystemJS, y un script donde importas y ejecutas el módulo app que se refiere al archivo main que acabas de escribir.
La etiqueta <my-app> en el <body> que es donde tu aplicación vive.

Agregar un poco de estilo

Los estilos no son esenciales, pero son bonitos, y el index.html asume que tienes una hoja de estilos llamada styles.css.

Crea un archivo style.css en el directorio raiz del proyecto, y comienza a dar un poco de estilo, puedes usar los estilos mostrados a continuación:

styles.css (una parte)

/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}

Para un conjunto completo de estilos usados en esta documentación, mira styles.css

Paso 6: Compilar y ejecutar la aplicación

Abre una ventana de terminal y ejecuta el siguiente comando:

npm start

Este comando ejecuta dos procesos paralelos de node:

El compilador de TypeScript en modo observador.
Un servidor de archivos estáticos lite-server que carga index.html en un navegador y actualiza el navegador (como si apretaras F5) cuando la aplicación cambia.

En algunos momentos, una ventana del navegador debería abrirse y mostrar lo siguiente:

[TODO: Imagen de la app]

Paso 7: Hacer algunos cambios

Intenta cambiar el mensaje en app/app.component.ts a “Mi segunda aplicación Angular”.

El compilador de TypeScript y el servidor lite-server van a detectar tu cambio, recompilar el código TypeScript en JavaScript que puede leer el navegador, actualizar tu navegador y mostrar tu mensaje cambiado.

Cierra la ventana de terminal cuando estes listo para finalizar el compilador y el servidor

Sintetizando y proximos pasos

La estructura final del directorio del proyecto se ve así:

angular-quickstart
|-> app

  |-> app.component.ts

  |-> app.module.ts

  |-> main.ts

|-> node_modules ...

|-> typings ...

|-> index.html

|-> package.json

|-> styles.css

|-> systemjs.config.js

|-> tsconfig.json

|-> typings.json

¿Y ahora qué?

Esta primera aplicación no hace mucho. Es, basicamente, “Hola mundo” para Angular.

Escribiste un pequeño componente Angular, creaste una simple página index.html, y lo ejecutaste un servidor de archivos estáticos.

También creaste la configuración básica de la aplicación que vas a reutilizar en otras secciones de esta documentación. Desde aquí los cambios que hagas en el package.json son solo actualizaciones menores para agregar librerías o algunos estilos css. Tampoco va a ser necesario tocar la carga de módulos.

Para seguir con el siguiente paso y construir una pequeña aplicación
que demuestra características reales de aplicaciones que puedes construir usando Angular, mira el Tutorial tour de los heroes que estaremos agregando proximamente.

Contenidos

Tutorial

Inicio rápido de Angular con TypeScript

¿No te gusta TypeScript?

¿Qué vamos a hacer?

Prerequisitos: Instalar Node.js y npm

Paso 1: Crear y configurar el proyecto

Crear el directorio del proyecto

Crear los archivos de configuración

package.json

tsconfig.json

typings.json

systemjs.config.js

¿SystemJS o Webpack?

Instalar los paquetes

Paso 2: Crear tu aplicación

app/app.module.ts

Nota sobre módulos y cargadores de módulos

Paso 3: Crear un componente y agregarlo a tu aplicación

app/app.component.ts

app/app.module.ts

Paso 4: Arrancar tu aplicación

app/main.ts

¿Por qué crear archivos separados para main.ts, AppModule y AppComponent?

Arrancar una aplicación depende de la plataforma

index.html

Agregar un poco de estilo

styles.css (una parte)

Paso 6: Compilar y ejecutar la aplicación

Paso 7: Hacer algunos cambios

Sintetizando y proximos pasos

¿Y ahora qué?