Temas:

1. Idea de los componentes de Angular

2. Componentes hijos y padres
3. Enviar información entre componentes
4. Navegación mediante el RouterModule
5. Módulos en Angular
6. LazyLoad
7. Servicios
8. Consumo de APIS
9. Estructura del proyecto de Angular

Instalar Git

Confirmar git instalado.

>git –version

git config --global user.name "Tu nombre"

git config --global user.email "Tu correo"

EJEMPLO:

Crear proyecto de Angular

base-angular , es el nombre del proyecto.

>> ng new base-angular

Ruta:

https://getbootstrap.com/docs/4.2/getting-started/introduction/

Revisar CSS

Copiar:
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-
GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
Ejecutar >> ng serve -o // similar de lo que hace ionic serve
Seleccionar el archivo app.component y borrar todo el contenido.
Crear componentes básicos, se crea dos componentes.

--dry-run es ejecutar el comando, pero no modifica los archivos.

Se crea el componete about dentro de la carpeta pages en la carpeta app

ng g c pages/about --dry-run

base-angular>ng serve -o
Inca, que no ha realizado cambios
ng g c pages/contact
 about.component.ts
Selector: selector: 'app-about'
Permite inyectar a otros componentes

ng g c pages/home
ng>>

g>> de generar

m>> módulo

ng g m appRouting –dry-run

Crear manejador de rutas

ng>>

g>> de generar

m>> módulo

flat>> no crea el directorio, coloca en el mismo lugar que lo llama

ng g m appRouting –flat –dry-run

ng g m appRouting –flat

Declarar rutas, las rutas son direcciones en las cuales mediante el url, va a decir qué componente
o qué página, en este caso quiere mostrar.

Se necesita importar >> Routes

Agregar:

import { Routes } from '@angular/router';

Definir las rutas:

path:**>>redirigir a una ruta no existente

Se necesita indicar a Angular que ahora tiene un sistema de rutas, pero para poder utilizar este
sistema de rutas, se necesita trabajar en la configuración del módulo.

Se utiliza el forRoot >> para rutas principales

Forchild >> para rutas hijas, más usada en ionic
Para que angula entienda la configuración se necesita exportarlo >> exports

Antes: del archivo app-routing.module.ts

Despúes:
Despúes de los cambios
Angular se de cuenta, que este es mi archivo de configuración de rutas, necesita importarlo en
el app.module.ts

app.module.ts

Se redirecciona a home
Se debe realizar el cambio en el archivo app.component. html

Antes:
Al redireccionar, siempre presentara la misma información

Para mostrar los componentes

<router-outlet></router-outlet>
Ayudara a redireccionar en la url

Crear un menú:
Crear un componente independiente
ng>>
g>> generar
c>>componente

ng g c components/menu –dry-run
ng g c components/menu

Revisar app.module.ts >>> la actualización

menu.component.html
Crear una lista

<!--Crear lista usar clases de Bootstrap-->

<ul class="list-group">
<a href="" class="list-group-item"> Ir a la página AAAA </a>
</ul>

En el app.component. html se puede usar el menu

<app-menu></app-menu>

<h1>App Componet</h1>

<app-menu></app-menu>

<router-outlet></router-outlet>
Routing, cuyo objetivo es permitir que en nuestra app haya rutas internas y la
navegación. El Routing es el responsable de reconocer la ruta que el usuario quiere
visualizar en cada momento

menu.component.html
<p>menu works!</p>
<!--Crear lista usar clases de Bootstrap-->
<ul class="list-group">
<a routerLink="/home" class="list-group-item"> Home </a>
<a routerLink="/about" class="list-group-item"> About </a>
</ul>

<p>menu works!</p>
<!--Crear lista usar clases de Bootstrap-->
<ul class="list-group">
<a routerLink="/home" class="list-group-item"> Home </a>
<a routerLink="/about" class="list-group-item"> About </a>
</ul>

menu.component.tss
menú component creemos un arreglo llamado Rutas

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

@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

rutas = [
{
name: 'Home',
path: '/home'
},
{
name: 'About',
path: '/about'
},
{
 name: 'Contact',
path: '/contact'
},
];

constructor() { }

ngOnInit(): void {
}

Esto se define en el menu.component.ts, se va a usar menu.component.html

En menu.component.html se va usar *ngFor de Angular. Se va a repetir por cada items en el
archivo menu.component.ts

