Instrucción a angular

primero la instalación desde 0 y paso a paso

después veremos cómo es la estructura de un proyecto de angular, veremos su estructura

a nivel de archivos y directorios

También veremos el análisis de un componente

Creación de componentes

Primer paso
cuando se vaya a trabajar con un framework para js
Es instalar o actualizar node js
Segundo paso
Ya tenemos que abrir la consola el cmd, si está en Linux con la terminal que ya viene por
defecto instalada para trabajar con la línea de comando.

Una vez que ya tenemos instalado nodo js o actualizado.

Ahora lo que tenemos que hacer es actualizar npm, que es el gestor de paquetes de node
para bajar las dependencias más actuales del framework

npm install -g npm@latest

-g = es decir de manera global
npm@latest = que es la última versión de npm
Esto no se demora nada actualizando
Así vamos descargando las últimas versiones de los paquetes que necesitemos
Listo ahora lo que tenemos que hacer es borrar la cache de npm, por que deponto ya allá
paquete ya almacenados en la cache de npm. Si no en lugar de descargarlos utilice los que
ya tenga guardados

npm cache clean –force

Esto nos va a limpiar el cache del npm

También es recomendable desactivar las auditorias de npm

Porque npm lo que hace cunado se instala un paquete es auditar su seguridad, para
revisar los paquetes para revisar si son seguros.
Pero cuando un realmente descarga un paquete de angular ya son seguros, lo que
debemos hacer es desactivar las auditorias para evitar fallos

npm set audit false

Así se desactivan las auditorias

Ahora lo que debemos hacer es ejecutar un comando, para en el caso que se

tenga versiones antiguas de angular-cli

Angular-cli es el programa que nos permite generar e instalar proyectos de

angular de nos da muchas funciones, como generar un proyecto con una
estructura básica de archivos de directorios, tener un servidor local

Angular-cli es el programa más importante para trabajar con angular a nivel

de línea de comando

npm uninstall -g angular-cli

el segundo comando
npm uninstall -g @angular/cli
en este caso es el paquete de angular mas actualizado

de nuevo borramos la cache para limpiar esos paquetes antiguos

npm cache clean –force

ahora si instalamos angular-cli para tener todas las funciones que ofrece y
poder generar proyecto en angular

npm install -g @angular/cli@latest

@latest = o sea la última versión

Esto me va a instalar angular-cli

Esto me va a permitir crear proyectos de angular fácilmente y trabajar
mediante la línea de comando

Ahora podemos limpiar la consola con el comando cls

Ahora debemos ir a la runa de la carpeta donde vamos a crear el proyecto de

angular

cd Angular-js
Creamos el proyecto de angular con el siguiente comando y le damos el
nombre
ng new

Ahora nos pide que le demos un nombre al proyecto

Aquí podemos ver como angular-cli ya nos genera la estructura de archivos y

directorios básicos para empezar a montar un proyecto de angular, así no
tenemos nosotros que montar eso manualmente

Si le damos >dir
Podemos ver que tenemos la carpeta del proyecto

Para poder ejecutar mi proyecto de angular

Para acceder a la carpeta del proyecto ejecutamos el siguiente comando
cd ejercicioclase

app.module.ts
es el modulo principal, donde esta cargado en declarations donde se cargan
los componentes
en imports otros modulos
en Bootstrap se define cual componente va hacer el principal

App.component.ts
Aquí tenemos un componente inicial aquí, con varios elementos
Los primero el import del objeto componet, lo cual angular nos permite
utilizar este decorador para definir ese componente, que es un decorador
nos permite aplicar una serie de atributos y características a una clase

Por ejemplo, a la clase AppComponent

Le estamos poniendo un selector que seria la etiqueta
Donde se utiliza esa etiqueta pues en el index.html

Le indicamos la templateUrl
Es el html vinculado a este componente, que el componente es un punto
intermedio entre el modelo de datos y la vista

Que paso si yo borrara todo el contenido

Lo borrábamos y colocamos
Y guardamos

