Angular en un vistazo

Angular es un framework para aplicaciones web desarrollado en TypeScript, de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página. En este post veremos como instalar Typescript y Angular, así como crear e iniciar una aplicación.

Instalar Typescript

$ npm install -g typescript
$ npm list --global

Listar versión de Typescript

$ tsc --version

Instalar Angular Cli

$ npm install -g @angular/cli
$ npm list --global

Listar versión instalada

$ ng version

Levantar servidor

$ ng serve -o

Vamos a http://localhost:4200
Crear un proyecto y levantar servidor

$ ng new proyecto
$ cd proyecto
$ ng serve -o

Vamos a http://localhost:4200

Dependiendo de la versión instalada se mostrará una página de inicio.

Nota: No olvidar que el lenguaje de programación que usa este Framework es Typescript, que una vez compilado creará el código Javascript que interpretará el navegador.
Quien ha usado este lenguaje entenderá la lógica para importar módulos, paquetes o componentes

import {Componente} from './carpeta/componente';

... y hasta archivos de texto o JSON.

import * as personas from './personas.json';
import * as lista_usuarios from '../assets/json/usuarios.json';

Un vistazo a los componentes del proyecto creado.

• app.component.ts: Componente principal de la aplicación Angular.
• app.component.html: El componente HTML o plantilla principal de la aplicación Angular.
• app.component.css: Este componente es donde colocaremos nuestros estilos.
• app.module.ts: Módulo principal de la aplicación Angular, aquí podremos agregar nuevos módulos.

app.component.ts

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

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

   constructor(){}

   ngOnInit(): void {}

}

app.component.html

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

app.component.css

/* Hojas de estilos */

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Todos estos archivo conforman el "esqueleto" de una aplicación en Angular.
En próximos post veremos más ejemplos.

Sitios:
https://angular.io/
https://angularjs.org/
https://www.typescriptlang.org