)reaci(n de un proyecto llamado my-app. "cceso al directorio de la aplicaci(n. "rran$ue del ser+idor con -open o o con -o abrimos abrimos el na+egador. En esta ruta encontramos el primer componente creado por )L' llamado app.component.ts . En est esta a ruta ruta encont encontram ramos os el 0chero 0chero de est estilo ilo $ue $ue podem podemos os manipular para dar estilo a nuestro componente.
1n proyecto )L' de angular es la base para experimentos r2pidos y soluciones empresariales. El primer archi+o $ue debe obser+ar es README.md . 3iene un poco de in4ormaci(n b2sica sobre el uso de los comandos de la )L'. 5iempre $ue $uiera saber m2s sobre c(mo 4unciona la )L' de angular asegrese de +isitar el repositorio angular )L' y 7i%i . "lgunos de los archi+os generados podr8an ser desconocidos. La car pet peta a src 5u aplicaci(n +i+e en la carpeta src. 3odos los componentes plantillas estilos im2genes y cual$uier otra cosa $ue necesite necesite la aplicaciones aplicaciones angular angular +an a$u8. )ual$uier )ual$uier archi+o 4uera 4uera de esta carpeta est2n destinados destinados a apoyar la construcci(n de su aplicaci(n.
npm start
tsc ,*atch
npm install
Este comando ejecuta el compilador de transcripci(n en 9modo de reloj9 se +ol+er2 a compilar autom2ticamente cuando hayan cambios en el c(digo. El comando start inicia inicia al mismo tiempo la aplicaci(n en un na+egador y la actuali!a el cuando el c(digo cambia. )ompila un proyecto type5cript de angular# con+irtindolo en .js
5i estamos dentro de un directorio con los archi+os b2sicos de "ngular este comando instala un carpeta las dependencias del 4rame*ord. cd mirojecto;npm install
Estructura de carpetas & L y ?a+a5cript o un lenguaje 3ype5cript $ue compila a ja+a5cript. El marco consta de +arias bibliotecas algunas de ellas b2sicas y otras opcionales. )omponentes m(dulos o @g>odules , Las aplicaciones "ngular son modulare y tienen su propio sistema de modularidad llamados m(dulos angular o @g>odules. )ada aplicaci(n "ngular tiene al menos una clase modular angular denominado AppModule . 1n m(dulo angular ya sea un m(dulo ra8! o una 4unci(n es una clase con un NgModule decorador. Los decoradores son 4unciones $ue modi0can clases de JavaScript . "ngular tiene muchos decoradores $ue adjuntar metadatos a las clases para $ue sepa lo $ue signi0can esas clases y c(mo deben 4uncionar. NgModule Es una 4unci(n del tipo decorador $ue toma un nico objeto metadatos cuyas propiedades describe el m(dulo. Las propiedades m2s importantes son: declarations - 1na clases de +ista $ue pertenecen a este m(dulo. "ngular tiene tres tipos de clases de +ista: •
components directi+es y pipes. Exports - 5ubconjunto de declaraciones $ue deben ser +isibles y utili!ables en las plantillas de componentes de otros m(dulos. Imports - Atros m(dulos cuyas clases exportadas sean necesarias para las plantillas de componentes declaradas en este m(dulo. Providers - creadores de los ser+icios $ue este m(dulo contribuye a la colecci(n global de ser+iciosB 5e +uel+en accesibles en todas las partes de la aplicaci(n. Bootstrap - la +ista principal de la aplicaci(n llamado el componente ra8! $ue aloja todos los otros puntos de +ista de la aplicaci(n. 5(lo el m(dulo ra8! debe establecer esta propiedad bootstrap. •
•
•
•
"l iniciar una aplicaci(n todo nace desde un archi+o main.ts $ue se encontrara en la ruta .scr y $ue dentro de l llamar2 a un modulo app.module.ts $ue se encuentra en la ruta .scrapp y $ue a su +e! dentro de l llamaremos al modulo inicial de la aplicaci(n import2ndolo import ! App"imer # $rom %.app.timer%& dentro del decorador @NgModule en las declaraciones aCadimos el m(dulo 'NgModule(! declarations) * App"imer + y en el apartado pro+eedores +ol+emos a aCadir el m(dulo providers) *+, ap) *Appomponent+ ootstrap) *App"imer+ .
>(dulos "ngular +s >(dulos ?a+a5cript En "ngular una clase decorada con @g>odule es una caracter8stica 4undamental de "ngular. En ?a+a5cript tambien tienen su propio sistema de m(dulos para administrar colecciones de objetos es completamente di4erente y no esta relacionado con el sistema de modular de "ngular.
En ?a+a5cript cada archi+o es un m(dulo y todos los objetos de0nidos en el archi+o pertenece a ese m(dulo. El m(dulo declara $ue algunos objetos son pblicos marc2ndolos con la palabra reser+ada export. Atra 4orma es declarar importaciones para acceder a objetos publicados en otros m(dulos.
Librerias "ngular El +eh8culo de "ngular son una colecci(n de m(dulos ?a+a5cript. 5e puede pensar como m(dulos de una biblioteca. )ada nombre de la bilioteca de angular comien!a con el pre0jo angular.
5e instalan con el pa$uete npm se importa con la declaraci(n de import de ?a+a5cript. ejemplo import D )omponent 4rom Fangular/coreF B 3ambin se puede importar m(dulos de la biblioteca de angular utili!ando sentencias de importaci(n de ?a+a5cript. ejemplo import D Gro*ser>odule 4rom Fangular/plat4orm-bro*serF B
ara acceder al material de ja+ascript agrguelo en los @g>odule metadatos importelos como este. imports: H Gro*ser>odule I Je esta manera est2 utili!ando los sistemas de m(dulos "ngular y ?a+a5cript juntos .
Es 42cil con4undir los dos sistemas por$ue comparten un +ocabulario comn de 9importaciones9 y 9exportaciones9. La con4usi(n cede a la claridad con el tiempo y la experiencia.
)omponentes 1n componente controla un parche de pantalla llamado +ista. or ejemplo las siguientes +istas son controladas por componentes: La ra8! de la aplicaci(n con los enlaces de na+egaci(n. La lista de hroes. El editor del hroe. •
•
•
Je0ne la l(gica de la aplicaci(n de un componente lo $ue hace para soportar la +ista dentro de una clase. La clase interacta con la +ista a tra+s de una "' de propiedades y mtodos. Por e/emplo HeroListComponent Src / app / hero-list.component.ts (class) tiene una propiedad heroes $ue de+uel+e una matriz de héroes $ue ad$uiere de un servicio . =eroList)omponent 3ambin tiene un selectHero! mtodo $ue establece una selected=eropropiedad cuando el usuario hace clic para elegir un hroe de esa lista.
export class HeroListComponent implements An'nit D heroes" Hero#$B selectedHero: =eroB constructorpri+ate ser+ice: =ero5er+ice D ngAn'nit D this.heroes % thi s.serv ice.getHe roes!&
selectHerohero" He ro! D this.selected=ero K heroB
"ngular crea actualiza y destru'e componentes a medida $ue el usuario se mue+e a tra+s de la aplicaci(n. 5u aplicaci(n puede actuar en cada momento segn ciclo de +ida a tra+s de estos ganchos opcionales del ciclo de +ida como ngAn'nit declarado anteriormente.
lantillas 5e de0ne como la +isi(n de un componente con su compaCero de plantilla . 1na plantilla es una 4orma de =3>L $ue indica a "ngular c(mo renderi!ar el componente. 1na plantilla se +e como =3>L normal a excepci(n de algunas di4erencias. "$u8 hay una plantilla para nuestro =eroList)omponent: (rc ) app ) hero*list.component.html
h#M=ero List/h#M pMiMic% a hero 4rom the list/iM/pM ulM li NngL t8picos como h#My pM tambin tiene algunas di4erencias. )(digo como 0ng1or, !!2ero.name## (clic34, *2ero+ y +hero*detail, utili!a angular de sintaxis de la plantilla . En la ltima l8nea de la plantilla la eti$ueta 52ero-detail6 es un elemento personali!ado $ue representa un nue+o componente =eroJetail)omponent. El =eroJetail)omponent es un componente di4erente al =eroList)omponent $ue has estado re+isando. El c(digo de =eroJetail)omponent no mostrado presenta hechos sobre un hroe particular el hroe $ue el usuario selecciona de la lista presentada por el =eroList)omponent. El =eroJetail)omponent es un hijo de la =eroList)omponent. import D )omponent 'nput 4rom Fangular/coreFB import D =ero 4rom F./heroFB )omponentD selector: Fhero-detailF template: O di+ Nng'4K9hero9M h#MDDhero.name detailsP/h#M di+M labelMid: /labelMDDhero.id /di+M di+M labelMname: /labelM input Hng>odelIK9hero.name9 placeholderK9name9/M /di+M /di+M O export class =eroJetail)omponent D
'nput hero: =eroB Abser+e c(mo +hero*detail, descansa c(modamente entre elementos =3>L nati+os. Los componentes personali!ados se combinan per4ectamente con =3>L nati+o en los mismos diseCos.
>etadatos Los metadatos le indican a "ngular c(mo procesar una clase. >irando hacia atr2s en el c(digo de =eroList)omponent se puede +er $ue es s(lo una clase. @o hay e+idencia de un marco 9"ngular9. Je hecho =eroList)omponent realmente es s(lo una clase . @o es un componente hasta $ue se lo digas a "ngular . "l decir angular $ue =eroList)omponent es un componente adjunta los metadatos a la clase. En type5cript se adjuntar los metadatos mediante el uso de un decorador . "$u8 hay algunos metadatos para =eroList)omponent: src)app)hero*list.component.ts metadata!
)omponentD selector: Fhero-listF template1rl: F./hero-list.component.htmlF pro+iders: H =ero5er+ice I export class =eroList)omponent implements An'nit D /N . . . N/ "$u8 est2 el @Component decorador $ue identi0ca la clase inmediatamente debajo de ella como una clase de componente. El @Component decorador toma un objeto de con0guraci(n re$uerido con la in4ormaci(n "ngular $ue necesita para crear y presentar el componente y su +ista. "$u8 est2n algunos de las opciones m2s tiles de los )omponent de con0guraci(n: selector: 5elector )55 $ue le dice a angular como crear e insertar una instancia de este componente donde encuentra una eti$ueta hero-listM en la matri! =3>L. or ejemplo si el =3>L de una aplicaci(n contiene hero-listM/hero-listM "ngular inserta una instancia de la +ista =eroList)omponent entre esas eti$uetas. template-rl : Jirecci(n del m(dulo-relati+o de plantilla =3>L de este componente se muestra m2s arriba . providers: >atri! de pro+eedores de inyecci(n de dependencia para los ser+icios $ue re$uiere el componente. Esta es una 4orma de decirle a "ngular $ue el constructor del componente re$uiere una =ero5er+ice para $ue pueda obtener la lista de hroes para mostrar.
Los @Component metadatos de la columna indican a "ngular d(nde obtener los blo$ues de construcci(n principales $ue especi0$ue para el componente. La plantilla los metadatos y el componente describen conjuntamente una +ista. "pli$ue otros decoradores de metadatos de una manera similar para guiar el comportamiento de "ngular. @n/ectable @nput Q @0utput son algunos de los decoradores m2s populares. La ar$uitectura $ue hay $ue lle+ar es $ue debes agregar metadatos a tu c(digo para $ue "ngular sepa $u hacer.
El Enlace de Jatos 5in un marco usted ser8a responsable de empujar los +alores de datos en los controles =3>L y con+ertir las respuestas de los usuarios en acciones y actuali!aciones de +alor. Escribir tal l(gica push / pull a mano es tedioso propenso a errores y una pesadilla para leer como cual$uier programador jRuery experimentado puede dar 4. 5oportes "ngular enlace de datos un mecanismo para coordinar partes de una plantilla con partes de un componente. "gregue un marcado de enlace a la plantilla =3>L para decirle a "ngular c(mo conectar ambos lados.
)omo muestra el diagrama existen cuatro 4ormas de sintaxis de +inculaci(n de datos. )ada 4orma tiene una direcci(n - hacia el JA> desde el JA> o en ambas direcciones.
El ejemplo de la plantilla =eroList)omponent tiene tres 4ormas: (rc ) ap p ) he ro*list.component.html vin cul ante! liMDDhero.name/liM hero-detail HheroIK9selected=ero9M/hero-detailM li clic%K9select=erohero9M/liM La interpolaci(n DDhero.name muestra el +alor de propiedad del componente hero.name dentro del liM elemento. La HheroI propiedad +inculante pasa el +alor de selected=ero desde el padre =eroList)omponent a la heropropiedad del niCo =eroJetail)omponent. El e+ento clic% llama al componente select=ero del mtodo cuando el usuario hace clic en el nombre de un hroe. Jos +8as de enlace de datos es una cuarta 4orma importante $ue combina la propiedad y suceso de uni(n en una sola notaci(n utili!ando la directi+a ng>odel. "$u8 hay un ejemplo de la plantilla =eroJetail)omponent: input Hng>odelIK9hero.name9M En enlaces de dos +8as un +alor de propiedad de datos Suye al cuadro de entrada desde el componente como con enlace de propiedad. Los cambios del usuario tambin Suyen de nue+o al componente restableciendo la propiedad al +alor m2s reciente como con el enlace de e+ento. "ngular procesa todos los enlaces de datos una +e! por ciclo de e+entos ?a+a5cript desde la ra8! del 2rbol de componentes de la aplicaci(n a tra+s de todos los componentes secundarios. El enlace de datos juega un papel importante en la comunicaci(n entre una plantilla y su componente. El enlace de datos tambin es importante para la comunicaci(n entre los componentes padre e hijo.
Jirecti+as Las plantillas angular son din2micas . )uando "ngular las trans4orma trans4orma el JA> de acuerdo con las instrucciones dadas por las directi+as . -na directiva es una clase con un @1irective decorador. 1n componente es una directiva*con*una* plantillaB un @Component decorador es en realidad un @1irective decorador ampliado con caracter8sticas orientadas plantilla.
>ientras $ue un componente es técnicamente una directiva los componentes son tan distinti+os y centrales para las aplicaciones angular $ue esta descripci(n ar$uitect(nica separa los componentes de las directi+as. Atros tipos existen de instrucciones: estructurales y de atributos de directi+as. 3ienden a aparecer dentro de una eti$ueta de elemento como lo hacen los atributos a +eces por su nombre pero m2s a menudo como destino de una asignaci(n o +inculaci(n. Las directi+as estructurales alteran el diseCo aadiendo eliminando y reemplazando elementos en el JA>. La plantilla de ejemplo utili!a dos incorporados en las directi+as estructurales: src)app)hero*list.componen t.html struct ural!
li Nng
•
Nng
Las directi+as de atributo alteran la apariencia o el comportamiento de un elemento existente. En plantillas se +en como atributos =3>L normales de ah8 el nombre. La directi+a ng>odel $ue implementa la +inculaci(n bidireccional de datos es un ejemplo de una directi+a de atributo. @g>odel modi0ca el comportamiento de un elemento existente normalmente un inputM estableciendo su propiedad +alor de la pantalla y responder a los cambios hechos. input Hng>odelIK9hero.name9M "ngular tiene unas pocas directi+as m2s $ue o bien alteran la estructura de disposici(n por ejemplo ng(3itch o modi0can aspectos de elementos y componentes de JA> por ejemplo ng(t'le y ngClass . or supuesto tambin puede escribir sus propias directi+as. )omponentes como =eroList)omponent son un tipo de directi+a personali!ada.
5er+icios El ser+icio es una categor8a amplia $ue abarca cual$uier +alor 4unci(n o 4unciones $ue su aplicaci(n necesita. )asi cual$uier cosa puede ser un ser+icio. 1n ser+icio es t8picamente una clase con un prop(sito estrecho y bien de0nido. Jebe hacer algo espec80co y hacerlo bien. Ejemplos: •
•
•
•
•
5er+icio de registro 5er+icio de datos Gus de mensajes )alculo de impuestos )on0guraci(n de la aplicaci(n
@o hay nada en concreto en angular sobre los ser+icios. "ngular no tiene de0nici(n de ser+icio. @o existe una clase base de ser+icio ni un lugar para registrar un ser+icio. 5in embargo los ser+icios son 4undamentales para cual$uier aplicaci(n "ngular. Los componentes son grandes consumidores de ser+icios. " continuaci(n se muestra un ejemplo de una clase de ser+icio $ue se registra en la consola del na+egador: (rc ) app ) logger.servi ce.ts class! export class Logger D logmsg: any D console.logmsgB errormsg: any D console.errormsgB *arnmsg: any D console.*arnmsgB "$u8 hay una =ero5er+ice $ue usa un promise )alculos asincronos para buscar hroes. El =ero5er+ice depende del Logger ser+icio y otro Gac%end5er+ice $ue maneja el trabajo de comunicaci(n del ser+idor. (rc ) app ) hero.serv ice.ts class!
export class =ero5er+ice D pri+ate heroes: =eroHI K HIB constructor pri+ate bac%end: Gac%end5er+ice pri+ate logger: Logger D get=eroes D this.bac%end.get"ll=ero.then heroes: =eroHI KM D this.logger.logOedia entre la +ista representada por la plantilla y la l(gica de la aplicaci(n $ue a menudo incluye alguna noci(n de un modelo . 1n buen componente presenta propiedades y mtodos para la uni(n de datos. Jelega todo lo $ue no es tri+ial a los ser+icios.
"ngular no hace cumplir estos principios. @o se $uejar2 si escribe un 94regadero de cocina9 como componente con UVVV l8neas. "ngular le ayuda a seguir estos principios hacindolo 42cil 4actori!ar su l(gica de aplicaci(n en ser+icios y poner esos ser+icios a disposici(n de los componentes a tra+s de la inyecci(n de dependencia .
'nyecci(n de dependencias La inyecci(n de dependencia es una manera de suministrar una nue+a instancia de una clase con las dependencias completamente 4ormados $ue re$uiere. La mayor8a de las dependencias son ser+icios. "ngular utili!a la inyecci(n de dependencia para proporcionar a los nue+os componentes los ser+icios $ue necesitan. "ngular puede decir $u ser+icios necesita un componente mirando los tipos de sus par2metros de constructor. or ejemplo el constructor de =eroList)omponenta =ero5er+ice: (rc ) app ) hero*list.component.ts constructor!
constructorpri+ate ser+ice: =ero5er+ice D )uando "ngular crea un componente primero solicita un inyector para los ser+icios $ue re$uiere el componente. 1n inyector mantiene un contenedor de instancias de ser+icio $ue ha creado pre+iamente. 5i una instancia de ser+icio solicitada no est2 en el contenedor el inyector hace uno y lo aCade al contenedor antes de de+ol+er el ser+icio a "ngular. )uando todos los ser+icios solicitados han sido resueltos y de+ueltos "ngular puede llamar al constructor del componente con esos ser+icios como argumentos. Esta es la inyecci(n de dependencia . El proceso de inyecci(n de =ero5er+ice se parece un poco a esto:
5i el inyector no tiene una =ero5er+ice Wc(mo sabe c(mo hacer unaX En resumen debe haber registrado pre+iamente un pro+eedor de la =ero5er+ice con el inyector. 1n pro+eedor es algo $ue puede crear o de+ol+er un ser+icio normalmente la clase de ser+icio en s8. uede registrar pro+eedores en m(dulos o en componentes. En general agregue pro+eedores al m(dulo ra8! para $ue la misma instancia de un ser+icio est disponible en todas partes. (rc ) ap p ) app.modu le.ts proveedores de m4dulos!
