Cursos Empresas Blog Live Conf Precios

Detalles de preguntas para el proyecto

Clase 7 de 75 • Curso de MEAN 2017

Contenido del curso

Introducción al Curso de MEAN

El Frontend de PlatziOverflow

El Backend de PlatziOverflow

La Base de Datos de PlatziOverflow

Despliegue a producción

Contenido Bonus

Resumen

Existen dos maneras de organizar la estructura de los archivos dentro de nuestro proyecto:

1. Siguiendo la funcionalidad de cada uno de los archivos. 2. Tenemos ciertos modelos, ciertas pantallas, ciertos componentes o ciertos servicios. Podemos ir almacenando todo en una carpeta según el tipo.

Detalles de preguntas para el proyecto

Obtén respuestas inmediatasProfundiza lo que acabas de ver

Comentarios

Sergio Toshio Minei

student•

Componentes

Para crear un componente, se va a crear un archivo con la siguiente nomenclatura: mi-componente.component.ts.

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

@Component({
  selector: 'app-mi-componente',
  templateUrl: './mi-componente.component.html'
})

export class MiComponenteComponent {}

El html del componente se va a escribir en mi-componente.component.html.

<div>hola mundo</div>

Para usar el componente, se debe de importar dentro del componente principal.

import { MiComponenteComponent } from './mi-componente.component';

@NgModule({
  //...
  declarations: [
    MiComponenteComponent
  ]
  //...
})

export class AppModule { }

Luego se puede usar en el html de la siguiente manera:

<app-mi-componente></app-mi-componente>

Pueden ver el resumen completo del curso aquí.
Pueden ver mi lista de resúmenes aquí.

Edgar Muñoz

student•

Hay alguna ventaja en crear los componentes manualmente sobre usar el generador de angular-cli???

José Rodríguez

student•

Quizás con angular-cli es un poco más rápido ya que genera todos los archivos que necesitas, esa sería la ventaja que le veo. Saludos.

Eddy Arellanes

student•

Tiempo y es menos tedioso, además que te equivocas menos

Jesus Sandrea

student•

😦 tengo este error ‘mat-icon’ is not a known element:

Jesus Sandrea

student•

ya lo solucione tienen que declararlo en los imports!

Memo Mogollan López

student•

Yo lo importe aparte:

import { NgModule } from '@angular/core';
import {
  MatToolbarModule
} from '@angular/material/toolbar';

import {MatIconModule} from '@angular/material/icon';

const modules = [
  MatToolbarModule,
  MatIconModule
];

@NgModule({
  imports: modules,
  exports: modules
})

export class MaterialModule {}

Y así lo hice en el app.component.html

<mat-toolbar color="primary">
  <span>Framework v1.0</span>
  <span class="space"></span>
  <i class="material-icons">account_circle</i>
</mat-toolbar>

Carlos Enrique Ramírez Flores

student•

generar el componente con CLI

ng generate component questions/question-detail --skip-import

Walter Lensinas

student•

Código del proyecto:

Jorge Leonardo Céspedes Tapia

student•

No me quedó claro el esquema de question que se va utilizar.

Alexander Marenco

student•

Va excelente este curso :3

Mike Nieva

teacher•

Todo excelente.

Alexander Flores

student•

que tenes instalado en atom para que te muestre los iconos de git, nodejs?

Alejandro Sanabria

student•

Sacha debe tener instalado este paquete

Alexander Flores

student•

gracias! lo voy a instalar

Jorge Luis De Gaetano

student•

Hola. me surge este error y estoy trabado aca, me podrian ayudar, por favor.

Uncaught Error: Unexpected directive 'QuestionDetailComponent' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.js:466)
    at eval (compiler.js:15088)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata

app.module.ts

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


import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';

import { QuestionDetailComponent } from './question/question-detail.component';

import 'hammerjs';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    QuestionDetailComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }```

question-detail.component.ts

import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-question-detail’,
templateUrl: ‘./question-detail.component.html’
})
export class QuestionDetailComponent {
}

Diego Forero

Team Platzi•

Intenta mover QuestionDetailComponent a declarations ya que es un componente y no un modulo.

Revisa el minuto 6:05 del video.

Jorge Luis De Gaetano

student•

Hola Gollum23. Ya lo solucione, muchas gracias por tu ayuda.

Agustin David Luzenti

student•

Hola! Estoy teniendo un problea. Si bien el proyecto me compila de manera correcta, en Atom estoy obteniendo los siguientes errores en el archivo ‘question-detail.component.ts’

Error Typescript Argument of type ‘{ lector: string; mplateUrl: any; ‘./question-detail.component.html’: any; }’ is not assignable to parameter of type ‘Component’. Object literal may only specify known properties, and ‘lector’ does not exist in type ‘Component’. 4:5
Error Typescript Invalid character. 5:16
Error Typescript Property assignment expected. 5:17
Error Typescript ‘:’ expected. 5:52

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

@Component({
  selector: 'app-question-detail',
  templateUrl: './question-detail.component.html'
})
export class QuestionDetailComponent {
}

Diego Forero

Team Platzi•

Revisa que no tengas ningún carácter extraño oculto en la linea 5 en la columna 16, parece que ese el problema ya que no esta tomando las dos primeras letras de las keys.

Angel Eduardo Trujillo Alvarado

student•

me marca un error en el archivo material.modulets el error es el siguiente: “Cannot find name ‘Module’. Did you mean ‘module’?” segun esto es en la linea 3 y no encuentro como resolverlo pero no me ha causado algun error con la aplicación

import { NgModule } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';

const modules = [
  MatToolbarModule,
  MatIconModule
];

@NgModule({
  imports: modules,
  exports: modules
})

export class MaterialModule {}

Diego Forero

Team Platzi•

Puedes compartir el traceback completo del error, probablemente el error no está como tal en ese archivo, si no en un archivo que es invocado o llamado por material.modules

Quimey Lucas Marquez

student•

Por que es que Sacha no usa el CLI para crear componentes y en vez de eso lo hace a mano?

Diego Forero

Team Platzi•

Son formas de trabajar, aprender a hacer los componentes a mano te ayuda a aprender la estructura y como se hacen las cosas.

Las dos son formas validas de trabajar, si quieres usar cli no hay problema