Diferencia entre revisiones de «Usuario:ManuelRomero/angular»

De WikiEducator
Saltar a: navegación, buscar
 
(14 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 +
{{MRM_Web|Title=vídeos y urls|
 +
*Angular y accesibilidad a otros frameworks (React y Vue), me gusta  de CodeTVly
 +
https://www.youtube.com/watch?v&#61QHveY3UGu1Y
 +
*otras url's
 +
https://devdocs.io/angular/
 +
https://www.meetup.com/es-ES/Angular-Medellin/events/258536667/
 +
https://github.com/jdjuan/your-first-angular-application
 +
http://slackblitz :) Editor online de app's web
 +
 +
}}
 
;Instalar angular cli
 
;Instalar angular cli
 
*Cuidar versiones de node y de npm
 
*Cuidar versiones de node y de npm
Línea 55: Línea 65:
 
*La forma de construir una apliación Angular es con '''''componentes'''''
 
*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 ???)  
 
*El componente base es AppComponent e importará al resto de componentes con injecciones de dependencias.(MRM ???)  
−
*Se divide este AppComponent en tres ficheros
+
*Se divide este AppComponent en 4 ficheros
 
*'''''ts''''' TypeScript tendría la parte de la lógica
 
*'''''ts''''' TypeScript tendría la parte de la lógica
 
*'''''html''''' La plantilla o Vista
 
*'''''html''''' La plantilla o Vista
 
*'''''css''''' Fichero de estilo
 
