Curso de Angular 6 2018

Curso de Angular 6 2018

Instruido por:
Eduardo Ibarra
Eduardo Ibarra
Avanzado
9 horas de contenido
Curso de Angular 6 2018

Curso de Angular 6 2018

Progreso del curso:0/63contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/63contenidos(0%)

Introducción

Material Thumbnail

Introducción al Curso

02:24 min

Material Thumbnail

Introducción a Angular

05:39 min

Material Thumbnail

Configurando nuestro proyecto en Git y Github

03:10 min

Material Thumbnail

Introducción a Angular CLI y al proyecto de Platzinger

01:22 min

Material Thumbnail

Instalación del entorno de desarrollo en Mac OS

09:20 min

Material Thumbnail

Instalación del entorno de desarrollo en Windows e información acerca del editor que usaré (WebStorm) y alternativas

11:26 min

Material Thumbnail

Corriendo nuestra app en el navegador

04:34 min

Material Thumbnail

Reto: Desarrolla un tutorial escrito comparando Angular con otro Framework (Vue, React)

00:44 min

Definición de la estructura del App

Material Thumbnail

¿Qué hará nuestra app? ¿Cuál es su arquitectura? ¿De qué pantallas se compondrá? ¿Cuál será su look?

06:43 min

Material Thumbnail

Explorando el sistema de archivos

06:22 min

Material Thumbnail

¿Qué son y cómo generar los primeros componentes de nuestra app?

09:47 min

Material Thumbnail

Navegación básica entre componentes

10:36 min

Material Thumbnail

Componentes anidados: Creando un componente con nuestras rutas de navegación que funcione como menú

03:46 min

Reto: Varias conversaciones a la vez

00:13 min

Basics de Angular y TypeScript

Material Thumbnail

¿Cómo usar tipos de datos con TypeScript?

11:08 min

Material Thumbnail

Qué son las interfaces de TypeScript y su implementación

09:52 min

Material Thumbnail

NgFor aplicado en la lista de usuarios

06:43 min

Material Thumbnail

NgIf aplicado en la lista de usuarios

05:59 min

Material Thumbnail

Navegación con parámetros

07:27 min

Material Thumbnail

Accediendo a nuestros usuarios desde Conversation.ts

06:21 min

Material Thumbnail

Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes

08:45 min

Material Thumbnail

Pipes en Angular (date, number, json)

07:53 min

Material Thumbnail

Creando nuestro propio pipe para buscar entre nuestros contactos

11:56 min

Estilos

Material Thumbnail

¿Cómo usar estilos CSS y referenciar recursos?

05:44 min

Material Thumbnail

Instalando librerías usando npm (bootstrap y font-awesome) y Referenciando CSS en el angular.json

12:47 min

Reto: Cambiar ícono según estatus

00:10 min

Material Thumbnail

Implementando estilos en la pantalla de login

10:15 min

Material Thumbnail

Terminando de implementar los estilos de nuestra pantalla de login

12:06 min

Material Thumbnail

Implementando estilos en el navbar

10:41 min

Material Thumbnail

Implementando estilos en la pantalla de home

11:11 min

Material Thumbnail

Implementando estilos en home, lista de contactos

10:46 min

Material Thumbnail

Implementando estilos en profile

11:12 min

Reto: Estilos en la pantalla de conversación

00:07 min

Material Thumbnail

Usando ngClass para añadir estilos dinámicos

04:54 min

Reto: Mejorar estilos en la pantalla de conversación

00:13 min

Acceso a datos remotos y login

Material Thumbnail

¿Qué es Firebase? Creando nuestro proyecto

03:56 min

Material Thumbnail

Diferencia entre conexión por sockets y HTTP

04:28 min

Material Thumbnail

Instalación y setup de la librería AngularFire a través de npm

06:06 min

Material Thumbnail

Login/Registro de usuarios con email y password

13:49 min

Material Thumbnail

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

20:40 min

Material Thumbnail

Guards para verificar Firebase auth

14:00 min

Creando un CRUD implementando un API REST HTTP (con diversos backends)

02:11 min

Reto: Implementar API HTTP

00:16 min

Opciones y subida de imágenes

Material Thumbnail

Perfil de usuario

10:05 min

Material Thumbnail

Seleccionar fotos usando una librería para image cropping

09:28 min

Material Thumbnail

Guardando las imágenes de perfil en nuestra base de datos de firebase

15:00 min

Conversación

Material Thumbnail

¿Cómo resolver el problema de comunicación en tiempo real?

03:35 min

Material Thumbnail

Enviando un mensaje (con reproducción de sonido)

16:56 min

Material Thumbnail

Mostrando conversación

12:51 min

Material Thumbnail

Enviando un zumbido (con reproducción de sonido y animación)

15:02 min

Reto: Envía una foto

00:11 min

Amigos

Material Thumbnail

Planeación previa para la característica, ¿cómo generaremos las solicitudes?

02:56 min

Material Thumbnail

Enviando una solicitud de amistad

22:26 min

