npm install @angular/cli -g

https://cli.angular.io

https://github.com/angular/angular-cli/wiki

ng new myProject

cd myProject

//Para abrir el proyecto usando Visual Studio Code:
code .   

//Para abrir el proyecto usando ATOM:
atom .

1. /e2e/                 Carpeta para pruebas de tipo end-to-end

2. /node_modules/        Paquetes de dependencias instalados con npm

3. /src/app/             Código fuente del app. Incluye módulos y componentes

4. /src/assets/          Activos reutilizables

5. /src/environments/    Definiciones de ambientes

6. /src/index.html       HTML principal del app

7. /src/main.ts          TypeScript principal del app

8. /src/polyfills.ts     Definiciones para la compatibilidad entre navegadores

9. /src/styles.css       Estilos Generales

10. /src/test.ts          Pruebas generales

11. /src/tsconfig.app.json Configuración de TypeScript

12. /src/tsconfig.spec.json Configuración de Pruebas con TypeScript

13. /src/typings.d.ts     Tipos de dato personalizados en TypeScript

/*IMPORTS: Acá se incluyen las librerísa necesarias para que el componente pueda operar*/
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

/*Decorador @NgModule define la metadata correspondiente al módulo*/
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent] //Se incluye el componente AppComponent como parte del módulo.
})

/*Clase Principaldel Módulo. En este caso está vacía.*/
export class AppModule { }

/*IMPORTS: Acá se incluyen las librerísa necesarias para que el componente pueda operar*/
import { Component } from '@angular/core';

/*Decorador @Component define metadata como la etiqueta que se usará para acceder al componente (selector) o los URL's a la plantilla o a los estilos.*/
@Component({ 
  selector: 'app-root', //Define la forma en que se puede hacer uso del componente. En este caso, mediante la etiqueta <app-root></app-root>
  templateUrl: './app.component.html', //Define cual plantilla HTML usará el componente.
  styleUrls: ['./app.component.css'] //Define cual archivo de estilos definirá la apariencia del componente
})

/*Clase principal del componente. Se exporta para hacerla accesible por parte de Angular y las vistas relacionadas.*/
export class AppComponent {
  title = 'app works!';
  sayHello() {
    alert("Hello");
  }
}

El siguiente ejemplo genera un componente nuevo llamado Hello:

ng generate component Hello

El siguiente ejemplo solamente indica lo que se va a generar, pero no genera nada:

ng generate component Hello --dry-run

ng test

ng build --prod

Archivo hello.component.html

<p>
 {{greeting.toUpperCase()}}
</p>
<input type="text" [(ngModel)]="greeting" (keyup)="log($event)"/>

Archivo hello.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hello',
templateUrl: './hello.component.html',
styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {
greeting: string;
constructor() {
this.greeting = "Hello Joselito!";
}

log(event){
console.log(event);
}

ngOnInit() {
}
}

(!) Es importante destacar que para que funcione la directiva ngModel se debe asegurar que el archivo app.module.ts contenga la referencia a FormsModule y que esta sea inyectada dentro del descriptor de metadatos @NgModule tal y como se ejemplifica seguidamente.