DEV Community

Cover image for Aplicando lazy loading a tu app
Derlys for kikstart.dev

Posted on • Edited on

4 2

Aplicando lazy loading a tu app

Requisitos

Haber hecho tu app básica, puedes tomar el ejemplo del tutorial # 1 de la serie "Introducción a Kikstart UI"

💡Tip

La manera en que generamos el siguiente componente
es mucho más eficiente ya que crea el componente con su
respectiva ruta y módulo.

Paso # 1

Creamos el componente posts con su módulo y rutas.

1: Ejecuta el siguiente comando:

ng g module posts --route posts --module app
Enter fullscreen mode Exit fullscreen mode

Paso # 2

Configuramos nuestra app para utilizar las colecciones del proyecto en firebase.

💡Recuerda

Antes de hacer este paso debiste haber instaladong add @angular/fire y configurar tu environment, como en el tutorial # 4 de la serie 1.

1: Busca la rutasrc/app.module.ts y escribe lo siguiente en la parte superior:

import {AngularFireModule} from "@angular/fire";
import {environment} from "../environments/environment";
import {AngularFirestoreModule} from "@angular/fire/firestore";
Enter fullscreen mode Exit fullscreen mode

2: Luego en el mismo archivo en el array de importscoloca lo siguiente:

 AngularFireModule.initializeApp(environment.firebase),
 AngularFirestoreModule
Enter fullscreen mode Exit fullscreen mode

Paso # 3

Mostrar la ruta

1: Busca la ruta src/app/app.component.tsen el array de link agrega un label más.

 links: UiLink[] = [
    { label: 'Home', path: '/' },
    { label: 'About', path: '/about' },
    { label: 'Contact', path: '/contact' },
    { label: 'Blog', path: '/posts' },
  ];
}
Enter fullscreen mode Exit fullscreen mode

Paso # 4

Creamos el servicio y lo usamos en nuestro componente.

1: Ejecuta el siguiente comando:

 ng g service posts/posts --skip-tests
Enter fullscreen mode Exit fullscreen mode

2: Configura el servicio en el archivo posts.service.ts y agrega lo siguiente en la parte superior:

import { Observable } from 'rxjs';
import { AngularFirestore } from '@angular/fire/firestore';
import { collectionData, docData, fromCollectionRef } from 'rxfire/firestore';
Enter fullscreen mode Exit fullscreen mode

💡Recuerda

Para cada paquete de firebase que utilices debes instalarlo en este caso usamos rxfire entonces lo instalamos.

3: Luego en el mismo archivo en la clase coloca lo siguiente:

export class PostsService {
  blogs: Observable<any[]>;
  collectionRef: any;

  constructor(private firestore: AngularFirestore) {
    this.collectionRef = this.firestore.collection('courses');
    this.blogs = collectionData(this.collectionRef.ref, 'id');
  }
}
Enter fullscreen mode Exit fullscreen mode

Paso # 5

Hacemos la lógica para usar nuestro servicio.

1: Busca la ruta src/app/posts.component.ts coloca lo siguiente en la parte superior:

import { PostsService } from './posts.service';
import { Observable } from 'rxjs';
Enter fullscreen mode Exit fullscreen mode

2:Luego en el mismo archivo en la clase coloca lo siguiente:

export class PostsComponent implements OnInit {
  courses$: Observable<any>;

  constructor(public service: PostsService) {
    this.courses$ = this.service.blogs;
  }

  ngOnInit(): void {}
}
Enter fullscreen mode Exit fullscreen mode

Paso # 6

Finalmente renderizamos los datos en nuestro componente

1: Busca la ruta src/app/posts/posts.component.html y pega lo siguiente:

  <div *ngIf="courses$ | async as posts">
  <div *ngFor="let post of posts">
    <img src="{{ post.author_img }}" />
    <a [routerLink]="['/posts', post.id]">
      <h2>{{ post.title }}</h2>
    </a>

    <h3>{{ post.description }}</h3>

    <h4>{{ post.author_name }}</h4>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Resumen

Generamos un componente post con su módulo y ruta,creamos su servicio y lo usamos en el templete.

Gracias por seguir este tutorial, si tienes algun comentario hazlo a través de mi twitter y con gusto te contestare.

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more