Material Thumbnail

Generando el modal de solicitud de amistad

26:13 min

Material Thumbnail

Aceptando solicitudes de amistad

16:10 min

Material Thumbnail

Mostrando sólo contactos que son amigos

07:56 min

Material Thumbnail

Componentes anidados (con paso de parámetros)

10:28 min

Reto: Mensaje personal en Solicitud de Amistad

00:19 min

Deploy

Material Thumbnail

Creando un wrapper para desktop, usando Electron

28:34 min

Reto: Dándole Características PWA a nuestra App

00:26 min

Material Thumbnail

Exportando app para web, complementando con Firebase Hosting

06:37 min

nuevosmás votadossin responder
Cristóbal De la Piedra
Cristóbal De la Piedra
Estudiante

Hola , tengo el siguiente problema y estoy atascado:

al hacer los cambios indicados para anidar el menu obtengo el siguiente error en consola:

error :

<  
      src/app/app.component.ts:5:165   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template ofcomponent AppComponent.
    
    
    ERROR in src/app/app.component.html:1:1 - error NG8001: 'app-menu' isnot a known element:
    1. If'app-menu' is an Angular component, then verify that it is part of this module.
    2. If'app-menu' is a Web Componentthen add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this componentto suppress this message.
    
    1 <app-menu></app-menu>
      ~~~~~~~~~~~~~~~~~~~~~
    
      src/app/app.component.ts:5:165   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template ofcomponent AppComponent.>

Adjunto mis archivos principales (Estoy en angular 10), se agradece cualquier orientación.

index.html

<<!doctypehtml><htmllang="en"><head><metacharset="utf-8"><title>Platzinger</title><basehref="/"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="icon"type="image/x-icon"href="favicon.ico"></head><body><app-root></app-root></body></html>
>

app.modules.ts

<import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component';import { LoginComponent } from './login/login.component';import { HomeComponent } from './home/home.component';import { ConversationComponent } from './conversation/conversation.component';import { ProfileComponent } from './profile/profile.component';import {RouterModule, Routes} from  '@angular/router'; // cristobal constappRoutes: Routes =  [
  {path:'',component: HomeComponent},
  {path:'home',component: HomeComponent},
  {path:'login',component: LoginComponent},
  {path:'conversation',component: ConversationComponent},
  {path:'profile',component: ProfileComponent },
  
];


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent,
    ConversationComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
>

app.components.ts

<import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'platzinger';
}
>

menu.component.ts

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

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

  constructor() { }

  ngOnInit(): void {
  }

}
>
1
Humberto Eliezer
Humberto Eliezer
Estudiante

Que plugin usan para que detecte los metodos del TS vs el HTML?

1
saulo bravo
saulo bravo
Estudiante

buenas me sale este error
DevTools failed to parse SourceMap
quien me puede ayudar

gracias

1
Mauricio Peña
Mauricio Peña
Estudiante

Hola a todos me aparece este error:
Captura de pantalla 2020-04-02 a la(s) 9.03.29 a.m..png

2
patriciavaldebenitop
patriciavaldebenitop
Estudiante

hola me aparece ““Doctype must be declared first.”” en menu.component.html
en la consola ( ver imagen adjunta)
tengo DOCTYPE EN index.html
porque sucede ? alguien me puede ayudar ! =
Screenshot from 2020-02-12 14-55-06.png

1
patriciavaldebenitop
patriciavaldebenitop
Estudiante

hola me aparece "“Doctype must be declared first.”"
en la consola
tengo DOCTYPE EN index.html
porque sucede ? alguien me puede ayudar ! =
Screenshot from 2020-02-12 14-55-06.png

2
Zolider
Zolider
Estudiante

Tengo esta duda…
¿Qué librería conocen en VSC que importe en automático los modulos?

Por ejempo este que acabamos de instalar, el pequeño detalles está en cuando escribo la librería en app.module.ts en el objeto extends y este no hay manera de importar en automático como veo que lo hace Eduardo

2
stiag0
stiag0
Estudiante

yo instale el angularFire, intente importarlo desde los módulos, que ya verifique estuviesen en los node_modules, aun así dice: “Property ‘auth’ does not exist on type ‘AngularFireAuthModule’.”
lo importe con esta ruta:
import { AngularFireAuthModule } from ‘@angular/fire/auth’;

2
Sergio Eduardo Velandia Obando
Sergio Eduardo Velandia Obando
Estudiante

Una ayuda por favor: tengo el siguiente problema, al escribir la sentencia con predicate dice: cannot find name ‘predicate’ porque se genera y como puedo resolverlo

1
Mauricio Quiñones
Mauricio Quiñones
Estudiante

Buena tarde, al correr ng buid obtengo el siguiente error:
“An unhandled exception occurred: Call retries were exceeded
See “C:\Users\andro\AppData\Local\Temp\ng-w4btjR\angular-errors.log” for further details.”, sin embargo la carpeta se crea pero sin el archivo .html. Que puedo hacer para solucionar esto?

1