angular 2 angular-cli

Angular 2 promueve el uso de TypeScript a sus desarrolladores. El propio framework está desarrollado en TypeScript,este lenguaje solamente lo utilizas en la etapa de desarrollo y todo el código que se ejecuta en el navegador es al final Javascript, ya que existe una transpilación previa.

Angular CLI es el intérprete de línea de comandos de Angular 2 que te facilitará el inicio de proyectos y la creación del esqueleto, o scaffolding, de la mayoría de los componentes de una aplicación Angular.

Instalar Angular CLI

Esto lo conseguimos desde el terminal, lanzando el comando:

npm install -g angular-cli

Una vez instalado dispondrás del comando "ng" a partir del cual lanzarás cualquiera de las acciones que se pueden hacer mediante la interfaz de comandos de Angular. 

Crear el esqueleto de una aplicación Angular 2

Uno de los comandos que puedes lanzar con Angular CLI es el de creación de un nuevo proyecto Angular 2. Este comando se ejecuta mediante "new", seguido del nombre del proyecto que queramos crear.

ng new mi-nuevo-proyecto-angular2

***

Servir el proyecto desde un web server

Angular CLI lleva integrado un servidor web, lo que quiere decir que podemos visualizar y usar el proyecto sin necesidad de cualquier otro software. Para servir la aplicación lanzamos el comando "serve".

ng serve

****
abrir en un browser:

http://localhost:4200/

y deberia aparecer

app works!

 Podrías modificar el puerto perfectamente si lo deseas, simplemente indicando el puerto deseado con la opción --port:

ng serve --port 4201

la estructura de archivos queda de esta manera

Todas las aplicaciones de Angular2 están conformadas por componentes
Una aplicación tiene un componente raíz, que es el que contiene a todos los demás componentes, por lo general llamado app.component.
fijemonos en el contenido de app.component.ts :

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

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.

en app.component.html tenemos el siguiente codigo:

<h1>
  {{title}}

</h1>

Creamos un nuevo componente con Angular CLI

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

?

1	ng g component componente-uno

 ****

 ****