Angular 1

AngularJS

Angular 8
Angular 7

Angular 6

Angular 5

Angular 4

Angular 2

Angular

Herramientas y entornos de desarrollo necesarios

Herramientas y entornos de desarrollo necesarios

Descargar e instalar desde:

https://code.visualstudio.com/download

Herramientas y entornos de desarrollo necesarios

Descargar e instalar desde:

https://nodejs.org/en/

(versión 10 para adelante)

Herramientas y entornos de desarrollo necesarios

Una vez instalado, verificar que funciona bien.

Para ello abrir una ventana de comandos (windows) o una ventana de terminal (mac) y ejecutar el siguiente comando.

node -v

Ese comando devuelve la versión instalada de NodeJS

Herramientas y entornos de desarrollo necesarios

Descargar e instalar desde:

https://git-scm.com/

Herramientas y entornos de desarrollo necesarios

Una vez instalado, verificar que funciona bien.

Para ello abrir una ventana de comandos (windows) o una ventana de terminal (mac) y ejecutar el siguiente comando.

git --version

Ese comando devuelve la versión instalada de git

Desarrollaremos Angular usando:

Trabajaremos con

 

Angular Cli
 

http://cli.angular.io


// Para instalar Angular Client
npm i -g @angular/cli

Para instalar Angular Cli, debemos abrir una ventana de comandos (windows) o una ventana de terminal (mac) y ejecutar el siguiente comando en cualquier carpeta.

La instalación demora unos minutos.

npm i -g @angular/cli

Si ocurre algún problema de instalación en Windows, abrir la ventana de comandos en modo administrador y ejecutar el comando de instalación.

Si ocurre algún problema de instalación en MAC, abrir la ventana de terminal y ejecutar el comando de instalación con permisos de súper usuario (es posible que solicite contraseña)

sudo npm i -g @angular/cli

Otra posibilidad es ejecutar el comando anterior, pero logueandose en la MAC como administrador.

ng version

Para verificar que el Angular Cli está correctamente instalado, ejecutar el siguiente comando en la ventana de comandos o en la ventana de Terminal.

Debe mostrarles un resultado similar a la siguiente imagen.

ng new <<nombre app>>

Para crear el esqueleto de una app de Angular, ejecutar el siguiente comando desde una ventana de comandos o una ventana de Terminal.

Tomar en cuenta que el comando creará una carpeta con el mismo nombre de la app (<<nombre app>>) y dentro estarán los archivos que forman el esqueleto.

Abrir la carpeta usando Visual Code.

Menú Archivo / Abrir Carpeta

Abrir la pestaña Terminal del Visual Code (es la cuarta pestaña en la parte inferior)

 

Si no vemos las pestaña anteriores, darle clic al icono de la parte inferior izquierda.

ng serve --o

// o la versión simplificada

ng s --o

Por defecto el Visual Code nos ubica dentro de la carpeta de la app. Si no fuese así, ubicarse dentro de la carpeta a través de la Terminal.

Ejecutar el siguiente comando para levantar el Angular en el navegador por defecto.

Se abrirá el navegador en la dirección:

http://localhost:4200

y aparecerá una página similar a la siguiente:

Esta es la estructura de archivos del esqueleto creado.

main.ts

appModule.ts

appComponent.ts

Secuencia de ejecución de una app de Angular usando Angular Cli

Casi todos los archivos que crearemos estarán ubicados dentro la carpeta src

appComponent.ts

appComponent.html

appComponent.css

Un componente está formado por 4 archivos como máximo.

Lo más común es que estén todos juntos en una misma carpeta dentro de la carpeta src/app

appComponent.spec.ts

Lógica

Página HTML

Hoja de estilos

Pruebas unitarias

appComponent.html

INDEX.HTML

El componente inicial es invocado desde el archivo index.html situado en la carpeta src

<!-- micomponenteComponent.ts -->

import { Component } from '@angular/core'

Casi todos los elementos en Angular están basados en Decoradores. Un Decorador es una clase que expande (hereda) las funcionalidades a otra clase.

Para crear un Componente (vista) se usa el decorador "Component" el cual se importa desde la clase '@angular/core'

<!-- micomponenteComponent.ts -->

import { Component } from '@angular/core'

@Component({

})
export class MiComponenteComponent {}

Para aplicar un decorador a un clase se usa @NombreDecorador. El constructor del decorador usa como parámetro un objeto JSON.

Los decoradores (en su mayoría) preceden a una clase.

<!-- micomponenteComponent.ts -->
import { Component } from '@angular/core'

@Component({
    selector: "app-micomponente",
    templateUrl: "./app-micomponente.html",
    styleUrls: ["./app-micomponente.css"]
})
export class MiComponenteComponent {}

Un componente típico

<!-- app.module.ts -->

...
import { MiComponenteComponent } 
    from './micomponenteComponent'
...
declarations: [
    MiComponenteComponent
]
...

Un componente debe declararse para que "exista" dentro de Angular. La mayoría de los componentes (y otros) se declaran dentro de un módulo a través de la propiedad "declarations".

INDEX.HTML

