Creando el primer proyecto en Angular 2 – Manual vs Angular CLI

Angular 2 Primer Proyecto - Manual vs Angular CLI

Angular es el nuevo framework que Google está desarrollando y que todo el mundo está esperando, como puedes ver habló de nuevo, y también, vemos que no hay terminación JS, esto ya deja muy claro que con Angular 2 estamos ante una nueva plataforma de desarrollo, y no, una continuación de AngularJS.

 

Angular logo

Estamos ante una nueva plataforma de desarrollo, y no, una continuación de AngularJS

La nueva orientación que ha querido darle Google a su framework estrella requería una nueva implementación, entre las muchas novedades que encontraremos destacamos que está pensado para desarrollar con otros lenguajes como TypeScript y Dart, además de JavaScript, y que su desarrollo se basa en la creación de componentes.

En el momento de desarrollar esta introducción a Angular 2 mediante la creación del primer proyecto hay que tener en cuenta que este software se encuentra en la versión Release Candidate 2 (15/06/2016), puedes consultar la versión actual en Angular Change Log.

¿Qué es lo que vas a encontrar en esta publicación?

  1. INTRODUCCIÓN A ANGULAR
  2. CREAMOS UN PROYECTO ANGULAR MANUAL
  3. CREAMOS UN PROYECTO ANGULAR CON ANGULAR CLI
  4. Conclusión
  5. Documentación

Software y herramientas utilizadas

  • Angular: es el nuevo framework creado por Google continuación de AngularJS, aunque totalmente diferente.
  • Angular CLI: creador de proyectos para Angular que nos crea la configuración necesaria para lanzar un proyecto en poco tiempo, y dedicarnos a aprender este nuevo framework, esta desarrollado por el mismo equipo que desarrolla Angular.
  • Node.js: es un entorno multiplataforma y de código abierto orientado a servidores que nos permite programar en JavaScript del lado del servidor
  • npm: es el gestor de paquetes por defecto de Node.js para JavaScript.
  • TypeScript: un super conjunto de JavaScript, ya que como veremos este lenguaje se traduce en el momento de la compilación a JavaScript
  • JavaScript: el conocidísimo lenguaje del lado cliente
  • Visual Studio Code: editor open source y multiplataforma desarrollado por Microsoft, nos proporciona: ayuda en línea, conexión con git, múltiples plugins, …
  • Atom: editor alternativo a Code.


 

1. INTRODUCCIÓN A ANGULAR 2

La idea de está plataforma es desarrollar aplicaciones que podamos reutilizar para la web, una aplicación móvil o de escritorio, con el mismo código y solo haciendo pequeñas adaptaciones. Inicialmente desarrollaremos la parte del cliente, aunque se espera que podamos usar Angular 2 también del lado del servidor.

Angular - One Framework mobile and desktop

Angular 2 como veremos tiene una estructura orientada a componentes, buscando un desarrollo rápido con plantillas simple y declarativas. Con esta orientación buscamos utilizar los componentes existentes y reutilizarlos en múltiples proyectos.

Al mismo tiempo, también se pone el foco en los IDES y editores para que nos proporcionen ayuda específica para Angular buscando un desarrollo más rápido de aplicaciones. En este caso vamos a usar Visual Studio Code, por la ayuda en línea que nos proporciona y porque es con el que la gente de Angular está colaborando.

El proyecto que vamos a crear hoy será con TypeScript, la razón principal es que de las propuestas de Google es el que más desarrollado está y del que más documentación hay, como puedes ver en Angular Docs.

¿Qué es TypeScript?

TypeScript: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source., desarrollado por Microsoft y como apuesta de Google vamos a ver el crecimiento exponencial de este lenguaje, que no deja de ser un super conjunto de JavaScript, ya que como veremos este lenguaje se traduce a JavaScript.

TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.TypeScript Web

