# Angular
## Versiones estables actuales:
**Angular:** 10.1.4
**nodejs:** 12.18.4
---
## Comandos
Checar versión de Angular:
```
ng --version
```
Checar versión de node:
```
node -v
```
Una vez instalados nodejs y npm disponible:
```
npm i -g @angular/cli
```
Después instalar typescript:
```
npm install -g typescript
```
:warning: sólo la primera vez o cuando se agreguen nuevas dependenciasen el directorio del proyecto :warning::
```
npm install
```
Iniciar:
```
ng serve
```
---
## Conceptos de Angular
[Glosario de Angular](https://angular.io/guide/glossary//)
[Conceptos básicos de Angular](https://angular.io/guide/architecture)
---
## Arquitectura de Angular:
Consiste en 8 bloques básicos.
---
### **Module**
* Un *Module* es una manera organizada de relacionar componentes, servicios, directrices y pipes con una funcionalidad específica.
* es un bloque de código hecho para realizar cierta tarea.
* Pueden existir varios *Modules* en una app, pero debe existir al menos un *Module* raiz. *Root Module*, que por convención debe ser llamado *AppModule*.
* Puede ser exportado e importado a otros módulos
* *@NgModule* es usado para declarar *Class* como un Module.
**Ejemplo:**
```
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
// AppModule Class is now defined as Module : @NgModule
```
* Para identificar *Root Module* es el que importa *BrowserModule*. Otros *modules* de la misma app importan *CommonModule*.
* `imports:[...]` - define un array de los *modules* requeridos para construir la app aquí
* `declarations:[...]` - define componentes, directrices y pipes para este *module*
* `bootstrap:[...]` - define el componente raíz del *module*.
---
### **Component**
* Es el bloque básico de angular app
* No es más que una clase con metadatos.
* Actua como mediador entre la app/lógica y la app del layer de presentación
* Soporta la parte de vista de la app y tiene la lógica de la página
* Puede renderizar la vista por sí mismo basado en la *dependency injection*
* Sólo puede haber un *component* por elemento DOM.
* El comportamiento del elemento puede ser manipulado por las propiedades asociadas con el componente correspondiente.
* puede ser identificado usando el decorador *@Component*.
* Los componentes pueden ser creados, actualizados o destruidos basado en las acciones del usuario en la pagina.
* *selector* es la propiedad del elemento que usamos para decirle a Angular donde crear e insertar una instancia de este componente.
* *template* es una forma de HTML que le dice a Angular que necesita renderizar en el DOM
**Ejemplo Component**
Renderizar un `Hello, World!` en el browser. Angular buscara el elemento `<my-app>`en el documento HTML y lo remplazará con el contenido del template.
```
File: app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<p>Hello, World!</p>',
})
export class AppComponent{}
File: index.html
............
<body>
<my-app> Loading... </my-app>
</body>
............
```
en index.html, la etiqueta <my-app></my-app> reemplazará el contenido por lo que está en *template* : *<p>Hello, World!</p>*
#### Crear un componente
`ng generate component "nombreComponent"`
---
### Template
Es un código de HTML que crea la vista para el componente y puede ser manipulada dinamicamente.
Hay 2 maneras de definir templates:
* template
Cuando `template` es usado, define el código en la misma fila:
```
import {Component} from 'angular/core';
@Component({
selector: 'greet',
template: `
//this defines template for 'greet' component
<h1>Hello There!!!</h1>
<h2>Have a nice day.</h2>
`
})
export class GreetApp {}
```
* templateURL
Cuando `templateURL` es usado, el código es definido en diferentes archivos y URLs de los archivos correspondientes que son referidos:
```
import {Component} from 'angular/core';
@Component({
selector: 'greet',
templateUrl: 'app.component.html'
//this defines "URL to the external file"
that defines template for 'greet' component
})
export class GreetApp {}
```
En *template* cambiar las comillas '' por las invertidas:
> [``] esto permite especificar HTML en múltiples líneas.
---
### Metadata
Es vital en el procesamiento del código y lo mostrado en pantalla. *Metadata* significa datos de datos, lo que da más información de los datos.
```
ejemplo: var age : number = 20;
// 20 is data
// "number" is metadata, as it tells information of "data", its type, its size etc.
```
Lo mismo pasa con las clases, en angular todo es considerado como una clase simple hasta que se declarara metadata **(@Component, @pipe @decorator o @injectable)** en la clase.
---
### Data Binding
- [Data Binding](https://hackmd.io/@c7jyUbaqRp-B_59a77zwbA/BJBLAyqUv)
---
### Directives
Es una clase con el decorador `@Directive`. Hacen que el elemento DOM sea dinámico al cambiar su comportamiento.
Hay 3 tipos de Directives: `Structural`, `Attribute` y `Component`.
#### Structural
Manipula los elementos DOM. Elimina o actualiza los elementos. **Esto cambia la estructura de la pagina Web.**
Algunas directivas structurales de Angular son: `Nglf, NgFor y NgSwitch`.
#### Attribute
Agregan estilo al manipular los Atributos del elemento DOM. **No cambian la estructura de la pagina Web.**
`NgStyle` y `NgClass` son algunas directivas de Angular.
#### Generar Directive
```
ng generate directive "nombreDirective"
```
---
### Services & Dependency Injection
- [Services](https://hackmd.io/@c7jyUbaqRp-B_59a77zwbA/HJOTRG9Iw)
---
Sign in with Wallet
Connect another wallet