menu.component.html

<p>menu works!</p>
<!--Crear lista usar clases de Bootstrap-->
<ul class="list-group">
<a routerLink="/home" class="list-group-item" *ngFor="let ruta of
rutas"> Home </a>

</ul>

En este momento se repite Home, se cambiara menu.component.html

<p>menu works!</p>
<!--Crear lista usar clases de Bootstrap-->
<ul class="list-group">
<a [routerLink]="ruta.path" class="list-group-item" *ngFor="let ruta
of rutas"> {{ruta.name}} </a>

</ul>
Modulo de paginas
app.module.ts . Tiene el menu, se va a organizar. Se creara una pagina para organizar
ng g m pages/pages --flat

Se modificara 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';

import { MenuComponent } from './components/menu/menu.component';

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

Modificar pages.module.ts
Antes

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

@NgModule({
declarations: [],
imports: [
CommonModule
]
})
export class PagesModule { }

Para exponer los cambios a todo el resto de la aplicación, se necesita exportar

exports: [
HomeComponent,
AboutComponent,
ContactComponent
]

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

@NgModule({
declarations: [
HomeComponent,
AboutComponent,
ContactComponent
],
exports: [
HomeComponent,
AboutComponent,
ContactComponent
],
imports: [
CommonModule
]
})
export class PagesModule { }

Ahora se debe importar el pages.module.ts, para que las aplicaciones conozca esos
componentes. El cambio en el archivo app.module.ts importar PagesModule
En el caso de agregar más páginas se lo realiza en pages.module.ts

import { NgModule } from '@angular/core';

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

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

import { AppComponent } from './app.component';
import { MenuComponent } from './components/menu/menu.component';
import { PagesModule } from './pages/pages.module';