TypeScript compila a código limpio, a un simple código JavaScript que se ejecuta en cualquier navegador, en Node.js, o en cualquier motor de JavaScript que es compatible con al menos ECMAScript 3.

No te alarmes por el uso de TypeScript, como verás, conociendo JavaScript tu adaptación será rápida como veremos más adelante, los ficheros son nombrados con la extensión ts.

Instalación básica para empezar: Node.js + npm

En cualquiera de las dos creaciones de proyectos que vamos a utilizar necesitaremos instalar Node.js y npm , en la instalación debemos asegurarnos de que la instalación de Node es de al menos la versión 5.x.x (node -v) y de npm de al menos la versión 3.x.x (npm -v), veamos una introducción breve de que es cada cosa:

  • Node.js: es un entorno multiplataforma y de código abierto orientado a servidores que nos permite programar en JavaScript del lado del servidor. Basado en el motor V8 de Javascript de Google está diseñado para ejecutarse de una manera muy rápida, agilizando el desarrollo de aplicaciones (en el artículo ¿Cómo funciona Node.js? de Genbeta:dev por Cecilio Alvarez (@arquitectojava) puedes encontrar una explicación sencilla de su funcionamiento).
  • npm: es el gestor de paquetes por defecto de Node.js para JavaScript

En la web de Node.js puedes encontrar todas las instalaciones disponibles para los diferentes sistemas operativos, en mi caso estoy utilizando Linux (Ubuntu), y como, la instalación en otros sistemas no es compleja, voy a comentar simplemente algunos detalles de mi instalación.

  • En primer lugar yo ya tenía instalado Node.js, al comprobar mi instalación, que había realizado con la versión que trae por defecto Ubuntu comprobé con node -v que era la versión 3.9.x, como ya hablamos antes necesitamos una versión superior
  • Instalando un versión superior de Node.js en Ubuntu: la instalación que yo escogí es vía gestión de paquetes que te detallan en este enlace: Install Node.js: Debian and Ubuntu based Linux distributions, esto es lo que necesitas ejecutar para la versión superior:
    curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
    sudo apt-get install -y nodejs
    


 

2. CREAMOS UN PROYECTO ANGULAR 2 MANUAL

Para este apartado seguimos la documentación de Angular 2 en concreto el primer apartado Getting Started . Así, para empezar creamos la carpeta donde vamos a crear nuestro directorio y accedemos a él ya que trabajaremos desde ahí:

mkdir angular-primer-proyecto
cd angular-primer-proyecto/

Creamos los ficheros de configuración y de definición de paquetes