*'''''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
 +
<source lang=bash>
 +
tsc index.ts
 +
</source>
 +
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===
 
===Creando un compomente nuevo===
 
<source lang=bash>
 
<source lang=bash>
 
ng generate component heroes
 
ng generate component heroes
 
</source>
 
</source>
 +
*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
 +
<source lang=javascript>
 +
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() {
 +
  }
 +
 +
}
 
</source>
 
</source>
 +
{{MRM_Actividad|Title=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
 +
#selector
 +
#templateURL
 +
#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
 +
*El tema de test lo veremos más adelante
 +
*incorporaremos como parte de nuestro proyecto un nuevo componente llamado heroes
 +
<source lang=bash>
 +
ng generate component heroes
 +
</source>
 +
*Se agrega de forma automática el módulo en el fichero '''''app.component.ts''''' añadiendo lo siguiente
 +
<source lang=javascript>
 +
  import { HeroesComponent } from './heroes/heroes.component';
 +
</source>
 +
*También se añade el nombre del módulo o componente en la sección de declaracione s
 +
<source lang=javascript>
 +
@NgModule({
 +
  imports:      [ BrowserModule, FormsModule ],
 +
  declarations: [ AppComponent, HelloComponent, HeroesComponent ],
 +
  bootstrap:    [ AppComponent ]
 +
})
 +
</source>
 +
export class
 +
*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>
 +
 +
===doble binding ===
 +
*Unión o enlazado doble
 +
*La variable o propiedad en el modelo actualiza el valor en la vista y el valor de la vista actualiza la variable o propiedad.
 +
Two-way binding
 +
[(ngModel)]=propiedad
 +
===Formularios===
 +
*Angular tiene dos formas de gestionar los formularios:
 +
#'''''Reactive forms''''' formularios reactivos, son robustos y escalables
 +
#'''''Template-driven''''' Formularios basados en plantillas: Mas sencillos de utilizar, pero menos reusables y robustos.
 +
;Template-diven
 +
 +
===TypeScript===
 +
;export
 +
Los elementos declarados con typesacirp tienen un alcance local, y se ejecutan en el ámbito en el que han sido declarados. para usarlos fuera de ese scope, debemos exportarlo con '''''export''''
 +
https://www.typescriptlang.org/docs/handbook/modules.html#export
 +
;Declarar una clase
 +
<source lang=javascript>
 +
export class nombre_clase{
 +
  atributo: tipo;
 +
  atributo2:tipo;
 +
}
 +
</source>
 +
 +
;Declarar un objeto
 +
<source lang=javascript>
 +
variable:clase ={
 +
  atributo1: "Valor1",
 +
  atributo2: "Valor2"
 +
};
 +
</source>
 +
 +
===cliclo de vida de los componentes gestionados por Angular===
 +
*Angular gestiona el ciclo de vida de un componente. Durante este proceso se van a invocar a determinados  interfaces que implementando podemos aportar código en ese momento.
 +
;ngOnInit =>
 +
*Se invoca después de crear el componente u objeto y asignar las propiedades.
 +
*Poner aquí la lógica de inicialización en lugar del método construct.
 +
 +
===Pipes===
 +
*Es  un modo de mostrar (formato) un determinado valor transformándolo. por ejemplo mostrar todo en mayúsculas, un determinado formato de fehca, decimales, monedas , ....
 +
https://angular.io/api/core/PipeTransform
 +
https://angular.io/guide/pipes
 +
 +
Introducing Angular pipes, a way to write display-value transformations that you can declare in your HTML.
 +
The ngOnInit is a lifecycle hook. Angular calls ngOnInit shortly after creating a component. It's a good place to put initialization logic.
  
−
Una aplicación de angular está formada por componentes. Inicialmente la AppComponent, que actúa como componente base que importará el resto. Los componentes están divididos en tres ficheros, el .ts es el que implementa su lógica y su funcionalidad, el html su presentación y contiene enlaces a la lógica para, por ejemplo, entrada y salida de datos y por último un .css.
+
Always export the component class so you can import it elsewhere ... like in the AppModule.

Última revisión de 17:37 23 oct 2019


Icon inter.gif
vídeos y urls
  • Angular y accesibilidad a otros frameworks (React y Vue), me gusta de CodeTVly 
https://www.youtube.com/watch?v&#61QHveY3UGu1Y
  • otras url's 
https://devdocs.io/angular/
https://www.meetup.com/es-ES/Angular-Medellin/events/258536667/
https://github.com/jdjuan/your-first-angular-application
http://slackblitz :) Editor online de app's web


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


Icon inter.gif
Recursos de la Web

https://stackoverflow.com/questions/50639690/on-npm-install-unhandled-rejection-error-eacces-permission-denied 


➜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
  • El tema de test lo veremos más adelante
  • incorporaremos como parte de nuestro proyecto un nuevo componente llamado heroes 
ng generate component heroes
  • Se agrega de forma automática el módulo en el fichero app.component.ts añadiendo lo siguiente 
  import { HeroesComponent } from './heroes/heroes.component';
  • También se añade el nombre del módulo o componente en la sección de declaracione s 
@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, HeroesComponent ],
  bootstrap:    [ AppComponent ]
})

export class

  • 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']
})

doble binding

  • Unión o enlazado doble
  • La variable o propiedad en el modelo actualiza el valor en la vista y el valor de la vista actualiza la variable o propiedad.

Two-way binding [(ngModel)]=propiedad

Formularios

  • Angular tiene dos formas de gestionar los formularios:
  1. Reactive forms formularios reactivos, son robustos y escalables
  2. Template-driven Formularios basados en plantillas: Mas sencillos de utilizar, pero menos reusables y robustos.
Template-diven

TypeScript

export

Los elementos declarados con typesacirp tienen un alcance local, y se ejecutan en el ámbito en el que han sido declarados. para usarlos fuera de ese scope, debemos exportarlo con export' 

https://www.typescriptlang.org/docs/handbook/modules.html#export
Declarar una clase 
export class nombre_clase{
  atributo: tipo;
  atributo2:tipo;
}
Declarar un objeto 
variable:clase ={
  atributo1: "Valor1",
  atributo2: "Valor2"
};

cliclo de vida de los componentes gestionados por Angular

  • Angular gestiona el ciclo de vida de un componente. Durante este proceso se van a invocar a determinados interfaces que implementando podemos aportar código en ese momento.
ngOnInit =>
  • Se invoca después de crear el componente u objeto y asignar las propiedades.
  • Poner aquí la lógica de inicialización en lugar del método construct.

Pipes

  • Es un modo de mostrar (formato) un determinado valor transformándolo. por ejemplo mostrar todo en mayúsculas, un determinado formato de fehca, decimales, monedas , .... 
https://angular.io/api/core/PipeTransform
https://angular.io/guide/pipes

Introducing Angular pipes, a way to write display-value transformations that you can declare in your HTML. The ngOnInit is a lifecycle hook. Angular calls ngOnInit shortly after creating a component. It's a good place to put initialization logic.

Always export the component class so you can import it elsewhere ... like in the AppModule.

Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/angular&oldid=25844»