Configuración del entorno Angular 2 TypeScript

Este capítulo utiliza TypeScript para crear aplicaciones Angular, que es también la opción recomendada oficialmente. Los ejemplos de este tutorial también se escribirán en TypeScript.

TypeScript es un lenguaje de programación libre y de código abierto desarrollado por Microsoft. Es un superconjunto de JavaScript y extiende la sintaxis de JavaScript.

Si no conoces TypeScript, puedes consultar los siguientes recursos:

Antes de comenzar, debes asegurarte de tener npm instalado. Si aún no has instalado npm o no lo conoces, puedes consultar nuestro tutorial:Introducción al uso de NPM。

Debido a que el acceso al espejo del sitio oficial de npm es demasiado lento en China, aquí he utilizado el espejo de npm de Taobao. El método de instalación es el siguiente:

$ npm install -g cnpm --registry=https://registry.npmmirror.com

Después de la ejecución, podemos usar el comando cnpm para instalar módulos:

$ cnpm install

Paso 1: Crear y configurar el proyecto

Crear el directorio

$ mkdir angular-quickstart
$ cd angular-quickstart

Crear archivos de configuración

Un proyecto Angular necesita los siguientes archivos de configuración:

  • package.jsonMarca los paquetes de dependencias npm requeridos por este proyecto.
  • tsconfig.jsonDefine cómo el compilador de TypeScript genera código JavaScript a partir de los archivos fuente del proyecto.
  • typings.jsonProporciona archivos de definición adicionales para las bibliotecas que el compilador de TypeScript no puede reconocer.
  • systemjs.config.jsProporciona al cargador de módulos información sobre dónde encontrar los módulos de la aplicación y registra todos los paquetes de dependencias necesarios. También incluye los paquetes que se necesitarán en ejemplos posteriores de la documentación.

Dentro de angular-quickstart, crea los siguientes archivos, como se muestra a continuación:

Archivo package.json:

{ "name": "angular-quickstart", "version": "1.0.0", "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }, "license": "ISC", "dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/router": "3.0.0", "@angular/upgrade": "2.0.0", "core-js": "^2.4.1", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.27", "zone.js": "^0.6.23", "angular2-in-memory-web-api": "0.0.20", "bootstrap": "^3.3.6" }, "devDependencies": { "concurrently": "^2.2.0", "lite-server": "^2.2.2", "typescript": "^2.3.4", "typings":"^1.3.2" } }

Archivo tsconfig.json:

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

Archivo 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" } }

Archivo 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', 'angular2-in-memory-web-api': 'npm:angular2-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' }, 'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' } } }); })(this);

A continuación, usamos el comando cnpm para instalar los paquetes de dependencias:

$ cnpm install

Después de una ejecución exitosa, se generará un directorio node_modules en el directorio angular-quickstart, que contiene los módulos necesarios para este ejemplo. Podemos ver la estructura de directorios del proyecto:

Paso 2: Crear la aplicación

Usamos NgModules para organizar las aplicaciones Angular en bloques de código relacionados por funcionalidad.

Angular en sí está dividido en algunos módulos Angular independientes, de modo que en la aplicación solo necesitamos importar las partes de Angular que necesitemos.

Cada aplicación Angular necesita al menos unroot module (módulo raíz), en el ejemplo es AppModule.

A continuación, creamos el directorio app dentro del directorio angular-quickstart:

$ mkdir app
$ cd app

Luego creamos el archivo app.module.ts en el directorio app, como se muestra a continuación:


Archivo app.module.ts:

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [ BrowserModule ] }) export class AppModule { }

Dado que QuickStart es una aplicación web que se ejecuta en el navegador, el módulo raíz necesita importar BrowserModule desde @angular/platform-browser y agregarlo al array imports.

Crear el componente y agregarlo a la aplicación

Cada aplicación Angular tiene al menos uncomponente raíz, en el ejemplo es AppComponent. El código del archivo app.component.ts es:


Archivo app.component.ts:

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>Mi primera aplicación Angular</h1>' }) export class AppComponent { }

Análisis del código:

  • El código anterior, desdeangular2/coreimportaComponentel paquete.

  • @Componentes eldecorador de Angular 2, que asocia metadatos a la clase del componente AppComponent.

  • my-appes un selector CSS que se puede usar en etiquetas HTML como un componente.

  • @viewcontiene untemplate, que le dice a Angular cómo renderizar la vista del componente.

  • exportEspecifica que el componente puede usarse fuera del archivo.

A continuación, reabrimos el archivo app.module.ts, importamos el nuevo AppComponent y lo agregamos a los campos declarations y bootstrap del decorador NgModule:


Archivo 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: Iniciar la aplicación

A continuación, necesitamos decirle a Angular cómo iniciar la aplicación.

Crea el archivo main.ts en el directorio angular-quickstart/app, como se muestra a continuación:


Archivo main.ts:

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

El código anterior inicializa la plataforma para que tu código pueda ejecutarse y luego inicia tu AppModule en esa plataforma.

Definir la página host de la aplicación

Crea el archivo index.html en el directorio angular-quickstart, como se muestra a continuación:


Archivo index.html:

<html> <head> <title>Ejemplo de Angular 2 - Tutorial para novatos (example.com)</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!--1. Cargar las bibliotecas--> <!--IE necesita polyfill--> <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. Configurar SystemJS--> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head> <!--3. Mostrar la aplicación--> <body> <my-app>Loading...</my-app> </body> </html>

Aquí hay algunos puntos que vale la pena señalar:

  • Bibliotecas de JavaScript:core-jses una biblioteca de polyfill para navegadores antiguos,zone.jsyreflect-metadataEsta biblioteca es necesaria para Angular, mientras que la biblioteca SystemJS se utiliza para la carga de módulos.

  • El archivo de configuración y el script de SystemJS pueden importar y ejecutar el módulo app que acabamos de escribir en el archivo main.

  • La etiqueta <my-app> es el lugar donde se carga la aplicación.

    • Añadir algunos estilos

    Podemos definir los estilos que necesitemos en el archivo styles.css del directorio angular-quickstart:


    Archivo styles.css:

    /* 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; }

    Paso 6: Compilar y ejecutar la aplicación

    Abre la ventana de terminal y escribe el siguiente comando:

    npm start

    Accede a http://localhost:3000/; el navegador mostrará el siguiente resultado:

    De esta manera, nuestra primera aplicación Angular2 se considera creada. La estructura final de directorios es:

    El código fuente utilizado en este artículo se puede descargar de la siguiente manera; no incluye los directorios node_modules y typings.

    Descargar el código fuente

    Otras extensiones