Si ya estás familiarizado con AngularJS u otros frameworks JavaScript ya sabrás que generalmente los ficheros de configuración utilizan el formato json, aquí es el que utilizamos, vamos a ver los primeros ficheros que tenemos que crear y su significado:

  • package.json: lista de paquetes de dependencias que necesitamos para este proyecto inicial, como ya comentamos antes usaremos npm, así, cuando ejecutemos npm install se instalarán todas las dependencias especificadas en nuestro proyecto, lo único que cambiamos inicialmente respecto a la versión base es el nombre del proyecto:
    {
      "name": "angular-primer-proyecto",
      "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-rc.1",
        "@angular/compiler":  "2.0.0-rc.1",
        "@angular/core":  "2.0.0-rc.1",
        "@angular/http":  "2.0.0-rc.1",
        "@angular/platform-browser":  "2.0.0-rc.1",
        "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
        "@angular/router":  "2.0.0-rc.1",
        "@angular/router-deprecated":  "2.0.0-rc.1",
        "@angular/upgrade":  "2.0.0-rc.1",
        "systemjs": "0.19.27",
        "core-js": "^2.4.0",
        "reflect-metadata": "^0.1.3",
        "rxjs": "5.0.0-beta.6",
        "zone.js": "^0.6.12",
        "angular2-in-memory-web-api": "0.0.11",
        "bootstrap": "^3.3.6"
      },
      "devDependencies": {
        "concurrently": "^2.0.0",
        "lite-server": "^2.2.0",
        "typescript": "^1.8.10",
        "typings":"^1.0.4"
      }
    }
    
  • tsconfig.json: es el fichero de configuración del compilador TypeScript, en el fichero puedes ver los detalles:
    {
      "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
      }
    }
    
  • typings.json : identifica la definición de ficheros TypeScript:
    {
      "globalDependencies": {
        "core-js": "registry:dt/core-js#0.0.0+20160317120654",
        "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
        "node": "registry:dt/node#4.0.0+20160509154515"
      }
    }
    
  • systemjs.config.js: este el el fichero de configuración SystemJS, como se comenta en la web de Angular este fichero es una elección ya que hay otras formas de hacer lo mismo, en mi caso me voy a ceñir a la versión que se usa en el ejemplo de Angular Quick Started, este es el fichero, como dice en el fichero necesitamos ajustarlo a nuestra aplicación como necesitemos, pero eso lo veremos en el siguiente apartado:
    /**
     * System configuration for Angular 2 samples
     * Adjust as necessary for your application needs.
     */
    (function(global) {
      // map tells the System loader where to look for things
      var map = {
        'app':                        'app', // 'dist',
        '@angular':                   'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs':                       'node_modules/rxjs'
      };
      // packages tells the System loader how to load when no filename and/or no extension
      var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
      };
      var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'upgrade',
      ];
      // Individual files (~300 requests):
      function packIndex(pkgName) {
        packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
      }
      // Bundled (~40 requests):
      function packUmd(pkgName) {
        packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
      };
      // Most environments should use UMD; some (Karma) need the individual index files
      var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
      // Add package entries for angular packages
      ngPackageNames.forEach(setPackageConfig);
      var config = {
        map: map,
        packages: packages
      }
      System.config(config);
    })(this);
    

Una vez creados todos los ficheros con el contenido ya estamos listos para instalar los paquetes que hemos indicado en el fichero package.json, para ello ejecutamos por consola desde dentro del directorio que creamos para el proyecto angular-primer-proyecto:

npm install

Una vez finalizado el proceso este será el contenido de la carpeta del proyecto

Angular - Directorio del proyecto

Angular – Directorio del proyecto

Creamos nuestra primera aplicación

Como ya hemos ido explicando Angular se basa en la creación de componentes, así para nuestra primera aplicación deberemos crear nuestro primer componente al que llamaremos app-inicial, para ello empezaremos creando del proyecto una subcarpeta con ese nombre:

mkdir app-inicial 

Definición del componente

Una vez hecho esto creamos dentro del directorio el fichero de definición del componente, en nuestro caso este primer componente será la raíz de la aplicación, creamos el fichero app-inicial.component.ts, introduce este contenido:

import { Component } from '@angular/core';
@Component({
  selector: 'mi-app-inicial',
  template: '<h1>Está es mi primera aplicación con Angular</h1>'
})
export class AppInicialComponent { }

Veamos un poco que estamos haciendo:

  • import: al igual que en otros lenguajes nos sirva para especificar que componentes necesitamos en el proyecto.
  • @Component: es una función decorado que tiene un objeto de metadatos como argumento. El uso para aplicar el decorador a la clase que estamos definiendo lo indicamos con el símbolo @ y se invoca con un objeto metadatos se coloca justo por encima de la clase. Los metadatos dice angular cómo crear y utilizar este componente, veamos algunos campos del componente decorador:
    • selector: es el nombre que vamos a utilizar para incrustar nuestro componente
    • template: definimos directamente la presentación web de nuestro componente.
    • templateUrl: definimos en un fichero la plantilla de nuestro componente.
    • styleUrls: definimos en un array las diferentes hojas de estilos que utilicemos
    • directives: declaramos las directivas que utilizamos en el componente, veremos más adelante que son y como definirlas.
    • providers: declaramos los providers que usamos.
  • export class AppInicialComponent: inidicamos la clase de definición del componente

