Proyecto en Angular Hecho en Clase

Proyecto en angular hecho en clase
Creamos nuestro primer proyecto y ponemos
ng new miproyecto
Seleccionamos que queremos que angular maneje las rutas
Y seleccionamos que usaremos estilos css
Cuando termine de cargar, nuestro proyecto nos queda de esta manera.

Dentro de la carpeta app vamos a poner nuestros componentes, clases y servicios.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'miproyecto';
}
En este caso, app-component.ts nos indica que se importa el componente Component de

angular, básicamente es un decorador, que le indica el de donde va a sacar el template y los
estilos.
Además de que vamos a usar un selector que va a mostrar lo que se encuentra en ese
componente, el cual vamos a usar de etiqueta, en este caso <app-root> el cual se va a mostrar
en el index.html
<body>
<app-root></app-root>
</body>
Es decir, todo lo que pongamos en app.component.html se va a mostrar en el body del

index.html
Si ponemos ng serve nos mostrara lo creado

Cuando creamos un proyecto en angular, nos crea esta página por defecto.
Cuando queramos generar un nuevo componente podemos hacer de la siguiente manera
ng generate component
y nos pide que le pongamos el nombre del componente o simplemente
ng generate component nombredelcomponente
Cuando generamos un componente Angular crea una carpeta dentro de app con el nombre del
componente y sus archivos.
ng generate component navbar
La cual usaremos para poner una barra de navegación.
Si vemos, nos crea el css , el html, el .ts y un archivo spec.ts.
El archivo spec.ts es para hacer testing, no vamos a abordarlo en este curso.
Creamos dos componentes nuevos que van a ser inicio y proyectos
ng generate component inicio
ng generate component proyectos
El cual se crearan sus respectivas carpetas.
Cuando querramos usar rutas en angular con routerlink, tenemos que declarar las rutas, de
que componente las sacamos en el archivo app-routing.module.ts (para navegar entre
componentes)
Donde se declarara la ruta con el componente especifico…
En este caso la ruta nula ira a inicio,
La ruta inicio mostrara el componente InicioComponent
La ruta proyecto mostrara el componente ProyectoComponent
Tambien tenemos la importación de modulos de tipo TypeScript y de Tipo Angular

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ProyectosComponent} from './proyectos/proyectos.component'
import { InicioComponent } from './inicio/inicio.component';
const ROUTES: Routes = [

{ path: '', redirectTo: '/inicio', pathMatch: 'full' },
{ path: 'inicio', component: InicioComponent} ,
{ path: 'proyectos', component: ProyectosComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Vamos al componente navbar y empezemos a codificar el navbar.component.ts
Debajo del constructor crearemos una variable ruta que va a ser un arreglo de strings.
Y como este componente de angular implementa OnInit, que es una función que dice que;
haga algo ni bien se cree el componente… debajo de OnInit le asignamos el los valores al
arreglo de rutas (también podemos hacerlo cuando declaramos la variable)
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
constructor() { }
ruta:string[];
ngOnInit() {
this.ruta = ["inicio" , "proyectos"]
Como habíamos dicho en la clase, la importación de Component nos permite decirle al

componente que, el selector (la etiqueta que use en el html) va a ser app-navbar <app-
navbar></app-navbar>
El template que use va a dirigir a navbar.component.html … Esto indica que va a mostrar ese
código fuente html.
Y que use los estilos predefinidos en navbar.component.css.
Ahora en el archivo navbar.component.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="/">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav" *ngFor="let item of ruta">
<a class="nav-link" [routerLinkActive]="['active']"
routerLink={{item}}>{{item}}</a>
</div>
</div>
</nav>
En el html podemos utilizar la directiva *ngFor para recorrer un arreglo y poder mostrar el
código diciéndole …
Let ítem of ruta
Donde ítem es la variable que se va a usar en la iteración, de ruta (instancia que se encuentra
en componente)
La recorra y podemos mostrarla. De la manera {{ítem}}
También podemos usar las rutas de la forma routerLink=’ruta’, pero de la forma que se
muestra el código podemos tomar una ruta del arreglo ruta
El código estatico a este código seria asi:
<a class="nav-link" [routerLinkActive]="['active']" routerLink='inicio'
>inicio</a>
<a class="nav-link" [routerLinkActive]="['active']"
routerLink='proyectos'
>proyectos</a>
Si hubieran más enlaces habría que escribir más código estático.
Ahora, como lo metemos a nuestra pagina principal ¡!! ¿??
Fácil. En el app.component.html le agregamos el <app-navbar></app-navbar>

<header>
<div class="container">
<app-navbar></app-navbar>
</div>
</header>
También le agregamos el manejador de rutas …
<router-outlet></router-outlet>
Y nos queda asi:
<header>
<div class="container">
<app-navbar></app-navbar>
</div>
</header>
<router-outlet></router-outlet>
Previo a esto y a no olvidarse … en el modulo de app tenemos que importar los componentes
NO OLVIDARSE DE IMPORTAR LOS COMPONENTES DE LA FORMA TYPESCRIPT Y ANGULAR
App.module.ts
import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { InicioComponent } from './inicio/inicio.component';
import { ProyectosComponent } from './proyectos/proyectos.component';
@NgModule({
declarations: [
AppComponent,
NavbarComponent, //componente navbar
InicioComponent, //componente inicio
ProyectosComponent//componente proyectos
],
imports: [
BrowserModule,
AppRoutingModule //modulo de rutas
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Bien ya tenemos el navbar y nos quedo re lindo, ahora vamos a hacer nuestra pagina de inicio.
Que es la que vamos a presentar primero.
Comenzamos por el componente inicio.component.ts
Creamos una variable frase de tipo any y le asignamos mensaje y autor como strings.
Básicamente para usar la directiva *ngIf en html.
También creamos una variable mostrar y le damos el valor true.
@Component({
selector: 'app-inicio',
templateUrl: './inicio.component.html',
styleUrls: ['./inicio.component.css']
})
export class InicioComponent implements OnInit {
mostrar = true;
frase: any = {
mensaje: 'Bienvenido al inicio del curso de Angular',
autor: 'Claudio'
}
constructor() { }
ngOnInit() {
}
Listo, vamos al html.
Inicio.component.html
<main role="main" class="container">

<div class="starter-template">
<div>
<h1>*ngIf</h1>
<hr>
<div *ngIf="mostrar" class="card text-dark">
<div class="card-body">
<h5 class="card-title"> {{ frase.autor }}</h5>
<p class="card-text">{{frase.mensaje}}</p>
</div>
<hr>
</div>
<button (click)="mostrar = !mostrar" class="btn btn-outline-
primary">Mostrar/Ocultar</button>
</div>
</div>
</main>
Aca utilizaremos la directiva *ngIf, preguntando si mostrar es verdadero, como es un boolean
no necesitamos consultar eso …
Un ejemplo:
*ngIf: mostrar = true (si mostrar es true esto da true)
*ngIf: mostrar = true (si mostrar es false esto da false)
Por ende vamos a evaluar directamente el mostrar
Y ponemos un botón que cambie el valor de mostrar, cuando le demos click cambia el valor de
mostrar de true a false y de false a true.
Esta directiva va a mostrar lo que hay dentro de la etiqueta div si se cumple la condición del if
(básicamente lo que hace un if)
Ahora vamos a lo mas complicado.
El componente proyecto.
Vamos a crear una clase en typescript para hacer el modelo de un proyecto.
Con ng generate class proyecto/proyecto
De esta forma generamos la clase dentro del directorio proyecto para que quede mas
ordenado (puede estar en cualquier lado de la aplicación)
E iremos al archivo proyecto.ts
export class Proyecto {

name:string;
urlImagen:string;
constructor (nombre:string,url?:string){
if (url) {
this.urlImagen = url;
this.name = nombre;
}
else {
this.urlImagen = "";
this.name = nombre;
}
}
}
Creamos la clase con su constructor que puede recibir una el parámetro url opcional.
Y cuando llamamos a ese constructor le ponemos asignamos los valores recibidos a la instancia
Vamos a el componente proyectos proyectos.component.ts
Importamos la clase proyecto de forma de TypeScript.
La instanciamos y le asignamos los valores.
En este caso hacemos un arreglo de tipo proyecto (misProyectos) … para tener varios
proyectos

import { Proyecto } from './proyecto';
@Component({
selector: 'app-proyectos',
templateUrl: './proyectos.component.html',
styleUrls: ['./proyectos.component.css']
})
export class ProyectosComponent implements OnInit {
misProyectos:Proyecto[] = [{name:"Portfolio",
urlImagen:"https://image.freepik.com/vector-gratis/diseno-fondo-
portfolio_1300-242.jpg"}, {name:"Software",
urlImagen:"https://chiefexecutive.net/wp-
content/uploads/2018/11/AdobeStock_92323963-compressor-1024x662.jpeg"}]
constructor() { }
ngOnInit() {
let proyecto:Proyecto = new Proyecto("Maiame",
"https://image.freepik.com/vector-gratis/diseno-fondo-portfolio_1300-
242.jpg")
this.misProyectos.push(proyecto)
agregarProyecto(nombre:string,url:string){
let proyecto:Proyecto = new Proyecto(nombre, url)
this.misProyectos.push(proyecto)
}
Podemos hacer una función para asignarle los valores, podemos asignarle los valores de forma
Dentro del OnInit podemos crear una variable de tipo proyecto y usar el método push para
agregarlo al arreglo.
O si queremos podemos hacer una función que le pasamos los valores a asignar y se los
asignamos.
Tenemos que tener en cuenta que esa función la tenemos poner en el OnInit si queremos que
esto suceda.
Estas son unas de las formas de solucionarlo.
Ahora lo ultimo, que mostramos en el componente Proyectos.
Modificamos proyectos.component.html.
<main role="main" class="container">

<h1>*ngFor</h1>
<hr>
<div *ngFor="let proyecto of misProyectos" class="starter-template">
<h1>{{proyecto.name}}</h1>
<img src={{proyecto.urlImagen}} class="img-fluid" alt="Responsive
image">
</div>
</main>
<div>
Usamos la directiva *ngFor y traemos los proyectos.
Mostramos el nombre en un h1
Y mostramos la imagen cargada en la urlImagen.
De forma que la etiqueta imagen reciba la url cargada la variable proyecto
Y dentro de index.html que esta fuera de la carpeta app le tenemos que decir que vamos a
usar bootstrap y que vamos a usar la app.
Utilizando la etiqueta de <app-root></app-root>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Miproyecto</title>
<base href="/">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.mi
n.css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Y nos queda nuestra primera página sencilla hecha en angular.

Proyecto en Angular Hecho en Clase

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Proyecto en Angular Hecho en Clase

Încărcat de

Drepturi de autor:

Formate disponibile

Proyecto en angular hecho en clase

Creamos nuestro primer proyecto y ponemos

Seleccionamos que queremos que angular maneje las rutas

Y seleccionamos que usaremos estilos css

Cuando termine de cargar, nuestro proyecto nos queda de esta manera.

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

En este caso, app-component.ts nos indica que se importa el componente Component de

Es decir, todo lo que pongamos en app.component.html se va a mostrar en el body del

Si ponemos ng serve nos mostrara lo creado

Cuando queramos generar un nuevo componente podemos hacer de la siguiente manera

y nos pide que le pongamos el nombre del componente o simplemente

ng generate component nombredelcomponente

ng generate component navbar

La cual usaremos para poner una barra de navegación.

Si vemos, nos crea el css , el html, el .ts y un archivo spec.ts.

El archivo spec.ts es para hacer testing, no vamos a abordarlo en este curso.

Creamos dos componentes nuevos que van a ser inicio y proyectos

ng generate component inicio

ng generate component proyectos

El cual se crearan sus respectivas carpetas.

Donde se declarara la ruta con el componente especifico…

En este caso la ruta nula ira a inicio,

La ruta inicio mostrara el componente InicioComponent

La ruta proyecto mostrara el componente ProyectoComponent

Tambien tenemos la importación de modulos de tipo TypeScript y de Tipo Angular

const ROUTES: Routes = [

Vamos al componente navbar y empezemos a codificar el navbar.component.ts

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

Como habíamos dicho en la clase, la importación de Component nos permite decirle al

Y que use los estilos predefinidos en navbar.component.css.

Ahora en el archivo navbar.component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">

Let ítem of ruta

La recorra y podemos mostrarla. De la manera {{ítem}}

El código estatico a este código seria asi:

<a class="nav-link" [routerLinkActive]="['active']" routerLink='inicio'

Si hubieran más enlaces habría que escribir más código estático.

Ahora, como lo metemos a nuestra pagina principal ¡!! ¿??

Fácil. En el app.component.html le agregamos el <app-navbar></app-navbar>

También le agregamos el manejador de rutas …

Y nos queda asi:

NO OLVIDARSE DE IMPORTAR LOS COMPONENTES DE LA FORMA TYPESCRIPT Y ANGULAR

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

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

Comenzamos por el componente inicio.component.ts

También creamos una variable mostrar y le damos el valor true.

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

Listo, vamos al html.

<main role="main" class="container">

*ngIf: mostrar = true (si mostrar es true esto da true)

*ngIf: mostrar = true (si mostrar es false esto da false)

Por ende vamos a evaluar directamente el mostrar

Ahora vamos a lo mas complicado.

Vamos a crear una clase en typescript para hacer el modelo de un proyecto.

Con ng generate class proyecto/proyecto

E iremos al archivo proyecto.ts

export class Proyecto {

Importamos la clase proyecto de forma de TypeScript.

La instanciamos y le asignamos los valores.

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

Ahora lo ultimo, que mostramos en el componente Proyectos.

<main role="main" class="container">

Usamos la directiva *ngFor y traemos los proyectos.

Y mostramos la imagen cargada en la urlImagen.