<!-- app-micomponente.html -->

<div>
    <h1> Mi componente </h1>
</div>
<!-- app-micomponente.css -->

h1 {
    font-family: Arial;
    font-size: 30px;
    font-style: italic;
}
<article>
    <app-micomponente></app-micomponente>
</article>
<article>

    <div>
        <h1> Mi Componente </h1>
    </div>

</article>

Así se inserta un componente dentro de una página html.

Noten la referencia al selector (selector de etiqueta como en css)

Así se ve en el inspector de elementos del navegador

INDEX.HTML

<article>
    <app-micomponente></app-micomponente>
</article>
<article>
    <section app-micomponente></section>
</article>
<article>
    <section class="app-micomponente"></section>
</article>

Selector de etiqueta

Selector de atributo

Selector de clase

INDEX.HTML

@Component({
    selector: "app-micomponente",
    ...
})

@Component({
    selector: "[app-micomponente]",
    ...
})

@Component({
    selector: ".app-micomponente",
    ...
})

Selector de etiqueta

Selector de atributo

Selector de clase

INDEX.HTML

...
export class MiComponenteComponent {
    curso: string = "FullStack con Javascript"
    activo: boolean = false

    cambiarCurso() {
        const fecha = new Date()
        this.curso = `
                FullStack con Javascript. 
                Fecha desde 1970: ${this.fecha.getTime()}
        `
    }

    cambiarEstado() {
        this.activo != this.activo
    }
}

- "curso" y "activo" son propiedades de la clase y tienen un tipo de datos asignado.

 

- "cambiarCurso" y "cambiarEstado" son métodos de la clase.

 

- Se acceden a las propiedades para leer o modificar su valor a través del objeto "this".

 

- Sin el objeto "this", Angular no buscará una propiedad sino una variable.

 

- Para acceder a un método, también se usa el objeto "this".

<!-- app-micomponente.html -->

<h1> {{curso}} </h1>

<button (click)="cambiarCurso()">Cambiar fecha</button>

<button [disabled]="activo" (click)="cambiarEstado()">
    Cambiar estado
</button>

Entradas: ejemplo "disabled"

Salidas: ejemplo "click"

No es necesario el objeto "this" para acceder a una propiedad o método.

INDEX.HTML

Button

[ ]

( )

[disabled ]

(click)

Entrada

Input

Salida

Output

Las entradas envían un valor hacia adentro del componente

Las salidas reciben un valor y/o una señal desde dentro del componente

const nombreTarea: string = "Maquetar el nuevo front"
const duracion: number = 5

const template: string = `
    La tarea ${nombreTarea} 
    se hará en ${duracion}
`

Las plantillas de texto son parte del ES6. Nos ayudan mucho a la hora de concatenar  valores de tipo cadena con valores de otros tipos de datos.

Las plantillas de texto se definen con el backstick (`) al inicio y al final. Para concatenar (interpolar) se usa la siguiente sintaxis: ${}

const lista: Array<string> = ["Persona1", "Persona2", "Persona3"]

for(let ind=0; ind < lista.length; ind++) { 
    console.log(lista[ind])
}

lista.forEach(function(item){
    console.log(item)
})

lista.forEach( item => {
    console.log(item)
})

lista.forEach( item => console.log(item))

for(let item in lista){
    console.log(item)
}

for(let item of lista) {
    console.log(item)
}

Diferentes instrucciones de bucles.

import { Component } from '@angular/core'

@Component({
    selector: "app-micomponente",
    templateUrl: "./app-micomponente.html",
    stylesUrl: ["./app-micomponente.css"]
})
export class MiComponenteComponent {
    tareas: Array<string> = ["Tarea 1", "Tarea 2", "Tarea 3"]
    // tareas: string[] = ["Tarea 1", "Tarea 2", "Tarea 3"]
}

Los datos de tipo arreglo, en typescript, se pueden definir de 2 formas:

- Array<tipoDeDato>

- tipoDeDato[]

*ngFor="let tarea of tareas"

La directiva estructural *ngFor nos sirve para recorrer una colección (ejemplo: un arreglo)

<!-- app-micomponente.html -->

<div *ngFor="let tarea of tareas">
    <h1> {{tarea}} </h1>
</div>

La etiqueta "div" se repetirá tantas veces hayan elementos en el arreglo "tareas".

En cada bucle, un elemento del arreglo es asignado la variable "tarea" y ésta es mostrada a través de una interpolación (no confundir con la interpolación vista anteriormente).

La interpolación se hace con la sintaxis {{ }} y solo se usa para mostrar contenido dentro de una etiqueta.

<!-- miModulo.module.ts -->

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



@NgModule({
    declarations: [],
    imports: [
        BrowserModule
    ],
    providers: [],
    bootstrap:[],
    entryComponents: [] 
})
export class miModulo {}

Estructura de un módulo

1 Angular: Introducción

By Sergio Hidalgo

Made with Slides.com

1 Angular: Introducción

Versiones de Angular, componentes, herramientas y entorno de desarrollo, definición de eventos y propiedades.

  • 1,092

More from Sergio Hidalgo