Definición del componente

Una vez desarrollado nuestro código necesitamos indicarle a la aplicación como cargar el componente raíz que es el que hemos desarrollado:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppInicialComponent } from './app-inicial.component';
bootstrap(AppInicialComponent);

No vamos a profundizar en este tema, sino explicar un poco lo que estamos haciendo para poder lanzar la aplicación, en primer lugar, con import estamos indicando que necesitamos cargar esas dependencias de paquetes:

  • La función bootstrap para el navegador de Angular (ojo, no confundir con css bootstrap)
  • El componente raíz de nuestra aplicación AppInicialComponent

Finalmente, llamamos a bootstrap con el componente creado AppInicialComponent: bootstrap(AppInicialComponent)

Añadimos el index.html de nuestra aplicación

Ahora necesitamos crear en nuestra carpeta del proyecto un fichero index.html que define la página web que aloja la aplicación, como puedes ver en el fichero, todo son links a ficheros de configuración JavaScript y la carga de la hoja de estilos, nuestra aplicación se muestra simplemente con el código: Cargando…:

<html>
  <head>
    <title>Angular 2 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>
    <mi-app-inicial>Cargando...</mi-app-inicial>
  </body>
</html>

Creamos también una sencilla hoja de estilos css styles.css:

h1 {
  color: blueviolet;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
} 
p {
  color: blue;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 150%;
}

Las explicaciones de los ficheros que estamos utilizando las puedes consultar aquí: Step 4: Add index.html, the web page that hosts the application.

Lanzamos nuestro proyecto

Ya estamos listos para lanzar nuestro proyecto desde la ventana del terminal escribimos:

npm start

Este comando lanza dos procesos paralelos, uno es el compilador de TypeScript, y el otro es un servidor estático que se llama lite-server, como especificamos en los ficheros de configuración iniciales, ejecútalo y comprobarás que nos falta un pequeño detalle que nos servirá para ver un poco los ficheros de configuración.

Como puedes ver algo no ha funcionado, no te asustes es culpa mía, es un pequeño artilugio que usado para contarte un par de cosas interesantes:

  • La configuración de nuestra aplicación raíz.
  • La consola de Node.js donde podemos comprobar los errores de nuestra aplicación, una vez ejecutado el comando, tu consola será parecida a esta.
Angular - Detección de errores en Node.js

Angular – Detección de errores en Node.js

¿Qué es lo que vemos aquí? Fíjate en los errores 404, el primero nos indica que falta el fichero style.css, si has seguido mis pasos este no lo tendrás, el siguiente indica que no encuentra el fichero app/main.js, esto me sirve para que te fijes aquí y contarte varias cosas.

  • Corregimos el error: he copiado directamente los ficheros de configuración del Quick Start de Angular, en la documentación nos indican que la aplicación raíz se llamará app esto se indica entre las buenas prácticas de desarrollo con Angular, pero no es obligatorio, en nuestro caso hemos denominado la aplicación raíz como app-inicial, con lo cual simplemente sustituimos en el fichero de configuración // map tells the System loader where to look for things var map = { 'app': 'app-inicial', // 'dist', '@angular': 'node_modules/@angular', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 'rxjs': 'node_modules/rxjs' };
  • ¿Por qué busca main.js si creamos main.ts? Pues como os contaba antes uno de os procesos que lanzamos al ejecutar npm install es el compilador TypeScript que convierte todos nuestros ficheros a

Perdóname por hacerte fallar, pero creo que ha merecido la pena, este si será ahora tu resultado final, no hace falta que vuelvas a lanzar la aplicación, una de las virtudes de este desarrollo es que se actualiza en tiempo de ejecución al comprobar que hemos cambiado los ficheros.

Angular - Resultado mi primera aplicacion

Angular – Resultado mi primera aplicacion


 

3. CREAMOS UN PROYECTO ANGULAR CON ANGULAR CLI