@NgModule({
declarations: [
AppComponent,
//AboutComponent,
//ContactComponent,
//HomeComponent,
MenuComponent
],
imports: [
BrowserModule,
AppRoutingModule,
PagesModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Trabajar con Lazyload de PostsComponent
Crear carpeta en pages

posts

En la carpeta post se crea un módulo

--routing crear una configuración de archivos de rutas
>> ng g m pages/posts --routing --dry-run

La diferencia entre app-routing.module.ts y posts-routing.module es forRoot y forChild

@NgModule({
@NgModule({
imports: [ imports:
RouterModule.forRoot(routes) [RouterModule.forChild(routes)],
], exports: [RouterModule]
exports: [ })
RouterModule export class PostsRoutingModule { }
]
})
export class AppRoutingModule { }

Crear un componente nuevo en posts

>> ng g c pages/posts --dry-run
Observar el mensaje: UPDATE src/app/pages/posts/posts.module.ts

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { PostsRoutingModule } from './posts-routing.module';

import { PostsComponent } from './posts.component';

@NgModule({
declarations: [
PostsComponent
],
imports: [
CommonModule,
PostsRoutingModule
]
})
export class PostsModule { }

Se defini una ruta adicional en posts-routing.module.ts

Se quiere que el módulo con su definición de la ruta, con su definición del componente, sea
cargado de manera perezosa y va a ser cargado cuando sea necesario.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PostsComponent } from './posts.component';

const routes: Routes = [

{
path: '',
component: PostsComponent
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PostsRoutingModule { }

Se realizará el cambio en el archivo app-routing.module.ts

{
//cargar modulo
//loadChildren:'./pages/posts/posts.module#PostsModule'
path: 'posts',
loadChildren: () => import('./pages/posts/posts.module').then(m =>
m.PostsModule)
}

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './pages/home/home.component';
import { AboutComponent } from './pages/about/about.component';
import { ContactComponent } from './pages/contact/contact.component';

import { Router } from '@angular/router';

const routes: Routes = [

{
path: 'home',
component: HomeComponent
},
{
path: 'about',
component: AboutComponent,
},
{
path: 'contact',
component: ContactComponent
},
{
//cargar modulo
//loadChildren:'./pages/posts/posts.module#PostsModule'
path: 'posts',
loadChildren: () => import('./pages/posts/posts.module').then(m =>
m.PostsModule)
},
 {
path: '**',
redirectTo: 'home'
}
]

@NgModule({

imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }

Agregar en el archivo menu.component.ts, nueva opción

{
name: 'Posts',
path: '/posts'
},

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

@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

rutas = [
{
name: 'Home',
path: '/home'
},
{
name: 'About',
path: '/about'
},
{
 name: 'Contact',
path: '/contact'
},
{
name: 'Posts',
path: '/posts'
},
];

constructor() { }

ngOnInit(): void {
}

}
Servicios y Data Externa
posts.component.html

<p>posts works!</p>

<ul class="list-group">
<li class="list-group-item">
<h2>Titulo</h2>
<p>Hola Mundo</p>
</li>
</ul>

Se puede duplicar el <li class="list-group-item">

https://jsonplaceholder.typicode.com/posts

Para consumir una data: se debe colocar en un service, el cual nos va a permitir compartir toda
esta información en todos los componentes que lo requieran.
>>ng g s services/data --skip-tests
Para importar un modulo se necesitar agregar en app.module.ts

Este módulo tiene trae lo necesario para poder hacer peticiones http y traer ese servicio.
import {HttpClientModule } from '@angular/common/http';

import { NgModule } from '@angular/core';

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

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

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

import { HttpClientModule } from '@angular/common/http';

import { MenuComponent } from './components/menu/menu.component';

import { PagesModule } from './pages/pages.module';

@NgModule({
declarations: [
AppComponent,
//AboutComponent,
//ContactComponent,
//HomeComponent,
MenuComponent
],
imports: [
 BrowserModule,
AppRoutingModule,
PagesModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

En el arhivo data.service.ts relizar cambios

import { HttpClient } from '@angular/common/http';

import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class DataService {

constructor(private http: HttpClient) { }

 //crear un metodo
getPosts() {
return this.http.get('https://jsonplaceholder.typicode.com/posts');
}
}

Ir al archivo posts.component.tss
Antes:

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

@Component({
selector: 'app-posts',
templateUrl: './posts.component.html',
styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {

constructor() { }

ngOnInit(): void {
}

Cambios en post.component.ts

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

import { DataService } from '../../services/data.service';

@Component({
selector: 'app-posts',
templateUrl: './posts.component.html',
styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {

constructor(private dataService: DataService) { }

ngOnInit(): void {
this.dataService.getPosts().subscribe(posts => {
console.log(posts);
}
)
}
}

Mostrar Post en el componente

posts.component.ts

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

import { DataService } from '../../services/data.service';

@Component({
selector: 'app-posts',
templateUrl: './posts.component.html',
styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {

posts: any;
mensajes: any[] = [];

constructor(private dataService: DataService) { }

ngOnInit(): void {

this.dataService.getPosts()
.subscribe(res => {
this.posts = res;
for (let i = 0; i < this.posts.length; i++) {
i < 10 ? this.mensajes.push(this.posts[i]) : void (0);
console.log(this.posts);
}

});
}

}
Cambiar archivos posts.component.html
Antes

<p>posts works!</p>

<ul class="list-group">
<li *ngFor="let mensaje of mensajes" class="list-group-item">
<h2>{{mensaje.title}}</h2>
<p>
{{mensaje.body}}
</p>
</li>
</ul>
Quitar suscripción, se debe manipular los archivos:
posts.component.ts

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

import { DataService } from '../../services/data.service';

@Component({
selector: 'app-posts',
templateUrl: './posts.component.html',
styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {

//posts: any;
//mensajes: any[] = [];

mensajes: any;
constructor(private dataService: DataService) { }

ngOnInit() {
this.mensajes = this.dataService.getPosts();
}
}
posts.component

<p>posts works!</p>

<ul class="list-group">
<li *ngFor="let mensaje of mensajes | async" class="list-group-item">
<h2>{{mensaje.title}}</h2>
<p>
{{mensaje.body}}
</p>
</li>
</ul>

Angular async pipe y observables

Información:
https://www.arquitecturajava.com/angular-async-pipe-y-observables/

data.service.ts realizar cambios

https://www.learnrxjs.io/operators/utility/do.html

import { HttpClient } from '@angular/common/http';

import { Injectable } from '@angular/core';

import { tap } from 'rxjs/operators';

@Injectable({
providedIn: 'root'
})
export class DataService {

constructor(private http: HttpClient) { }

//crear un metodo
getPosts() {
return this.http.get('https://jsonplaceholder.typicode.com/posts')
.pipe(tap(console.log));
}
}