<h1>Bienvenido a Angular</h1>

 styleUrls: ['./app.component.css']

este que esta vinculado a un hoja de estilo

luego tenemos una propiedad que creamos en esta clase, automáticamente se pasan a la vista

<h1>Bienvenido a Angular – {{title}}</h1>

Creo un h2

Si yo quisiera tener más variable, por ejemplo

En lugar que colocar el texto fijo voy a crear una variable

Que se va a llamar nombre

Le indicamos el tipo de dato string

nombre:string = “ronaldo ballesteros”

si quiero imprimir esto en pantalla meto las dos llaves

Como crear un componente nuevo aparte

Tenemos que ir al cmd

Le damos ctrl c para detener la ejecución

Limpiar la consola cls

Tenemos que utilizar el comando

ng generate component

damos el nombre al componente

cada vez que yo cree un componente me va aparecer en app.module que tengo que agregar mi-
componente en declaration, si no es asi este componente no va hacer reconocido

si abro la carpeta de mi componente y reviso la clase tengo una clase que no tiene nada

solo tiene un constructor

y el ngonInit que es la primera función que se ejecuta dentro de un componente

Cambiamos el html

<hr>
<h1>Este es mi-componente</h1>

Yo como puedo usar mi componente realmente

Lo que puedo hacer es utilizar su selector app-mi-componente

Puedo cambiarla mi-componente

Voy al componente principal

Y cargo la etiqueta mi-componente

<mi-componente></mi-componente>

Esto automáticamente en angular lo que hace es generar una nueva etiqueta

para nuestro html

Vuelvo a recompilar el proyecto

Con angular no solo podemos crear componentes

Hay muchas más cosas que podemos hacer

El segundo componente

<div style="border: 3px  solid red;">

    <mi-componente></mi-componente>
</div>

Para entender mejor los componentes

Además de esto puedo hacer más cosas

Vamos a trabajar con mi-componente

Puedo definir diferentes atributos

 edad: number;

y por buenas practicas de damos el valor en el constructor

  constructor() {
   this.edad = 18;
  }

alert ('componente mi-componente cargado')

para no hacerlo tan molesto

podemos colocar console

 console.log('componente mi-componente cargado')

El ng oninit es uno de los jumpt o uno de los métodos del ciclo de vida de los componentes

lo que hace es automáticamente cuando yo cargo un componente lanzar primero este método

  ngOnInit(): void {
    console.log('componente mi-componente cargado')
  }

Luego de lo paso a la vista al html

<h3>Tu edad es: {{edad}} </h3>

Ahora queremos mostrar si eres mayor de edad o no

No puedo meter condiciones de java-scrip ni nada

Se puede crear una etiqueta >div< que es genérica

Puedo utilizar *ngif es una directiva es una especie de atributo para una etiqueta html

Que me permite aplicarle una funcionalidad especial

En este caso la condición

<div *ngIf="edad >=18">

    Eres mayor de edad
</div>
<div *ngIf="edad < 18">
    Eres menor de edad
</div>

Si voy y le modifico el valor a la edad ya me aparece

Eres menor de edad

Puedo utilizar otra directiva de atributo

Es directiva que se llama ng style

Que me cambie el style.background

[style.background]

Podría hacer una condición

Para que automáticamente edad es mayor o igual a 18

Si no se cumple esta condición es esta es una condición ternaria

Me muestre un backgranud Red

="edad >=18 ?'green' : 'red'"
<h3 [style.background]="edad >=18 ?'green' : 'red'" >
    Tu edad es: {{edad}} </h3>

En angular se puede hacer infinidad de cosas

Puedo cambiar la edad dinámicamente

Con botones con un evento click

Y ese botón llamara a ese método

<button  (click)="aumentarEdad()">Aumentar</button>
<button  (click)="disminuirEdad()">Disminuir</button>

Le creamos los eventos

  aumentarEdad(){
   this.edad = this.edad +1;
   console.log("aumentar edad")
  }

  disminuirEdad(){
   this.edad --;
   console.log("disminuir edad")
  }