Angular CLI nos va a hacer la vida más fácil con Angular, ya que nos permite crear de forma sencilla un aplicación lista para funcionar después de la instalación por línea de comandos con npm, además incorpora las buenas prácticas de programación con Angular, como en el apartado anterior ya hemos explicado los diferentes ficheros que necesitamos, aquí, nos centraremos en la estructura que creamos con Angular CLI, y veremos lo sencillo que será crear un nuevo componente para nuestra aplicación. Angular CLI esta desarrollado por el mismo equipo que desarrolla Angular.

Angular CLI

Así que , si te has asustado en el apartado anterior, tranquilo, aquí te recuperarás.

En la web de desarrollo de Angular CLI tienes toda la documentación: Angular-CLI en GitHub, aquí iremos comentando lo que nos vaya haciendo falta. Angular CLI está en una versión beta, por lo que tenemos que estar atentos a las actualizaciones que se vayan realizando.

Instalamos Angular CLI

Para su instalación tenemos que tener en cuenta los requisitos que os comentaba al principio Node.js con versión al menos 5.x.x y npm con versión al menos 3.x.x , es importante ya que sino Angular CLI no funcionará. Una vez revisado procedemos a instalar Angular CLI desde la línea de comandos ejecutando:

npm install -g angular-cli

Listo, ya no necesitamos hacer nada más, vamos a crear el proyecto.

Creamos nuestro proyecto con Angular CLI

Una vez instalado Angular CLI usaremos ng para usar la aplicación, teclea ng –help para ver las opciones en líneas disponibles, para crear un nuevo proyecto utilizaremos simplemente ng new más el nombre del proyecto a continuación, tal que así:

ng new angular-cli-primer-proyecto

Es un proceso que durará unos 2 minutos, a cambio, al finalizar seremos capaces de ejecutar directamente la aplicación por defecto, comprobémoslo, al igual que antes accedemos a la carpeta del proyecto y ejecutamos npm start, si te fijas en la ejecución se llama al comando ng serve que será el que utilicemos con Angular CLI:

Angular CLI - Consola de ejecución

Angular CLI – Consola de ejecución

En la consola puedes ir comprobando como se detectan automáticamente los cambios para su puesta en marcha, este es el resultado una veza lanzado ng serve como ves se indica la url de nuestra aplicación para probar http://localhost:4200/:

Angular CLI - Resultado después de crear el proyecto

Angular CLI – Resultado después de crear el proyecto

Analizamos la estructura creada y ejecutamos el proyecto

En un primer vistazo nos podemos fijar en la carpeta src ya que será donde vamos a crear nuestro código, su contenido será similar al que hemos creado manualmente, con la diferencia de que ya lo han hecho por nosotros y solo tenemos que preocuparnos de programar, a continuación, el contenido:

Angular CLI - Estructura del proyecto

Angular CLI – Estructura del proyecto

¿Qué más tenemos en la raíz de nuestro proyecto?

Pues ese montonazo de código es el que nos ha generado Angular CLI, esto nos puede hacer pensar en que en producción tendremos también todo, pues no es así, se generará en nuestro proyecto una carpeta dist con el contenido para poner nuestra aplicación en producción, y ahí, si que solo se incluyen las librerías necesarias.

Los ficheros que aparecen en la raíz son propios de Angular CLI, los cambiaremos para cambiar las configuraciones por defecto, veremos un ejemplo sencillo cuando creemos un componente.

Las demás carpetas como node_modules, typings y config pertenecen a la confguración del entorno con Angular CLI.

Para que veas la utilidad de Angular CLI estas son algunas de las utilidades que trae para crear componentes, servicios, directivas, clases, …, en el siguiente apartado utilizaremos la de creación de componentes:

  • Component: ng g component my-new-component
  • Directive: ng g directive my-new-directive
  • Pipe: ng g pipe my-new-pipe
  • Service: ng g service my-new-service
  • Class: ng g class my-new-class
  • Interface: ng g interface my-new-interface
  • Enum: ng g enum my-new-enum

