Configuración del entorno JavaScript de Angular 2
En este capítulo presentamos cómo configurar el entorno de ejecución de Angular 2.
En este capítulo se utiliza JavaScript para crear aplicaciones de Angular; por supuesto, también puedes usar TypeScript y Dart para crear aplicaciones de Angular.
La estructura de directorios de archivos utilizada en este capítulo es la siguiente:
Crear archivo de configuración
Crear directorio
$ mkdir angular-quickstart $ cd angular-quickstart
Cargar las bibliotecas necesarias
Aquí recomendamos usar npm como herramienta de gestión de paquetes. Si aún no has instalado npm o no conoces npm, puedes consultar nuestro tutorial:Introducción al uso de NPM。
Crea el archivo package.json, el código es el siguiente:
Archivo package.json:
Debido a que el acceso al espejo oficial de npm desde China es demasiado lento, aquí usé el espejo 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
Una vez ejecutado con éxito, se generará un directorio node_modules dentro del directorio angular-quickstart, que contiene los módulos necesarios para este ejemplo.
Crear componente de Angular
Los componentes (Component) son la base y el núcleo de las aplicaciones de Angular. Un componente encapsula una funcionalidad específica, y los componentes trabajan en conjunto para ensamblar una aplicación completa.
En general, un componente es una clase de JavaScript que se utiliza para controlar la plantilla de la vista.
A continuación, creamos un directorio app en angular-quickstart:
$ mkdir app $ cd app
Y agregamos el archivo de componente app.component.js, cuyo contenido es el siguiente:
Archivo app.component.js:
A continuación, analicemos el código anterior:
Creamos un componente visual llamado AppComponent mediante la llamada encadenada a los métodos Component y Class del espacio de nombres global de Angular core, ng.core.
El método Component acepta un objeto de configuración que contiene dos propiedades. El método Class es donde implementamos el propio componente; en el método Class agregamos propiedades y métodos al componente, que se vinculan a la vista y al comportamiento correspondientes.
Módulo
Las aplicaciones de Angular son modulares. ES5 no tiene un sistema de módulos incorporado; se puede usar un sistema de módulos de terceros. Luego creamos un espacio de nombres independiente app para la aplicación, y el código de los archivos se puede envolver en una IIFE (expresión de función invocada inmediatamente):
(function(app) {
})(window.app || (window.app = {}));
Pasamos el objeto del espacio de nombres global app a la IIFE; si no existe, lo inicializamos con un objeto vacío.
La mayoría de los archivos de la aplicación exportan código agregando elementos al espacio de nombres app. Exportamos AppComponent en el archivo app.component.js.
app.AppComponent =
Objeto de definición Class
En este ejemplo, la clase AppComponent solo tiene un constructor vacío:
.Class({
constructor: function() {}
});
Cuando queremos crear una aplicación con significado real, podemos extender este objeto con propiedades y lógica de aplicación.
Objeto de definición Component
ng.core.Component() le dice a Angular que este objeto de definición de clase es un componente de Angular. El objeto de configuración pasado a ng.core.Component() tiene dos campos: selector y template.
selector define un selector CSS simple, my-app, para un elemento HTML anfitrión. Cuando Angular encuentra un elemento my-app en el HTML anfitrión, crea y muestra una instancia de AppComponent.
La propiedad template contiene la plantilla del componente.
Agregar NgModule
Las aplicaciones de Angular se componen de módulos de Angular, que contienen los componentes y cualquier otra cosa que la aplicación de Angular necesite.
A continuación, creamos el archivo app/app.module.js, cuyo contenido es el siguiente:
Archivo app.module.js:
Iniciar la aplicación
Agregamos el archivo app/main.js:
Archivo app/main.js:
Necesitamos dos cosas para iniciar la aplicación:
- La función platformBrowserDynamic().bootstrapModule de Angular.
- El módulo raíz de la aplicación mencionado anteriormente, AppModule.
A continuación, creamos index.html, cuyo código es el siguiente:
Archivo index.html:
Análisis de index.html
- 1. Cargamos las bibliotecas de JavaScript que necesitamos;
- 2. Cargamos nuestros propios archivos JavaScript, prestando atención al orden;
- 3. Agregamos la etiqueta <my-app> dentro de la etiqueta <body>.
El proceso de ejecución es: cuando Angular llama a la función bootstrapModule en main.js, lee los metadatos de AppModule, encuentra el componente de arranque AppComponent y el selector my-app, localiza un elemento llamado my-app, y luego carga el contenido entre esas etiquetas.
Agregar algunos estilos
El código del archivo styles.css es:
Archivo styles.css:
Abre la terminal e ingresa el siguiente comando:
$ npm start
Accede a http://localhost:3000/, el resultado mostrado en el navegador es:
Así, nuestra primera aplicación de Angular 2 queda creada. El código fuente utilizado en este artículo se puede descargar de la siguiente manera, sin incluir node_modules.
Descargar código fuente
Otras extensiones