Diferencia entre revisiones de «Usuario:ManuelRomero/angular»

De WikiEducator
Saltar a: navegación, buscar
(Tecnologías usadas en Angular)
Línea 122: Línea 122:
 
#templateURL
 
#templateURL
 
#styleUF
 
#styleUF
 +
 +
 +
;Creo un módulo
 +
*Juego con el ts para dar comportamiento, html para visualizarlo (de  ese componente)
 +
*css para estilos (de ese componente, que es como si fuera una página web independiente que luego incorporaremos como parte de nuestro proyecto
 +
*Agrego el módulo en el fichero '''''app.component.ts'''''
 +
<source lang=javascript>
 +
  import { HeroesComponent } from './heroes/heroes.component';
 +
</source>
 +
*En el componente especificamos la forma en el que lo vamos a referencias
 +
<source lang=javascript>
 +
@Component({
 +
  selector: 'app-heroes',
 +
  templateUrl: './heroes.component.html',
 +
  styleUrls: ['./heroes.component.css']
 +
})
 +
</source>

Revisión de 21:30 20 may 2019



Instalar angular cli
  • Cuidar versiones de node y de npm
  • Yo acutalicé
 curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash -
 sudo apt-get install -y nodejs
  • Ahora verificamos versiones
➜ nodejs --version
v11.13.0
➜ npm --version
6.7.0
➜


 
 npm install -g @angular/cli
Crear un wordspace e inicializar la aplicación
➜   ng new my_first_angular_app
  • Durante la creación del nuevo proyecto, me salen una serie de errores al final, relacionados con pemisos del tipo
Unhandled rejection Error: EACCES: permission denied, mkdir '/home/manuel/.npm/_cacache/index-v5/bb/79'
  • Busco en stackoverflow y soluciono



sudo chown -R $USER:$GROUP $HOME/.npm
➜sudo chown -R $USER:$GROUP $HOME/.config
  • Vuelvo a crear el proyecto y todo correcto
Abriendo el servidor
  • Entramos en el directorio del nuevo proyecto
  • Levantamos un servidor web que lleva el proyecto incoporado, lo levanta bajo el puerto 4200
cd my-app 
➜  my-app git:(master) ng serve --open
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Angular app base.png

  • Al crear el nuevo proyecto se crea un directorio con una gran estructura de carpetas y ficheros

Tree dir.png

  • Dentro de ella tenemos un directorio app que es dónde están los principales componentes de la aplicación

Ficheros proyect angular.png

  • La forma de construir una apliación Angular es con componentes
  • El componente base es AppComponent e importará al resto de componentes con injecciones de dependencias.(MRM ???)
  • Se divide este AppComponent en 4 ficheros
  • ts TypeScript tendría la parte de la lógica
  • html La plantilla o Vista
  • css Fichero de estilo

wrench Component: my-component.component.ts art Styles: my-component.component.css iphone Template: my-component.component.html clipboard Tests: my-component.component.specs.ts

Tecnologías usadas en Angular

Typescript
Es la lógica, escrito en Typescript un lenguaje muy parecdio a js con particularidades propias como el tipado
El fichero .ts es transpilado a  .js
  • Por ejemplo si tenemos un fichero index.ts
 tsc index.ts
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
Node.js
 Node es un entorno que implementa las acciones en el servidor 
Patrones de diseño
Dos ejemplos importantes son los de asincronía (Observable, Promise, etc.) y especialmente servicios e inyección de dependencias.  
https://angular.io/guide/architecture-services

Creando un compomente nuevo

ng generate component heroes
  • Dentro de app habrá creado una carpeta heroes con 4 ficheros (spect.ts y ts, html y css)
  • A la hora de implementar el controlador o ts
  • Vemos el código que se ha generado
import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-manolo',
  templateUrl: './manolo.component.html',
  styleUrls: ['./manolo.component.css']
})
export class ManoloComponent implements OnInit {
  constructor() { }
 
  ngOnInit() {
  }
 
}


Icon activity.jpg
Component
Decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.



{{MRM_Actividad|Title=Contenido|

import { Component, onInit} from '@angular/core'

importamos el Component del núcleo de angular

#Component

Especifica propiedades de metadatos

  1. selector
  2. templateURL
  3. styleUF


Creo un módulo
  • Juego con el ts para dar comportamiento, html para visualizarlo (de ese componente)
  • css para estilos (de ese componente, que es como si fuera una página web independiente que luego incorporaremos como parte de nuestro proyecto
  • Agrego el módulo en el fichero app.component.ts
  import { HeroesComponent } from './heroes/heroes.component';
  • En el componente especificamos la forma en el que lo vamos a referencias
@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})