Analizamos los ficheros raíz de nuestra aplicación

Para empezar nos dirigimos al directorio app, ahí encontramos 4 ficheros, como puedes ver todos tienen extensión ts, empezamos por angular-cli-primer-proyecto.component.ts

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'angular-cli-primer-proyecto-app',
  templateUrl: 'angular-cli-primer-proyecto.component.html',
  styleUrls: ['angular-cli-primer-proyecto.component.css']
})
export class AngularCliPrimerProyectoAppComponent {
  title = 'angular-cli-primer-proyecto works!';
}

Esta estructura ya es conocida por que la hemos visto y explicado en el anteriormente, como puedes ver ya por defecto nos ha creado el fichero para la plantilla html y un fichero css , como puedes ver se define un array por lo que podríamos incorporar múltiples css.

Viendo la plantilla html que tenemos en angular-cli-primer-proyecto.component.html, entenderemos fácilmente el código title = ‘angular-cli-primer-proyecto works!’;:

<h1>
  {{title}}
</h1>

Aquí aparecen ya las primeras dobles llaves típicas de AngularJS, como puedes ver dentro de nuestro componente le damos valor a la variables.

La plantilla css que tenemos en angular-cli-primer-proyecto.component.css está vacía, podemos hacer algún cambio sencillo para comprobar la actualización automática del código, por ejemplo:

h1{
    color: blue
}

Creamos un nuevo componente con Angular CLI

Como ya vimos antes la estructura para crear un componente vamos a utilizarla para crear componente-uno:

ng g component componente-uno

Este estos son los ficheros creados, que como puedes ver llevan el nombre del componente y son los mismos que creamos para el componente raíz:

Angular CLI - Component - Creando el primer componente

Angular CLI – Component – Creando el primer componente

Este componente crea por defecto un párrafo con el mensaje: componente-uno works!

<p>
  componente-uno works!
</p>

Si ejecutas ahora el proyecto cosa que recomiendo que hagas antes de hacer los siguientes pasos para que compruebes como se actualiza tu proyecto automáticamente con lo que podrás ir viendo el efecto de los cambios que hacemos, así que ejecuta ng serve si no tienes el proyecto en ejecución.

Antes te mostré los ficheros que nos crea para el componente, como pudiste ver, son los mismo que los que creamos para el componente principal de la aplicación, hasta aquí nada nuevo, este es el fichero creado para nuestro componente, únicamente te lo enseño para que veas el selector utilizado: app-componente-uno porque nos referiremos a él para incorporarlo al html de la aplicación:

import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-componente-uno',
  templateUrl: 'componente-uno.component.html',
  styleUrls: ['componente-uno.component.css']
})
export class ComponenteUnoComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

Paso 1: Añadimos el componente al html del componente de la aplicación

Buscamos el fichero angular-cli-primer-proyecto.component.html y añadimos el componente así: , como ves el selector que utilizamos antes, ahora este es nuestro código:

<h1>
  {{title}}
</h1>
<app-componente-uno></app-componente-uno>

Como puedes comprobar en la consola, Angular CLI ha detectado los cambios, pero nuestra página web sigue igual, necesitamos hacer el paso 2.

Paso 2: Necesitamos registrar el componente a utilizar para poder ser reconocido en la vista html

Para registrar el componente nos dirigimos a angular-cli-primer-proyecto.component.ts, aquí haremos dos cosas:

  • Importar el componente: import { ComponenteUnoComponent} from ‘./componente-uno’;, la sintaxis es sencilla indicamos de donde tenemos que hacer la importación y después, declaramos el componente que vamos a utilizar, haremos lo mismo para los componentes que usemos de Angular.
  • Registrar el componente que vamos a utilizar: directives: [ComponenteUnoComponent], sin profundizar mucho, diremos que además de importarlo tenemos que declarar que lo vamos a usar.

Así, este sería nuestro código final:

import { Component } from '@angular/core';
import { ComponenteUnoComponent} from './componente-uno';

@Component({
  moduleId: module.id,
  selector: 'angular-cli-primer-proyecto-app',
  templateUrl: 'angular-cli-primer-proyecto.component.html',
  styleUrls: ['angular-cli-primer-proyecto.component.css'],
  directives: [ComponenteUnoComponent]
})
export class AngularCliPrimerProyectoAppComponent {
  title = 'angular-cli-primer-proyecto works!';
}

Si todo ha ido bien puedes comprobar como se actualizado tu página y ahora si se muestra el contenido de la página tal que así:

Angular CLI - Resultado del componente UNO

Angular CLI – Resultado del componente UNO

Creamos un segundo componente con Angular CLI personalizando su creación

Por último, para perder el miedo a Angular CLI vamos a hacer una modificación sencilla para actualizar el prefijo app por defecto que nos añado Angular CLI a nuestro componente anterior, para ello nos vamos al fichero de configuración angular-cli.json de Angular CLI:

{
  "project": {
    "version": "1.0.0-beta.5",
    "name": "angular-cli-primer-proyecto"
  },
  "apps": [
    {
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "config/protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "config/karma.conf.js"
    }
  },
  "defaults": {
    "prefix": "app",
    "sourceDir": "src",
    "styleExt": "css",
    "prefixInterfaces": false
  }
}

Aquí, puedes ver la versión que estás utilizando de Angular CLI, en el momento de realizar este proyecto estaba en la versión beta 5 , ahora en el día de está publicación ya estamos en la beta 6, y es que lo cambios y actualizaciones son continuos mientras no sale una versión final de Angular, en este punto también se indica el nombre del proyecto.

Se registran que ficheros estamos utilizando apra nuestra aplicación así como las librerías de test como Karma, …

Puedes ver en el apartado defaults la definición del prefijo app este será el que Angular CLI utilizará por defecto, en mi caso lo cambio por cx, con lo que el nuevo componente que voy a crear y que se llamará componente-dos (perdón por la originalidad) su selector será cx-componente-dos como veremos.

Creamos el componente dos con el nuevo prefijo

Creamos el componente dos:

ng g component componente-dos

Comprobamos que los ficheros generados son los mismo que antes y que ahora el prefijo del componente dos es el que hemos definido en mi caso:

 
@Component({
  moduleId: module.id,
  selector: 'cx-componente-dos',
  templateUrl: 'componente-dos.component.html',
  styleUrls: ['componente-dos.component.css']
})

Hacemos el registro del componente y lo añadimos al html

Seguimos los pasos de antes, primero añadimos el componente al código <h1> {{title}} </h1> <hr /> <app-componente-uno></app-componente-uno> <hr /> <cx-componente-dos></cx-componente-dos>

Ahora registramos el componente dos al igual que antes primero importándolo y después, registrándolo como se puede ver en el código:

 
import { Component } from '@angular/core';
import { ComponenteUnoComponent} from './componente-uno';
import { ComponenteDosComponent} from './componente-dos';

@Component({
  moduleId: module.id,
  selector: 'angular-cli-primer-proyecto-app',
  templateUrl: 'angular-cli-primer-proyecto.component.html',
  styleUrls: ['angular-cli-primer-proyecto.component.css'],
  directives: [ComponenteUnoComponent, ComponenteDosComponent]
})
export class AngularCliPrimerProyectoAppComponent {
  title = 'angular-cli-primer-proyecto works!';
}

Ahora, en tu pantalla verás los dos componentes añadidos:

Angular CLI - Resultado del componente DOS

Angular CLI – Resultado del componente DOS

Con estos dos sencillos componentes pretendía simplemente introducirte en la forma de trabajo de Angular 2, en próximos tutoriales nos adentraremos ya en la creación de una aplicación sencilla con Angular.

Conclusión

Angular 2 es prometedor en muchos sentidos, y aunque quizás puede ser discutible si es o no la mejor de las plataformas con respecto a sus competidores, que esta ambiciosa plataforma tenga el respaldo de Google y Microsoft va a hacer que se use si o sí, además el interés de la comunidad es innegable, basta simplemente analizar los cursos y consultas sobre Angular 2 aún en una versión Release Candidate y antes, para darse cuenta de las expectativas creadas.

Ahora mismo, tenemos que estar muy atentos a los cambios y actualizaciones del proyecto, a la espera de una versión final, para que en un período de 3 meses podamos empezar a evaluar Angular 2 ya en proyectos en producción.

Documentación

  • Angular
  • TypeScript: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source., desarrollado por Microsoft y como apuesta de Google vamos a ver el crecimiento exponencial de este lenguaje, que no deja de ser un super conjunto de JavaScript, ya que como veremos este lenguaje se traduce a JavaScript.
  • ¿Cómo funciona Node.js? de Genbeta:dev por Cecilio Alvarez (@arquitectojava) puedes encontrar una explicación sencilla del funcionamiento de Node.js.
  • Node.js: ¿Qué es y para que sirve NodeJS? en este artículo puedes encontrar información de la utilidad y ventajas de usar Node.js, y también, los problemas que te puedes encontrar debido a entre otras cosas que no está del todo estandarizado.
  • Web de npm: es gestor de paquetes para JavaScript que utilizamos con Node.js nos facilita la instalación y creación de paquetes para nuestros proyectos.
  • Angular CLI: The Angular2 CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!
  • Hola mundo en Angular 2 : con este sencillo ejemplo Alberto Basalo (@albertobasalo) usando Angular CLI nos desgrana el funcionamiento de Angular, lectura 100% recomendable.

13 respuestas en “Creando el primer proyecto en Angular 2 – Manual vs Angular CLI

    1. Julio Yáñez Novo Autor de la entrada

      Hola Gabriel.

      Yo ya me he encontrado en esa tesitura, y me decisión ha sido que para proyectos a corto plazo no utilizarlo, porque como bien dices hay muchos cambios todavía, y eso que ya están en una versión Beta, cuando yo hice este tutorial estaban en versión Alpha, y te puedo decir que durante la elaboración del mismo tuvo que cambiar la explicación por los continuos cambios. Para proyectos a largo plazo, que se empiecen desde cero y si se ajustan a las necesidades de un desarrollo cambiante probar con Angular 2 pues entonces si tendré en cuenta la utilización de Angular 2.

      Muchas gracias por tu comentario.
      Saludos.

    1. Julio Yáñez Novo Autor de la entrada

      Hola Max.

      Ahora mismo no estoy desarrollando con Angular 2, pero te puedo recomendar la web de Alberto Básalo:

      Para la parte de Oracle no tiene porque estar relacionado directamente con Angular 2, ten en cuenta que la forma de trabajar con Angular 2 es tener un servicio de Rest que consumes, este servicio puede estar en Php, Node, …, o lo que tu más domines para desarrollar tu servicio para Oracle.

      Saludos.
      Espero que te sirva de ayuda.

  1. Frankie

    Hola Julio muchas gracias por tu post
    Estoy intentando introducirme en el mundillo de Angular y los Frameworks JS pero en todos los tutoriales que veo y cursos, todos te dicen que versiones has poner en el package.json. Pero quien decide estas? Es decir si te pones desde cero a crear un proyecto Angular, ¿cómo decide voy a usar tal versión de tal dependencia? Yo vengo del mundo java y las dependencias con Maven, y sí, cuando vas necesitando algo en el código buscas y la introduces en el pom.xml….aquí se actúa igual? Es que todos los tutoriales parecen ya preparados. Sólo eso, gracias de nuevo
    Saludos
    Frankie

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *