Manual Angular 2 De

Manual%20de%20%20Angular

User Manual:

Open the PDF directly: View PDF PDF.
Page Count: 113 [warning: Documents this large are best viewed by clicking the View PDF Link!]

Manual de Angular
Manual de Angular
Introducción: Manual de Angular
Comenzamoslaredacción anuestro Manual deAngular, laevolución del framework Javascript máspopular
parael desarrollo deaplicacionesdel lado del cliente.
En estapáginairásviendo losartículosdel Manual deAngular según losvayamospublicando alo largo de
lospróximosmeses.
Nuestro objetivo esrecorrer laspiezasprincipalesdeestepotenteframework y estudiar losmecanismos
parael desarrollo deaplicacionesweb universalescon Angular 2. Demomento encontrarásunaestupenda
introducción al desarrollo con el nuevo Angular, y abordaremosmuchosmásdetallesen breve.
Estemanual abordael framework Angular, en susversiones2 en adelante. Cabeaclarar que, poco después
desalir laversión deAngular 2, el framework cambió denombreaAngular. A partir deaquí sehan ido
publicando diversasentregascon númerosbasadosen el versionado semántico, pero siemprebajo lamisma
basetecnológica. Por tanto, estemanual esválido tanto si quieresconocer Angular 2 o Angular 4 o lasque
vengan, yaqueel framework en sí siguemanteniendo susmismas bases.
Encuentrasestemanual onlineen:
http:/ / desarrolloweb.com/ manuales/ manual-angular-2.html
Manual de Angular
Autores del manual
Lassiguientespersonashan participado como autoresescribiendo artículosdeestemanual.
Miguel Angel Alvarez
Miguel esfundador deDesarrolloWeb.com y laplataformadeformación online
EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997,
transformando su hobby en su trabajo.
Alberto Basalo
Alberto Basalo esexperto en Angular y otrastecnologíasbasadasen Javascript,
como NodeJSy MongoDB. Esdirector deÁgoraBinaria, empresadedicadaal
desarrollo deaplicacionesy alaformación atravésdeAcademiaBinaria.
Manual de Angular
Introducción al desarrollo con Angular
En estaprimerapartedel manual vamosadar losprimerospasosparadesarrollar aplicacionescon Angular.
Veremoscómo crear el esqueleto delaaplicación básicay conoceremoslosprincipalescomponentesde
todo proyecto.
Introducción a Angular
Qué es Angular. Por qué se ha decidido escribir desde cero el popular framework Javascript y qué
necesidades y carencias resuelve con respecto a su antecesor.
Angular 2 hacambiado tanto quehastael nombreesdistinto. Lo conocíamoscomo "AngularJS" y ahoraes
sólo "Angular". No dejadeser unaanécdotaquehayan eliminado el "JS" hastadel nombredel dominio,
pero esrepresentativo. No porqueahoraAngular no seaJavascript, sino porqueesevolución radical.
Angular 2 esotro framework, no simplementeunanuevaversión. A losqueno conocían Angular 1 ésto les
seráindiferente, pero losqueyadominaban esteframework sí deben entender queel conocimiento que
necesitan adquirir espoco menosquesi comenzasen desde cero. Obviamente, cuantamásexperienciaen el
desarrollo setenga, mássencillo serálanzarseausar Angular 2 porquemuchascosassonarán deantes.
En esteartículo encontrarásun poco dehistoriarelacionadacon Angular 1 y 2, junto con losmotivospor
losqueAngular 2 esotro framework totalmentenuevo, querompecompatibilidad haciaatrás.
Nota: Cabedecir que, aunqueen esteartículo nosrefiramosconstantementeaAngular como Angular
2, lo correcto esnombrarlo simplemente"Angular". Dehecho, laversión 4 o lapróximaversión 5 sigue
llamándose"Angular", asecas. En estosmomentosAngular sehaacogido al versionado semántico, por
lo queel número delaversión importamenos, yaquesiempresemantieneel nombredel framework
como "Angular" y labasetecnológicasiguesiendo lamisma. Lo queaprendasen estemanual aplicaa
Angular 2, 4, 5... y en adelante.
Retos y necesidades de la nueva versión de Angular
Manual de Angular
D
e
s
d
e
s
u
c
r
e
a
c
i
ó
h
a
c
e
a
m
á
s
d
e
4
a
ñ
o
s
,
A
n
g
u
l
a
r
h
a
s
i
d
o
e
l
f
r
a
m
e
w
o
r
k
p
r
e
f
e
r
i
d
o
p
o
r
l
a
m
a
y
o
r
í
a
d
e
l
o
s
desarrolladoresJavascript. Esteéxito haprovocado quelos desarrolladoresquieran usar el framework para
másy máscosas.
Deser unaplataformaparalacreación deWeb Apps, haevolucionado como motor deunaenorme
cantidad deproyectosdel ámbito empresarial y deahí paraaplicacionesen laWeb MobileHíbrida, llevando
latecnologíaal límitedesusposibilidades.
Esel motivo por el quecomenzaron adetectarseproblemasen Angular 1, o necesidadesdondeno se
alcanzabaunasolución alaalturadelo deseable. Son lassiguientes.
Javascript: Paracomenzar encontramosproblemasen lacreación deaplicacionesdebido al propio
Javascript. Esun lenguajecon carácter dinámico, asíncrono y decomplicadadepuración. Al ser tan
particular resultadifícil adaptarseaél, sobretodo parapersonasqueestán acostumbradasamanejar
lenguajesmástradicionalescomo Javao C#, porquemuchascosasqueserían básicasen esoslenguajesno
funcionan igualmenteen Javascript.
Desarrollo del lado del cliente: Yasabemosquecon Angular tellevasal navegador muchaprogramación
queantesestabadel lado del servidor, comenzando por el renderizado delasvistas. Esto hacequesurjan
nuevosproblemasy desafíos. Uno deelloseslasobrecargaen el navegador, haciendo quealgunas
aplicacionessean lentasusando Angular 1 como motor.
Por otrapartetenemosun impacto negativo en laprimeravisita, yaquesetienequedescargar todo el
código delaaplicación (todaslaspáginas, todaslasvistas, todaslasrutas, componentes, etc), quepuede
llegar atener un peso demegas.
Nota: A partir delasegundavisitano esun problema, porqueyaestán descargadoslosscriptsy
cacheadosen el navegador, pero paraun visitanteocasional sí querepresentaun inconvenientegrande
porquenotaquelaaplicación tardaen cargar inicialmente.
Losintentosdeimplementar Lazy Load, o cargaperezosa, en el framework en su versión 1.x no fueron muy
fructíferos. Lo ideal seríaqueno fuesenecesario cargar todatu aplicación desdeel primer instante, pero es
algo muy difícil deconseguir en laversión precedentepor el propio inyector dedependenciasdeAngular
1.x.
Otro delosproblemastradicionalesdeAngular erael impacto negativo en el SEO, producido por un
renderizado en el lado del cliente. El contenido seinyectamedianteJavascript y aunquesedicequeGoogle
haempezado atener en cuentaesetipo decontenido, lasposibilidadesdeposicionamiento deaplicaciones
Angular 1 eran mucho menores. Nuevamente, debido alatecnologíadeAngular 1, eradifícil desalvar.
Soluciones implementadas en el nuevo Angular 2
Todosesosproblemas, difícilesdesolucionar con latecnologíausadapor Angular 1, han sido losquehan
impulsado asuscreadoresadesarrollar desdecero unanuevaversión del framework. Lanuevaherramienta
estápensadaparadar cabidaatodoslosusosdadospor losdesarrolladores, llevar aJavascript aun nuevo
nivel comparablealenguajesmástradicionales, siendo ademáscapaz deresolver deunamaneraadecuada
Manual de Angular
l
a
s
n
e
c
e
s
i
d
a
d
e
s
p
r
o
b
l
e
m
a
s
d
e
l
a
p
r
o
g
r
a
m
a
c
i
ó
n
d
e
l
l
a
d
o
d
e
l
c
l
i
e
n
t
e
.
En lasiguiente imagen puedesver algunasdelassoluciones aportadasen Angular 2.
TypeScript / Javascript: Como base hemospuesto aJavascript, yaqueesel inicio delosproblemasde
escalabilidad del código. Ayudapoco adetectar erroresy ademásproducecon facilidad situacionespoco
deseables.
Nota: Con ECMAscript 6 yamejorabastanteel lenguaje, facilitando lalegibilidad del código y
solucionando diversosproblemas, pero todavíasele exigemás. Yapuestosano usar el Javascript que
entienden los navegadores(ECMAscript 5), insertando lanecesidad deusar un transpilador como Babel,
podemossubir todavíaun poco de nivel y usar TypeScript.
Angular 2 promueveel uso deTypeScript asus desarrolladores. El propio framework estádesarrollado en
TypeScript, un lenguajequeagregalasposibilidadesdeES6 y el futuro ES7, ademásdeun tipado estático y
ayudasdurantelaescrituradel código, el refactoring, etc. pero sin alejartedel propio Javascript (yaqueel
código deJavascript escódigo perfectamenteválido en TypeScript).
Lasugerenciadeusar TypeScript paradesarrollar en Angular escasi unaimposición porquela
documentación y losgeneradoresdecódigo están pensadosen TypeScript. Sesuponequeen futuro
también estarán disponiblesparaJavascript, pero demomento no esasí. Detodosmodos, parala
tranquilidad demuchos, TypeScript no agregamásnecesidad deprocesamiento alasaplicaciones con
Angular 2, yaqueestelenguajesolamentelo utilizasen laetapadedesarrollo y todo el código queseejecuta
en el navegador esal final Javascript, yaqueexisteunatranspilación previa.
Nota: Puedessaber más sobreeste superset de Javascript en el artículo deintroducción aTypeScript.
Lazy SPA: Ahorael inyector dedependenciasde Angular no necesitaqueestén en memoriatodaslasclases
o código detodosloselementosqueconforman unaaplicación. En resumen, ahoracon Lazy SPA el
framework puedefuncionar sin conocer todo el código delaaplicación, ofreciendo laposibilidad decargar
másadelanteaquellaspiezasqueno necesitan todavía.
Manual de Angular
R
e
d
e
r
i
z
a
o
U
i
v
e
r
s
a
l
:
A
n
g
u
l
a
r
n
a
c
i
ó
p
a
r
a
h
a
c
e
r
w
e
b
y
r
e
n
d
e
r
i
z
a
r
e
n
H
T
M
L
e
n
e
l
n
a
v
e
g
a
d
o
r
,
p
e
r
o
a
h
o
r
a
el renderizado universal nospermitequeno solo sepuedarenderizar unavistaaHTML. Graciasaésto,
alguien podríaprogramar unaaplicación y queel renderizado sehaga, por ejemplo, en otro lenguajenativo
paraun dispositivo dado.
Otracosaquepermiteel renderizado universal esqueseuseel motor derenderizado deAngular del lado
del servidor. Esunadelasnovedadesmásinteresantes, yaqueahorapodrásusar el framework para
renderizar vistas del lado del servidor, permitiendo un mejor potencial deposicionamiento en buscadoresde
loscontenidosdeunaaplicación. Estamismanovedad también permitereducir el impacto delaprimera
visita, yaquepodrástener vistas"precocinadas" en el servidor, quepuedesenviar directamenteal cliente.
Data Binding Flow: Uno delosmotivosdel éxito deAngular 1 fueel databinding, pero ésteteníaun
costeen tiempo deprocesamiento en el navegador, quesi bien no penalizabael rendimiento en todaslas
aplicacionessí eraun problemaen aquellasmáscomplejas. El flujo dedatosahoraestámucho más
controlado y el desarrollador puededireccionarlo fácilmente, permitiendo optimizar lasaplicaciones. El
resultado esqueen Angular 2 lasaplicacionespueden llegar aser hasta5 vecesmásrápidas.
Componentes: Laarquitecturadeunaaplicación Angular ahoraserealizamediantecomponentes. En este
caso no setratadeunanovedad delaversión 2, yaqueen laversión deAngular 1.5 yaseintrodujo el
desarrollo basado en componentes.
Sin embargo, lacomponetización no esalgo opcional como en Angular 1.5, sino esunaobligatoriedad. Los
componentesson estancos, no secomunican con el padreano ser quesehagaexplícitamentepor medio de
losmecanismos disponibles, etc. Todo esto generaaplicacionesmásmantenibles, dondeseencapsulamejor
lafuncionalidad y cuyo funcionamiento esmásprevisible. Ahoraseevitael acceso universal acualquier cosa
desdecualquier partedel código, víaherenciao cosascomo el "Root Scope", quepermitíaen versiones
tempranasdeAngular modificar cualquier cosadelaaplicación desdecualquier sitio.
Evolución de las versiones 1 y 2 de Angular
LasversionesdeAngularJS1.x siguen vivasy continuarán dando soportedesdeel equipo deAngular. Por
tanto, seprevéquedespuésdelaactual 1.5 seguirán lanzando actualizaciones, nuevasversiones, etc.
Lanovedad esqueahoracomienzaen paralelo lavidadeAngular 2 y seguiráevolucionando por su camino.
Obviamente, laprimeranoticiaqueesperamostodosesquesepresentelaversión definitiva(ten en cuenta
queen el momento deescribir estaslíneasAngular 2 estásolo en versionesRC, ReleaseCandidate).
Deestemodo, debequedar claro, paralaspersonasquetengan aplicacionesen Angular 1.x, queno
necesitan actualizarlasen unafechadeterminada. Todavíaexisteun buen tiempo por delanteen el que sus
proyectosvan aestar perfectamentesoportadosy el código delasaplicacionesperfectamenteválido.
Manual de Angular
Han anunciado ademásqueen algún momento habráalgún sistemaparahacer el upgradedelasaplicaciones
deAngular 1.x ala2.x. Esto podríapermitir Incluso unaconvivencia, en unamismaaplicación, departes
desarrolladascon Angular 1 y otrascon laversión 2. Lafechadelanzamiento deesehipotético
"ngUpgrade" estásin confirmar y obviamentetampoco serámagia. Veremosen el próximo próximo año lo
quesucede, unavez queesaevolución delasversiones1 y 2 estén conviviendo.
Conclusión
Seesperaun futuro muy prometedor aAngular 2. Susnovedadesson importantesy permitirán afrontar el
futuro sobreunabasetecnológicacapaz deresolver todaslasnecesidadesy retosactuales. En el Manual de
Angular estaremosexplicando en lospróximosmesescómo usar esteframework paradesarrollar todo tipo
deaplicacionesbasadasen Javascript. Si ademásquieresaprender yamismo Angular 2, tutorizado por
nosotrosterecomendamostambién el curso completo deAngular 2 queencuentrasen EscuelaIT.
Paraaquel desarrollador queempiezadesdecero en Angular 2 seráun un bonito camino quelepermitirá
crecer profesionalmentey ampliar seriamentesuscapacidadesy el rango deproyectosqueseacapaz de
acometer. El recorrido puedeser difícil al principio, pero larecompensaserágrande.
Por su parte, quien yatengaexperienciaen Angular 1.x siempreleserápositiva, sobretodo paralosque(a
partir dela1.5) comenzaron ausar componentes. Aunqueen Angular 2 cambielamaneraderealizar las
cosas, leresultarátodo másfamiliar y por tanto su curvadeaprendizajeserámássencilla.
Esteartículo esobradeAlbertoBasalo
Fuepublicado por primeravez en 09/ 06/ 2016
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ introduccion-angular2.html
Angular CLI
Qué es Angular CLI, el intérprete de línea de comandos de Angular 2 que te facilitará el inicio de
proyectos y la creación del esqueleto, o scaffolding, de la mayoría de los componentes de una
aplicación Angular.
Manual de Angular
D
e
s
p
u
é
s
d
e
l
a
i
n
t
r
o
d
i
ó
a
l
a
s
c
a
r
a
c
t
e
r
í
s
t
i
c
a
s
d
e
A
n
g
u
l
a
r
2
d
e
l
p
a
s
a
d
o
a
r
t
í
c
u
l
o
,
e
n
e
s
t
a
o
c
a
s
i
ó
n
t
e
presentamosunaintroducción Angular CLI, unadelasherramientasesencialesparadesarrollar con el
nuevo framework Angular. Esun paso esencial y necesario antesdecomenzar aver código, puesto que
necesitamosestaherramientaparapoder iniciar nuestraprimeraaplicación Angular 2, 4 y versiones
venideras.
Debido alacomplejidad del desarrollo con Angular, aunqueel ejemplo quedeseemosdesarrollar setratede
un sencillo "Holamundo", comenzar usando Angular CLI nosahorraráescribir mucho código y nos
permitirápartir deun esquemadeaplicación avanzado y capaz de facilitar losflujosdedesarrollo. Además
nosofreceráunaseriedeherramientasyaconfiguradasy listasparahacer tareascomo, depuración, testing o
deploy. Y dicho seadepaso, el CLI también nosahorrarácaer en erroresdeprincipiantequenos
provoquen frustración en losmomentosiniciales. Así quevamoscon ello.
Nota: Mencionamos lacomplejidad del desarrollo con Angular y lanecesidad deusar su CLI, pero es
queel propio desarrollo paralaweb sehasofisticado bastante. Necesitamoscompilar o transpilar el
código, gestoresdedependencias, sistemasdeempaquetado y compactado decódigo, sistemasquenos
revisen lasintaxisy nosayuden aescribir un código limpio, etc. Cadaunadeesastareaslasdebesde
realizar con unaherramientadefinida, pero configurarlastodasy conseguir quetrabajen al unísono no es
unatareatrivial. Apartedetiempo necesitarásbastanteexperienciay esalgo queno siemprese dispone.
Por ello, lamayoríadelosframeworksactualesofrecen interfacespor líneadecomandosparahacer las
másdiversastareas. Por todo ello, no hay un framework o libreríaquesepreciequeno ofrezcasu
propio CLI.
Qué es Angular CLI
Dentro del ecosistemadeAngular 2 encontramosunaherramientafundamental llamada"Angular CLI"
(Command LineInterface). Esun producto queen el momento deescribir esteartículo todavíase
encuentraen fasebeta, pero queyaresultafundamental parael trabajo con el framework.
Angular CLI no esunaherramientadeterceros, sino que noslaofreceel propio equipo deAngular. En
resumen, nosfacilitamucho el proceso deinicio decualquier aplicación con Angular, yaqueen pocos
minutosteofreceel esqueleto dearchivosy carpetasquevasanecesitar, junto con unacantidad de
herramientasyaconfiguradas. Además, durantelaetapadedesarrollo nosofrecerámuchasayudas,
generando el "scaffolding" demuchosdeloscomponentesdeunaaplicación. Durantelaetapade
producción o testing también nosayudará, permitiendo preparar losarchivosquedeben ser subidosal
servidor, transpilar lasfuentes, etc.
Manual de Angular
Node y npm
Angular CLI es unaherramientaNodeJS, esdecir, parapoder instalarlanecesitaremoscontar con NodeJS
instalado en nuestro sistemaoperativo, algo quepodemosconseguir muy fácilmenteyendo alapáginade
https:/ / nodejs.org y descargando el instalador paranuestro sistema.
Ademásseinstalavía"npm". Por npm generalmenteno tetienes quepreocupar, puesseinstalaal instalar
NodeJS. No obstanteesimportantequeambasversiones, tanto ladelaplataformaNodecomo el gestor de
paquetesnpm, seencuentren convenientementeactualizados. En estosmomentoscomo requisito nospiden
tener Node4 o superior.
Actualizado: En estosmomentos, septiembrede2017 y paraAngular en su versión 4, esnecesario
tener al menos NodeJSversión 6.9.x y npm 3.x.x.
Nota: Puedessaber laversión deNodequetienes instalada, así como laversión denpm por medio de
loscomandos:
node -v
npm -v
No tienesquesaber Nodeparadesarrollar con Angular, pero sí necesitastenerlo parapoder instalar y
usar Angular Angular CLI, ademásdeunaseriedeherramientasfantásticasparadesarrolladores.
Instalar Angular CLI
Esto lo conseguimosdesdeel terminal, lanzando el comando:
npm install -g @angular/cli
Duranteel proceso deinstalación seinstalaráel propio Angular CLI junto con todassusdependencias. La
instalación puedetardar variosminutosdependiendo delavelocidad detu conexión aInternet.
Unavez instalado dispondrásdel comando "ng" apartir del cual lanzaráscualquieradelasaccionesquese
pueden hacer mediantelainterfaz decomandosdeAngular. Puedescomenzar lanzando el comando de
ayuda:
ng --help
N ota: ng (que se lee "enyi") es el apelativo familiar de"Angular" que se conoce desdeel inicio del
framework.
Manual de Angular
También encontrarásunaexcelenteayudasi entrasen lapáginadeAngular CLI, navegando por sus
secciones, o bien en el propio repositorio deGitHub angular-cli.
Crear el esqueleto de una aplicación Angular 2
Uno deloscomandos quepuedeslanzar con Angular CLI esel decreación deun nuevo proyecto Angular
2. Estecomando seejecutamediante"new", seguido del nombredel proyecto quequeramoscrear.
ng new mi-nuevo-proyecto-angular
Lanzado estecomando secrearáunacarpetaigual queel nombredel proyecto indicado y dentro deellase
generarán unaseriedesubcarpetasy archivosquequizáspor su número despisten aun desarrollador quese
iniciaen Angular. Si esasí no tepreocupesporquepoco apoco nosiremosfamiliarizando con el código
generado.
Además, como hemosdicho, seinstalarán y seconfigurarán en el proyecto unagran cantidad de
herramientasútilesparalaetapadel desarrollo front-end. Dehecho, gran cantidad delosdirectoriosy
archivosgeneradosal crear un nuevo proyecto son necesariosparaqueestasherramientasfuncionen. Entre
otrascosastendremos:
Un servidor paraservir el proyecto por HTTP
Un sistemadelive-reload, paraquecuando cambiamosarchivosdelaaplicación serefresqueel
navegador
Herramientasparatesting
Herramientasparadesplieguedel proyecto
Etc.
Unavez creado el proyecto inicial podemosentrar en lacarpetacon el comando cd.
cd mi-nuevo-proyecto-angular
Unavez dentro deesacarpetaencontrarásun listado dearchivosy carpetassimilar aeste:
Manual de Angular
Nota: Estalistadecarpetasy archivossehaactualizado alaversión deAngular 4, en septiembrede
2017. Con nuevasversionesdel framework nos podemosencontrar con ligerasdiferenciasdel contenido
delaaplicación básicagenerada. En principio no deberíapreocuparnosdemasiado, puesto queaveces
sereorganizan lascosaso seusan dependenciasdistintas queno alteran mucho el funcionamiento o las
prácticasnecesariasparael desarrollo con Angular.
Servir el proyecto desde un web server
Angular CLI llevaintegrado un servidor web, lo quequieredecir quepodemosvisualizar y usar el proyecto
sin necesidad decualquier otro software. Paraservir laaplicación lanzamosel comando "serve".
ng serve
Eso lanzaráel servidor web y lo pondráen marcha. Además, en el terminal veráscomo salidadel comando
larutadondeel servidor estáfuncionando. Generalmenteseráalgo como esto (pero tesugerimosverificar
el puerto en lasalidadetu terminal):
http://localhost:4200/
En lasiguiente imagen veslasalidadel terminal nuestro.
Manual de Angular
Podríasmodificar el puerto perfectamentesi lo deseas, simplementeindicando el puerto deseado con la
opción --port:
ng serve --port 4201
Unavez hayasabierto en navegador y accedido alaURL delocalhost, con el puerto indicado, verásla
pantalladeinicio delaaplicación queseacabadecrear. Tendráun aspecto similar al delasiguienteimagen
(ten en cuentaqueestapáginaessolo unaespeciede"holamundo" y quesu aspecto puedecambiar
dependiendo delaversión deAngular queestésusando.
Manual de Angular
Scripts de npm
Paraquien no lo sepa, npm esel "NodePackageManager", el gestor depaquetesdeNodeJS. El CLI de
Angular lo hemosinstalado víanpm. Nuestrapropiaaplicación Angular sepuedegestionar víanpm, para
instalar susdependencias. Iremosconociendo las mecánicasen el Manual deAngular, no obstante,
queremosdetenermosahablar deunaherramientadeutilidad alaquepuedessacar yamismo algo devalor:
losscriptsdenpm.
Losscriptsdenpm son como subcomandosquenpm teaceptaparaautomatizar diferentestareas. Éstosse
definen en el archivo "package.json", en lasección "scripts".
Nota: "package.json" esunaespecie deresumen delascosas quesehan instalado en un proyecto vía
npm. Nuestraaplicación Angular recién instaladatieneun archivo package.json quepuedesabrir para
dar un primer vistazo. En un archivo package.json encontramosdiversascosas, como el nombredel
proyecto, lalicencia, autores, lasdependencias deun proyecto, tanto lasqueimportan paralafasede
desarrollo como parael proyecto en general. Estearchivo tieneformato JSON, por lo queesun simple
texto plano queno te costarádeleer.
Como scriptsdenpm en nuestro proyecto recien creado encuentrasvariasalternativascomo "start",
"build", "test", etc. Esos scriptssepueden poner en marchadesdelaconsola, medianteel comando "npm",
por ejemplo, paralanzar el script "start", tienesqueescribir el comando deconsola:
ng start
En el archivo package.json encuentrasel comando queseejecutaráal hacer cadauno deestosscriptsnpm.
Por ejemplo "start" lo queprovocaesqueselanceel comando "ng serve". Por lo tanto loscomandos"npm
start" o "ng serve" en principio son equivalentes. Sin embargo, nosotrospodemosmodificar losscriptsnpm
paraajustarlosanuestrasnecesidades, o incluso crear nuevoscomandosnpm. Paraprobar simplemente
vamosaponer "--o" al final del comando correspondiendecon el script "start". Este"--o" lo quehacees
que, al iniciarseel servidor paracorrer laaplicación Angular, seabrael navegador directamentey nosla
muestre.
"scripts": {
"ng": "ng",
"start": "ng serve --o",
[...]
}
Ahora, al hacer un
"npm start"
observaráscómo seiniciael servidor web, nosindicalaURL dondeestá
disponible, pero nosabreel navegador automáticamentemostrando esaURL. Así teahorrasel trabajo de
lanzar tú mismo el browser y escribir amano ladirección del servidor quesehaabierto paraservir nuestra
app deAngular.
Problema Angular CLI con Broccoli en Windows
Manual de Angular
E
l
p
r
o
b
l
e
m
a
m
á
s
t
í
p
i
o
q
u
e
n
o
s
p
o
d
e
m
o
s
e
n
c
o
n
t
r
a
r
a
l
u
s
a
r
A
n
g
u
l
a
r
C
L
I
e
s
q
u
e
n
o
t
e
n
g
a
m
o
s
p
e
r
m
i
s
o
s
d
e
administrador. Al intentar poner en marchael servidor recibirásun error como este:
TheBroccoli Plugin: [BroccoliTypeScriptCompiler] failedwith: operationnot permitted.
Esmuy sencillo desolucionar en Windows, yaquesimplementenecesitamosabrir el terminal en modo
administrador (botón derecho sobreel icono del programaqueusesparalíneadecomandosy "abrir como
administrador". Eso permitiráqueAngular CLI dispongadelospermisosnecesariospararealizar lastareas
querequiere.
ACTUALIZACIÓN: Esto lo han cambiado en unaversión betadeAngular CLI (Beta6), por lo queyano
hacefaltaprivilegiosdeadministrador parausar lasherramientasdelíneadecomandosde Angular 2.
En Linux o Mac, si teocurrealgo similar, simplementetendríasquelanzar loscomandoscomo "sudo".
Angular CLI tiene mucho más
En estapequeñaintroducción solo tehemosexplicado cómo iniciar un nuevo proyecto deAngular 2 y
cómo servirlo despuéspor medio del comando serve. Pero lo cierto esquedetrásdeAngular CLI hay
muchasotrasinstruccionesdegran utilidad. Principalmente, como hemoscomentado, encontrarásunagran
cantidad decomandosquepermiten crear el esqueleto decomponentes, directivas, servicios, etc.
A medidaquevayamosadentrándonosen el desarrollo con Angular 2 iremosaprendiendo deunaforma
sencillay prácticatodaslasposibilidadesquepermiteestaherramienta. Demomento terecomendamos
documentarteen el mencionado repositorio deGithub.
Esteartículo esobradeAlbertoBasalo
Fuepublicado por primeravez en 14/ 06/ 2016
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ angular-cli.html
Análisis de las carpetas de un proyecto básico con Angular
Angular 2 exige un marco de trabajo más concreto y avanzado. Vemos los archivos y carpetas que
nos hacen falta para comenzar un proyecto básico.
En el pasado artículo abordamoslaherramientaAngular CLI y ahoravamosaintroducirnosen el resultado
queobtenemos medianteel comando "ng new", quevimosservíaparagenerar el esqueleto básico deuna
aplicación Angular 2.
No obstante, antesdeentrar en materia, vamosatraer dospuntosinteresantes. Uno deellosesuna
reflexión previasobrelacomplejidad deun proyecto "vacío" paraunaaplicación Angular 2. El otro esuna
delas preguntastípicasquesehacen cuando unapersonaseiniciacon cualquier herramientanueva: el
editor queserecomiendausar.
Manual de Angular
Profesionalización
TodaslasmejorasquenosofreceAngular 2 tienen un coste anivel técnico. Anteriormente(versiones1.x)
podíamoscomenzar unaaplicación deAngular con un código deinicio muy sencillo y sin necesidad de
configurar diversasherramientasfrontend. Básicamentepodíamosenlazar Angular desdesu CDN y con un
script muy elemental empezar ausarlo.
Esto yano esasí. Con Angular 2 el número depiezasquenecesitamosintegrar, incluso en aplicacionestan
sencillascomo un "holamundo", esmucho mayor.
En aplicacionesgrandes, dondeexistíaun entorno bien definido por partedel equipo dedesarrollo de esa
aplicación (linter, transpiler, loader, tester, deployer…) seequilibra. Esdecir, Angular no nosexigenada
nuevo queyano estuvieran usando equiposdedesarrollo deaplicacionesgrandes. Pero lo cierto esque
aplicacionespequeñastendrán bastantemáscomplejidad. Todo esto nosllevaaquedesarrolladores
ocasionalesencontrarán más difícil el uso del framework en suspasosiniciales, pero el esfuerzo sin duda
merecerálapenaporquelospondráaun nivel muy superior y eso redundaráen su beneficio profesional.
¿Qué editor de código usar con Angular 2?
Sepuedeusar cualquier editor decódigo. Esunaaplicación HTML y Javascript / TypeScript, por lo que
puedesusar cualquIer editor delosquevienesusando paracualquieradeestoslenguajes.
Como recomendación sesugiereusar un editor ligero, pero quetefacilitelaprogramación. Entrelosque
encontramosde código librey gratuitosparacualquier uso están Brackets, Atom o Visual Studio Code. Éste
último esquizásel másindicado, porqueyavieneconfigurado con unaseriedeherramientasútilesy clave
paradesarrollar con Angular 2 como esel "intellisense" deTypeScript. Detodosmodos, atravésdeplugins
podráshacer quetu editor preferido también seacapaz demostrartelasayudasen tiempo deprogramación
del compilador deTypeScript.
Archivos y carpetas con un proyecto de Angular 2.1 y Angular 4
Comenzaremosexplicando losarchivosy carpetasqueencuentrasen unaaplicación recién creadacon el
Angular CLI, tal como lo encontrarássi usasAngular 4, y en versionesmásadelantadasdeAngular 2. Más
adelanteen este mismo artículo explicaremostambién carpetasqueaparecían en lasprimerasversionesde
Angular 2, queno son exactamentelosmismos. El motivo principal deestasdiferenciasesqueel tooling
queseusaen Angular cambió poco despuésdeliberar laversión 2, por ejemplo con laincorporación de
WebPack. Con ello también laestructuradelascarpetasbásicasdeun proyecto Angular cambió. No esuna
diferenciamuy grande, y creemosqueesútil quemantengamosen el manual ambasalternativas.
Manual de Angular
Archivos sueltos:
Encontrarásvariosarchivossueltosen lacarpetaraíz detu proyecto. Teseñalamosalgunosimportantesque
debesconocer:
index.html Estearchivo esinformación básicadel proyecto recién creado. Tepuededar unaideainicial de
quéeslo queencontrarásen estascarpetasy cómo usar el proyecto. Complementarásin dudalas
explicacionesdeestemanual deAngular. Encontrarásalgunoscomandosexplicadosdel CLI, como "ng
serve" el cuál yahemostratado, paraservir el proyecto. También comentaráquetienesquehacer para
realizar el build, comando "ng build" y llevar aproducción unaaplicación.
.angular-cli.json Esun archivo oculto (en Linux o Mac, puescomienzapor ".") en el quesealmacenan
configuraciones del CLI deAngular.
package.json Esteesel archivo queresumelasdependenciasdel proyecto, laslibreríassobrelasquenos
apoyamos, quesegestionan por medio denpm.
tslint.json Este archivo sirveparaconfigurar el linter, el programaquenosalertarácuando tengamos
problemasdeestilo en el código.
.editorconfig Esteesun archivo quesirveparadefinir laconfiguración parael editor decódigo que
estemosutilizando. Permitecentralizar laconfiguración, demodo queseacomún paratodoslos
desarrolladoresquevayan atrabajar en el proyecto.
Carpeta src
Eslacarpetadondeestán lasfuentesdel proyecto. Estacarpetaeslaqueusaremos paradesarrollar la
aplicación y dondeiremoscolocando componentesy otro tipo deartefactosnecesariosparaponer en
marchanuestrasideas.
Entro de"src" encuentrasmuchosarchivosqueseguramenteteserán familiares, como el index.html, que
hacederaíz del proyecto. Esinteresantequeabrasesearchivo paracomprobar cómo eslaraíz deuna
aplicación Angular. Tedeberíallamar laatención el código queencontrarásen el body:
<app-root></app-root>
Ese"app-root" esel componenteraíz delaaplicación. En el desarrollo basado en componentesesun
patrón normal quetodalaaplicación seconstruyaen un componenteprincipal, del quecolgarátodo un
árbol decomponentesespecializadosen hacer cadaunadelascosasnecesarias.
Nota: En Angular sedesarrollaen baseacomponentes. Si nuncahas conocido esteparadigmaquizáste
parezcaextraño, pero poco apoco lo iremosentendiendo todo y apreciando lasventajas. Obviamente,
no lo podemosexplicar todo en un artículo, así quetepedimosun poco depaciencia.
Otro delosdetallesqueencontrarásen "src" son variosarchivoscon extensión ".ts". Son archivoscon
Manual de Angular
c
ó
i
g
o
T
y
p
e
S
c
r
i
p
t
.
R
e
u
e
r
d
a
q
u
e
e
n
A
n
g
u
l
a
r
s
e
p
r
o
g
r
a
m
a
u
s
a
n
d
o
T
y
p
e
S
c
r
i
p
t
y
q
u
e
e
n
e
l
p
r
o
c
e
s
o
d
e
transpilado delaweb, realizado por WebPack, esecódigo pasaráatraducirseaJavascript. No hacefaltaque
tepreocupesmucho todavía, puesyalo estudiaremoscon calma. Puedesabrir si quieresel main.ts, queesel
código deTypeScript principal delaaplicación, el punto deinicio deejecución, aunqueyateadvertimosque
estearchivo prácticamenteno lo tendremosquetocar.
Dentro de"src" encontrarástambién unacarpetallamada"app", quecontieneel código del componente
principal, queestádividido en variosarchivos. Si abresel archivo ".html" verásel código depresentación
del componente, queesel quesemuestracuando sevisualizalaaplicación recién creada.
En lacarpeta"src" hay muchosotrosarchivos, pero no queremosaburrirtecon todoslosdetalles, pueslos
tendremosqueanalizar poco apoco.
Carpeta node_modules
Eslacarpetadondenpm vacolocando todaslasdependenciasdel proyecto, esdecir, el código de todaslas
libreríaso componentesqueestemosusando parabasarnosen el desarrollo deunaaplicación. Por ejemplo,
el propio Angular esunadependencia.
Carpeta e2e
En estacarpetasecolocan losarchivosparalarealización delaspruebas"end to end".
Ot ras carpet as
A medidaquetrabajespodrásencontrar en el proyecto carpetascomo "test" o "dist", pararealizar el test o
paraalmacenar losarchivoslistosparaproducción. Sigueleyendo lascarpetasdisponiblesen el proyecto
Angular 2.0 paramásinformación.
Archivos y carpetas del proyecto con Angular 2.0
Impactaun poco que, recién creado un proyecto paraAngular 2 por medio deAngular CLI, veamosen la
carpetadearchivosvariassubcarpetas, y variasdeellascon el contenido decientosdeficheros. No
obstante, no todo escódigo detu aplicación, sino muchasvecesson carpetasparacrear lainfraestructurade
todo el tooling NodeJSincluido paragestionar unaaplicación Angular 2.
Ahoraconoceremoslaspartesquenoshacen faltaparacomenzar, aunquesin entrar en demasiadosdetalles.
Todos los archivos del raíz: Seguro quemuchosdeloslectoresreconocen muchosdelosarchivosque
hay dentro, como package.json (descriptor dedependencias npm) o .gitignore(archivosy carpetasquegit
deberíaignorar deesteproyecto cuando seañadaal repositorio). En resumen, todo lo queencontraremos
en estaraíz no son másquearchivosquedefinen nuestro proyecto y configuran el entorno paradiversas
herramientas.
Nota: Observarásqueno hay un index.html, porqueestano eslacarpetaraíz delosarchivosquese
deben servir por el servidor web.
Manual de Angular
src: Eslacarpetamásinteresante parati como desarrollador, yaqueesel lugar dondecolocarásel código
fuentedetu proyecto. En realidad másen concreto lacarpeta"app" queencontrarásdentro de"src" es
dondetienesqueprogramar tu aplicación. Observarásqueyavienecon diversoscontenidos, entreotras
cosasel index.html quedebeservir como páginadeinicio. No obstante, no esexactamenteel directorio raíz
depublicación, porqueal desplegar el proyecto losresultadosdecompilar todoslosarchivossellevarán ala
carpeta"dist".
En lacarpetasrc esdondevasarealizar todo tu trabajo como desarrollador. Seguramenteotrosmuchos
archivosteresulten familiares, como el favicon.ico.
Verásademásvariosarchivos.ts, queson código fuenteTypeScript. Como quizássepas, losarchivos.ts
solo existen en laetapadedesarrollo, esdecir, en el proyecto queel navegador debeconsumir no
encontrarásarchivos.ts, básicamenteporqueel navegador no entiendeTypeScript. Esosarchivosson los
quesecompilarán paraproducir el código .jsquesí entiendael navegador.
Nota: Si todavíateencuentrasreticenteal uso deTypeScript no tepreocupes, yaquecualquier código
Javascript quepongas en ese fichero escódigo TypeScript válido. Por tanto tú podríasperfectamente
escribir cualquier código Javascript dentro delosarchivos .tsy todo iráperfectamente. Si además
conoces algo deTypeScript y lo quieresusar parafacilitartelavidaen tiempo dedesarrollo, tanto mejor
parati.
dist: Eslaversión detu aplicación quesubirásal servidor web parahacer público el proyecto. En dist
aparecerán todoslosarchivosqueel navegador vaanecesitar y nuncacódigo fuenteen lenguajesno
interpretablespor él. (Observaqueno hay archivos.tsdentro dedist). Ojo, puesmuy probablementetengas
queiniciar el servidor web integrado en Angular CLI paraqueaparezcalacarpeta"dist" en el directorio de
tu proyecto. Puedesobtener másinformación sobrecómo lanzar el servidor web en el artículo deAngular
CLI.
Public: Esdondecolocaslosarchivos estáticosdel proyecto, imágenesy cosassimilaresqueseconocen
habitualmentecomo "assets". Estosarchivostambién semoverán a"dist" paraqueestén disponiblesen la
aplicación unavez subidaal servidor web desdedondesevaaacceder.
e2e: Esparael desarrollo delaspruebas. Vienede"end to end" testing.
node_modules: Son losarchivosdelasdependenciasquemantenemosvíanpm. Por tanto, todaslas
libreríasquesedeclaren como dependenciasen el archivo package.json deben estar descargadosen esta
carpetanode_modules. Estacarpetapodríahaber estado dentro desrc, pero estácolgando delaraíz porque
valetanto paralaspruebas, como paralaaplicación cuando laestásdesarrollando.
tmp: Esunacarpetaqueno tocaremos, con archivostemporalesquegeneraráAngular CLI cuando esté
haciendo cosas.
Typings: Esto son definicionesdetiposusadospor laslibreríasqueusaun proyecto en Angular 2. Estos
tipostesirven paraqueel editor, graciasaTypeScript, puedainformartecon el "intellisense" en el acto de
escribir código, sobrelascosasrelacionadascon esaslibrerías.
Manual de Angular
D
e
m
o
m
e
t
o
e
s
o
e
s
t
o
d
o
,
e
s
p
e
r
a
m
o
s
q
u
e
e
s
t
a
v
i
s
t
a
d
e
p
á
j
a
r
o
t
e
s
i
r
v
a
d
e
u
t
i
l
i
d
a
d
p
a
r
a
r
e
c
o
n
o
c
e
r
l
a
estructurabásicadeun proyecto adesarrollar con Angular 2. En el siguiente artículo entraremosen detalle
yasobreel código, analizando por dentro algunasdeestascarpetasy archivosgenerados desdeAngular CLI
y realizando nuestrasprimeraspruebas.
Esteartículo esobradeAlbertoBasalo
Fuepublicado por primeravez en 20/ 06/ 2016
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ analisis-carpetas-proyecto-angular2.html
Vist a de pájaro al código de una aplicación Angular (4)
Una aproximación a los elementos principales que encontramos en una aplicación Angular,
versión 4, entendiendo el código.
En el capítulo anterior ofrecimosunadescripción general delaestructuradecarpetasdeunaaplicación
Angular, junto con algunosdesusprincipalesarchivos. Ahoravamosaintroducirnos en el código y tratar
deentender cómo estáconstruida, al menos cuál esel flujo deejecución delosarchivosquevamosa
encontrar.
Laaplicación quevamosaradiografiar eslaqueconseguimosmedianteel comando "ng new" del CLI.
Esperamosqueyatengastu aplicación generada. Si no esasí, terecomendamosanteslalecturadel artículo
deAngular CLI. Vamosausar laversión 4 deAngular, aunqueserviríaparacualquier versión del
framework apartir dela2.
Obviamenteno podremoscubrir todoslosdetalles, pero esperamosquedeesteartículo teofrezcabastante
luz sobrecómo seejecutan losarchivosprincipalesdeAngular. Verásqueiremossaltando deun archivo a
otro, dentro de laaplicación básicageneradacon "ng new", recorriendo básicamenteel flujo deejecución.
Al final tendrásun resumen completo delospasosdeeste recorrido queesperamostesirvaparaapreciarlo
demanerageneral.
Nota: lo cierto esqueesteartículo cubreAngular desdequesepasó aWebpack. En lasversiones
tempranasdeAngular 2, usaban SystemJSparalagestión y cargade dependencias. El código deuna
aplicación usando esaversión antiguayaseexplicó en el artículo Zambullidaen el código del proyecto
inicial deAngular 2.
Manual de Angular
Archivo Index.html
Esdesobrasabido quelasaplicacionesweb comienzan por un archivo llamado index.html. Con Angular
además, dado queseconstruyen páginasSPA (SinglePageApplication) estodavíamásimportanteel
index.html, puesen principio esel archivo quesirveparamostrar cualquier rutadelaaplicación.
El index.html en nuestraaplicación Angular, como cualquier otro archivo delosqueforman partedelaapp,
seencuentraen el directorio "src". Si lo abrespodrállamartelaatención al menosun par decosas:
Ausencia de Javascript:
No hay ningún Javascript deningún tipo incluido en el código. En realidad el código Javascript quesevaa
ejecutar parainicializar laaplicación esinyectado por Webpack y colocado en el index.html cuando la
aplicación seejecutao cuando sellevaaproducción.
El BODY prácticament e vacío:
En el cuerpo delapáginano apareceningún HTML, salvo unaetiqueta"app-root". Estaesunaetiquetano
estándar, queno existeen el HTML. En realidad esun componentequemantienetodo el código dela
aplicación.
Nota: Deberíamoshacer un stop al análisisdel código paranombrar la"Arquitecturadecomponentes".
En Angular y en lamayoríade librerías y frameworksactuales sehaoptado por crear lasaplicacionesen
baseacomponentes. Existeun componenteglobal, quees laaplicación enteray asu vez éstesebasaen
otroscomponentesparaimplementar cadaunadesus partes. Cadacomponentetieneuna
representación y unafuncionalidad. En resumen, lasaplicaciones seconstruyen medianteun árbol de
componentes, queseapoyan unosen otrospararesolver lasnecesidades. En el index.html encontramos
lo queseríael componenteraíz deesteárbol. Comenzamos aver másdetallesobreloscomponentesen
el siguienteartículo Introducción alos componentes en Angular 2.
Archivo main.t s
Como hemosvisto, no existeun Javascript definido o incluido en el index.html, pero sí seagregarámás
adelanteparaquelaaplicación funcione. Dehecho, si poneslaaplicación en marchacon "ng serve-o" se
abriráen tu navegador y, al ver el código fuenteejecutado podrásver quesí hay código Javascript, colocado
antesdecerrar el BODY del index.html.
Esecódigo estágenerado por Webpack, einyectado al index.html unavez lapáginaseentregaal navegador.
El script Javascript queel navegador ejecutaráparaponer en marchalaaplicación comienzapor el archivo
main.ts, queestáen lacarpeta"src".
Nota: Podríallamartelaatención queno esun archivo Javascript el quecontieneel código dela
aplicación, pero yadijimos en laIntroducción aAngular, queesteframework estáescrito usando el
lenguajeTypeScript. En algún momento esecódigo setraducirá, lógicamente, paraqueseconviertaen
Javascript entendiblepor todoslosnavegadores. Eseproceso lo realizaWebpack pero realmenteno
debe preocuparnosmucho yaqueesel propio Angular CLI quevaarealizar todas las tareasvinculadas
Manual de Angular
con Webpack y el compilador deJavascript paralatraducción del código, demaneratransparenteparael
desarrollador.
Si abresel main.tsobservarásquecomienzarealizando unaseriede"import", paracargar distintaspiezasde
código. Esosimport son típicosdeES6, aunqueen estecaso telosofreceel propio TypeScript, yaqueel
transpilador deestelenguajeesel quelosconvertiráaun Javascript entendiblepor todoslosnavegadores.
Losimport queencuentrasloshay dedostipos.
1.- imports de dependencias a librerías externas
Estosimport son código deotrosproyectos, dependenciasdenuestraaplicación. Están gestionadospor
npm y han sido declaradoscomo dependenciasen el archivo package.json quedeberíasconocer. Tienen la
forma:
import { enableProdMode } from '@angular/core';
En estecaso nosfijamosen '@angular/ core' queesunadelaslibreríasdependientesdenuestraaplicación,
instaladasvíanpm, cuyo código estáen lacarpeta"node_modules". En esacarpeta, decódigo deterceros,
nuncavamosatocar nada.
2.- Imports a código de nuest ro propio proyecto
También encontraremosimportsaelementosqueforman partedel propio código delaaplicación y quepor
tanto sí podríamostocar. Losdistinguesporquetienen estaforma:
import { AppModule } from './app/app.module';
Aquí nosfijamosen larutadel módulo queseestáimportando './ app/ app.module', queesrelativaal propio
main.ts.
Nota: en larutaal archivo queseestáimportando faltael ".ts", yaqueel archivo esun TypeScript. Pero
realmenteno sedebecolocar, puesto queesearchivo .tsen algún momento setraducirápor un archivo
.js. Parano liarse, recuerdaque losimport aarchivosTypeScript no secolocalaextensión.
Obviamente, paraprofundizar habríaqueentender quéescadaimport delosquesevan realizando, los
cualestendremostiempo deanalizar llegado el momento.
Ademásdelosimports, queescódigo quesevarequiriendo, hay un detallequeencontramosal final del
fichero:
Manual de Angular
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
Esto esel bootstrap, el arranque, delaaplicación, quepermitedecirleaAngular quétienequehacer para
comenzar adar vidaalaaplicación. Al invocar al sistemadearranqueestamosindicando quémódulo
(AppModule) esel principal delaaplicación y el quetieneloscomponentesnecesariosparaarrancar.
Al final, el bootstrap provocaráqueAngular leael código del módulo y sepaquécomponentesexisten en el
index, paraponerlosen marcha, provocando quelaaplicación empieceafuncionar, tal como sehaya
programado.
Nota: fíjateque paraarrancar laaplicación sehaceuso de los elementosquehemosimportado en las
líneas anteriores, entreellosplatformBrowserDynamic y AppModule.
Archivo app.module.t s
Deentretodoslosimportsquesehaceen el main.tshay uno fundamental, quenossirveparatirar del hilo y
ver quéeslo queestápasando por abajo, parahacer posiblequetodo comienceafuncionar. Setratade
app.module.ts, quepodemosconsiderar como el módulo principal delaaplicación.
En estefichero nosencontramos, como vieneyasiendo habitual, variosimportsdeelementosquevienen
deotrosmódulos, pero hay ademásdoscosasquepueden ser claveparaentender el flujo deejecución.
Import de nuestro componente raíz
En el módulo principal, app.module.ts, encontramosel import al componenteraíz delaaplicación (esa
etiquetaHTML no-estándar queaparecíaen el BODY del index).
import { AppComponent } from './app.component';
Estecomponenteesimportanteen estepunto porqueesel primero queestamosusando y porqueesel
único queteofrecen yaconstruido en laaplicación básicacreadacon el CLI deAngular.
Al importar el componentelo queestamosobteniendo esunareferencia"AppComponent", dondeestarála
clasecreadaparaimplementar el componente.
Decorador @NgModule
Estaeslaprimeravez quequizásestásconociendo losdecoradores, algo quevienedirectamenteotorgado
por TypeScript. Losdecoradorespermiten asignar metadataafunciones, clasesu otrascosas. Lasfunciones
decoradorastienen un nombrey lasusamosparaasignar esosdatos, quepodrían modificar el
comportamiento deaquello queseestádecorando.
Manual de Angular
E
l
d
e
c
o
r
a
d
o
r
c
o
m
p
l
e
t
o
e
n
l
a
v
e
r
s
i
ó
n
d
e
A
n
g
u
l
a
r
q
u
e
e
s
t
a
m
o
s
u
s
a
n
d
o
(
4
)
e
s
e
s
t
e
:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
Como ves, alafunción decoradoralaalimentamoscon un objeto pasado por parámetro, en el que
indicamosdiversosdatosútilesparalaclaseAppModule. Estedecorador seiráeditando y agregando nuevas
cosasamedidaquevayamosdesarrollando, por lo quenosresultarábastantefamiliar apoco que
comencemosadesarrollar con Angular.
En el decorador hay unapropiedad llamada"bootstrap", quecontieneun array con loscomponentesque
Angular tienequedar vida, paraconseguir quelascosascomiencen afuncionar: bootstrap:
[AppComponent]. Esto lediceaAngular quehay en el index.html hay un componenteimplementado con
laclaseAppComponent, quetienequeejecutar.
Componente raíz de la aplicación
Parallegar al meollo del código, tenemosqueobservar, aunquetodavíapor encima, el componenteraíz. Lo
habíamosusado en el index.html:
<app-root></app-root>
Pero echemosun vistazo al código del componente. Su rutalapuedesdeducir del import queseha
realizado en el app.module.ts, o sea"src/ app/ app.component.ts".
Demomento solo queremosqueencuentrestu segundo decorador, con el código siguiente.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
El selector o etiquetaqueimplementaestecomponente: "app-root". Justamenteeslaetiqueta
extrañaquehabíaen el index.html.
El archivo .html su template: "./ app.component.html".
LosestilosCSSqueseusan en el componente: "./ app.component.css"
Con lo queacabasdever, seráfácil abrir encontrar el archivo dondeestáel template. ¿no?Puedesabrirlo y
Manual de Angular
v
e
r
á
s
e
l
c
ó
i
g
o
H
T
M
L
q
u
e
a
p
a
r
e
c
í
a
a
l
p
o
n
e
r
e
n
m
a
r
c
h
a
l
a
a
p
l
i
c
a
c
i
ó
n
.
(
C
o
m
a
n
d
o
"
n
g
s
e
r
v
e
-
o
"
d
e
l
C
L
I
)
Resumen del fluj o de ej ecución de la aplicación básica Angular (4)
Somosconscientesquehemos aportado muchosdatos en esteartículo, quizásdemasiadosparaasimilarlos
en unaprimeralectura. Si todo esnuevo parati debedeser un poco complicado hacerseun esquema
perfecto del funcionamiento delascosas, así quevamosaparar un momento pararepasar denuevo el flujo
deejecución del código.
1. En el index.html tenemosun componenteraíz delaaplicación "app-root".
2. Al servir laaplicación (ng serve), o al llevarlaaproducción (ng build) laherramientaWebpack
generalospaquetes(bundles) decódigo del proyecto y colocaloscorrespondientesscriptsen el
index.html, paraquetodo funcione.
3. El archivo por el queWebpack comienzaaproducir losbundlesesel main.ts
4. Dentro del main.tsencontramosun import del módulo principal (AppModule) y lallamadaal
sistemadearranque(bootstrapModule) en laquepasamospor parámetro el módulo principal dela
aplicación.
5. En el módulo principal seimportael componenteraíz (AppComponent) y en el decorador
@NgModuleseindicaqueestecomponenteformapartedel bootstrap.
6. El código del componenteraíz tieneel selector "app-root", que eslaetiquetaqueaparecíaen el
index.html.
7. El templatedel componenteraíz, contieneel HTML quesevisualizaal poner en marchala
aplicación en el navegador.
Conclusión
Por fin hemosllegado aseguir laejecución delaaplicación, paraencontrar su contenido. Seguro que
habiendo llegado aestepunto sentirásunapequeñasatisfacción. Puedesaprender másdeloscomponentes
en el artículo Introducción aloscomponentesen Angular 2.
Somosconscientesquemucho del conocimiento haquedado en el airey hay muchasdudasquequerrás
resolver, pero con lo quehemosvisto hemosconseguido el objetivo planteado, disponer deunavistade
pájaro del código queencuentrasal iniciar tu aplicación Angular.
Puedescontinuar lalecturadel Manual deAngular paraobtener másinformación sobredecoradores,
componentes, y arranquedelasaplicaciones.
Esteartículo esobradeMiguel Angel Alvarez
Fuepublicado por primeravez en 05/ 10/ 2017
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ codigo-aplicacion-angular.html
Zambullida en el código del proyecto inicial de Angular 2
Comenzamos a analizar el código de un proyecto básico con Angular 2, en las primeras versiones,
generado con Angular CLI. Prestamos al index de la aplicación y al componente principal, que
podremos editar para comprobar el funcionamiento.
Manual de Angular
E
n
e
s
t
e
a
r
t
í
c
l
o
v
a
m
o
s
a
a
a
l
i
z
a
r
e
l
c
ó
d
i
g
o
d
e
l
a
a
p
l
i
c
a
c
i
ó
n
i
n
i
c
i
a
l
q
u
e
s
e
i
n
s
t
a
l
a
a
l
h
a
c
e
r
u
n
n
u
e
v
o
p
r
o
y
e
c
t
o
con Angular CLI. Ten en cuentaqueen artículosanterioresdel Manual deAngular 2 hemosabordado yaen
unaprimerainstancialaestructuradecarpetasgeneradapor Angular CLI, ademásdeexplicar cómo crearla
atravésdecomandosdeconsola.
Por tanto, noscentraremosen entender cuál esel flujo deejecución del código, junto con losarchivosque
sevan incluyendo y recorriendo al ejecutar laaplicación. Obviamente, habrácosasen lasqueno podamos
entrar todavíaen muchosdetalles, pero no hay quepreocuparseporqueserán materiadeestudio en
sucesivosartículos.
NOTA I MPORTANTE: El contenido deesteartículo aplica a versiones tempranas de Angular 2.
Al Principio el sistemaparalagestión depaquetes y dependenciaseraSystemJS. Sin embargo,
actualmente Angular trabaja con Webpack. Ya en la versión 2 de Angular se migró a Webpack y
hubo algunos cambios relevantes en lamaneradeconstruirselaaplicación básicadeAngular con el
Angular CLI. Espor ello queel contenido seguramenteno searelevanteparati. Si entender el código
de Angular 2 o Angular 4 por favor lee el artículo Vista de pájaro al código de una aplicación
Angular. Sin embargo, muchos datosofrecidosen el siguientetexto siguen teniendo vigenciay pueden
aclarar puntosinteresantes sobrelaprogramación usando esteframework.
Archivo package.j son
Vamosacomenzar por analizar estearchivo, yaquemuchascosasson declaradasinicialmenteen él. Al
analizar estearchivo encontraremosel origen demuchasdelaslibreríasqueusaAngular 2.
Como debessaber, package.json esun archivo en el quesedeclaran lasdependenciasdeunaaplicación,
gestionadasvíanpm. Su código esun JSON en el quesedeclaran variascosas.
Inicialmentehay quever lapropiedad "dependencies". En ellaencontraráslalibreríaAngular separadaen
variosmódulos. Estaesunadelascaracterísticasdelanuevaplataformadedesarrollo promovidapor
Angular 2, lamodularización del código. Encontrarásqueunaaplicación Angular 2 necesitayadeentrada
diversosmóduloscomo son "common", "compiler", "core", etc.
Luego hay unaseriedelibreríasdeterceros, no creadasdirectamentepor el equipo deAngular, o bien
creadaspor ellosmismospero con un enfoqueuniversal (capaz deusarseen otrostiposdeproyectos). Son
"es6-shim", "rxjs", etc.
Todosestosmódulosantesseincluían por medio descripts(etiquetaSCRIPT) en el HTML delapágina.
Pero en estaversión y graciasaAngular CLI yavieneincorporadaunamejor maneradeincluir módulos
Javascript, por medio de"SystemJS". Observarásqueel propio SystemJSestáincluido como dependencias
Manual de Angular
"
s
s
t
e
m
j
s
"
c
o
n
é
l
p
o
r
í
a
m
o
s
i
n
c
l
u
i
r
t
o
d
o
t
i
p
o
d
e
c
ó
d
i
g
o
,
n
o
s
o
l
o
J
S
,
s
i
n
o
o
t
r
o
s
f
i
c
h
e
r
o
s
n
e
c
e
s
a
r
i
o
s
c
o
m
o
CSS.
Nota: Al describir laestructuradecarpetasdel proyecto Angular 2 yaexplicamosquetodaslas
dependencias de package.json telasinstalanpm en lacarpeta"node_modules".
Entendiendo lo básico de SystemJS
Paracomenzar por nuestro análisisdel código, vamosaabrir el archivo "src/ index.html".
Como dijimos, lacarpetasrc esdondeseencuentran lasfuentesdetu proyecto. En ellaencontramosun
index.html queeslaraíz delaaplicación. Todo empiezaaejecutarseatravésdeestearchivo.
Tellamarálaatención el código siguiente:
{{#each scripts.polyfills}}<script src="{{.}}"></script>{{/each}}
Esecódigo haceun recorrido por unaseriedelibreríasy lasvacolocando dentro deetiquetas SCRIPT para
incluir su código en laaplicación. Demomento lo quedebessaber sobreestecódigo esquepor medio de él
secargan libreríasexternasquenecesitaAngular y quehemosvisto declaradasen las"dependencies" del
archivo package.json. Lo quenosinteresasaber esqueasí seestácargando, entreotras, lalibreríaSystemJS.
Ahora, en el final deindex.html encontrarásallí un script. Cuando llegamosaestepunto, SystemJSyaestá
cargado y en esteScript serealizaunainicialización deestalibreríaparacargar loselementosnecesariospara
comenzar atrabajar:
<script>
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
</script>
Encontramosel objeto "System", queesunavariableglobal definidapor lalibreríaSystemJS. Por medio del
método "import" consiguecargar módulos. Apreciarásqueseestácargando inicialmenteun archivo
llamado "system-config.js".
Luego vemosel método then() y catch(). Estosmétodoslosdeberíasdereconocer, puesson pertenecientes
aun patrón bien conocido por losdesarrolladoresJavascript, el depromesas. El método then() seejecutará
cuando seterminedecargar el módulo "system-config.js" y el método catch() seejecutaríaen caso queno
sehayapodido cargar esearchivo. Graciasathen(), despuésdehaber cargado "system-config.js" entonces
secargará"main", queenseguidaveremosquées.
En estepunto tepreguntarás¿Dóndeestásystem-config.js?. Quizásno lo encuentres, pero veasen lamisma
carpeta"src" el archivo system-config.ts. Eseesun archivo TypeScript quecontieneel código desystem-
Manual de Angular
c
o
f
i
g
.
j
s
a
t
e
s
d
e
t
r
a
n
s
p
i
l
a
r
c
o
n
e
l
T
y
p
e
S
c
r
i
p
t
C
o
m
p
i
l
e
r
.
Nota: TypeScript esun lenguajeparael programador. Lo queusael navegador es Javascript. El
TypeScript compiler seencargarádehacer esaconversión del .tsaun .js.
El archivo system-config.tsgeneralmenteno lo vasatener quetocar, porqueAngular CLI telo irá
actualizando. Si lo abressin dudairásreconociendo algunaslíneas, cosasquenecesitaráSystemJS. No
vamosaentrar ahoraen el detalle, demomento quédatecon queescódigo generado.
Por su partelareferenciaa"main" queteníamosantesen losimport del index.html System.import('main'),
esun import. No leponen ni siquieralaextensión del archivo "main.js" y esto esporque"main" esun alias
declarado en el system-config.ts. Fíjateen el código del archivo, en estaslíneas:
// Apply the CLI SystemJS configuration.
System.config({
map: {
'@angular': 'vendor/@angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js'
},
packages: cliSystemConfigPackages
});
El objeto "map" tieneunalistadealiasy archivosqueseasocian. Siendo que"main" correspondecon
"main.js". Nuevamente, no encontrarásun "main.js" entrelosarchivosdel proyecto, en lacarpeta"src",
porquelo quetendremosesun main.tsqueluego seconvertiráen el main.js.
Ahorapuedesabrir main.js. Verásquesu código nuevamentehaceuso deSystemJS, realizando diversos
imports. Estosimportsson como losqueconocesen ECMAscript 6 y básicamentelo quetetraen son
objetosdediversaslibrerías.
Encontrarásestecódigo en main.js, o algo similar:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { TestAngular2AppComponent, environment } from './app/';
Por ejemplo, estásdiciéndolequeimporteel objeto "bootstrap" delalibrería"@angular/ platform-browser-
dynamic". Esalibreríaestádeclaradadentro de"system-config.ts"
Luego verásotraslíneas, queesel bootstrap, o inicio delaaplicación Angular. No vamosaentrar en detalle,
pero eslo equivalenteal "ng-app" quecolocabasantesen el código HTML detu index. Esto, o algo
parecido yasepodíahacer con Angular 1 y seconocíacomo el arranquemanual deAngular.
Componente principal de una aplicación
Manual de Angular
S
e
g
i
m
o
s
a
n
a
l
i
z
a
d
o
i
n
d
e
x
.
h
t
m
l
y
e
n
c
o
n
t
r
a
m
o
s
e
n
e
l
c
ó
d
i
g
o
,
e
n
e
l
c
u
e
r
p
o
(
B
O
D
Y
)
u
n
a
e
t
i
q
u
e
t
a
q
u
e
l
l
a
m
a
r
á
laatención porqueno esdel HTML tradicional. Esel uso deun componentey su código seráalgo como:
<mi-nombre-proyecto-app>Loading...</mi-nombre-proyecto-app>
Eseesel componenteraíz denuestraaplicación Angular 2. Hablaremosdecomponentescon detallemás
adelante. Demomento paralo queteinteresaati, queesreconocer el flujo deejecución básico, hay que
decir quesu código estáen lacarpeta"src/ app".
En esacarpetaencontrarásvariosarchivosdel componentequeanalizaremoscon calmamásadelante. De
momento verásun archivo ".html" quecontienelavistadeestecomponentey un archivo ".css" que
contieneel CSS. Si tu componentesellamaba"mi-nombre-proyecto-app", estosarchivossellamarán "mi-
nombre-proyecto.component.html" y " mi-nombre-proyecto.component.css".
Paraterminar estaprimerazambullidaal código terecomendamoseditar esosarchivos. Escódigo HTML y
CSSplano, por lo queno tendrásningún problemaen colocar cualquier cosa, siemprequeseaHTML y CSS
correcto, claro está.
Paraquien useAngular 1 yareconoceráunaestructuracomo esta:
{{title}}
Esunaexpresión queAngular 2 sustituirápor un dato que sedeclaraen el archivo .tsdel componente. De
momento lo dejamosahí.
Ej ecutar el proyecto
Paracomprobar si tuscambiosen el HTML del componentehan tenido efecto puedesprobar el proyecto.
Laejecución deestaaplicación yalavimosen el artículo de Angular CLI, por lo queno necesitarásmayores
explicaciones. Detodosmodos, como resumen, siguelospasos:
Desdelaraíz del proyecto, con el terminal, ejecutamosel comando:
ng serve
Luego nosdirigimosalaURL quenosindican como resultado delaejecución del comando, queseráalgo
como:
http://localhost:4200/
Entoncesdeberíasver lapáginafuncionando en tu navegador, con el HTML editado tal como lo hasdejado
en el archivo .html del componenteprincipal.
En futurosartículosprofundizaremossobremuchosdelospuntosrelatadosaquí. Demomento creemos
Manual de Angular
q
u
e
e
s
t
a
i
n
t
r
o
d
u
c
i
ó
a
l
c
ó
d
i
g
o
d
e
b
e
a
c
l
a
r
a
r
t
e
m
u
c
h
a
s
c
o
s
a
s
,
o
p
l
a
n
t
e
a
r
t
e
m
u
c
h
a
s
o
t
r
a
s
d
u
d
a
s
.
Si estu caso, no tepreocupespor sentirtedespistado por tantosarchivosy tantascosasnuevas, puespoco a
poco iremosfamiliarizándonos perfectamentecon todaestainfraestructura. Paratu tranquilidad, decir que
estaeslapartemáscomplejay que, apartir deaquí, lascosasserán másagradecidas. Si ademásvienesde
Angular 1, empezarásareconocer mejor laspiezasqueantesexistían en el framework.
Esteartículo esobradeAlbertoBasalo
Fuepublicado por primeravez en 29/ 06/ 2016
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ codigo-proyecto-inicial-angular2.html
Introducción a los componentes en Angular
Un primer acercamiento al mundo de los componentes en Angular (2 en adelante), a través del
componente inicial que se crea en todo nuevo proyecto. Aprenderás a reconocer sus partes y
realizaremos unas modificaciones.
En Angular sedesarrollaen baseacomponentes. Desdelaaplicación másbásicadeAngular (2, 4 o en
adelante), el HolaMundo, todo tienequecomenzar por un componente. Nuestraaplicación
"componetizada" seconstruirá, laverdad, en baseaun árbol decomponentesde"n" niveles, desdeun
componente principal asushijos, nietos, etc.
Por si no lo sabes, loscomponentesson como etiquetasHTML nuevas, quepodemosinventarnospara
realizar lasfuncionesquesean necesariasparanuestro negocio. Pueden ser cosasdiversas, desdeuna
sección denavegación aun formulario, o un campo deformulario. Paradefinir el contenido deestanueva
etiqueta, el componente, usasun poco deHTML con su CSSy por supuesto, un poco deJavascript para
definir su funcionalidad.
Básicamenteeso esun componente, unadelaspiezasfundamentalesdelasaplicacionesen Angular, que
nostraediversosbeneficiosquemejoran sensiblementelaorganización deunaaplicación, su
mantenimiento, reutilización del código, etc.
Paracomenzar aintroducirnosen el desarrollo en baseacomponentesvamosarealizar en esteprimer
artículo un análisisdel componenteinicial, quecontienedetodaaplicación Angular y quepodemos
encontrar en el proyecto básico creado víaAngular CLI.
Manual de Angular
Localizar el componente inicial
En el Manual deAngular 2 hemosvisto quenuestraaplicación sedesarrollaen el directorio "src". Allí
encontramosel archivo index.html raíz delaaplicación.. Si lo abresverásqueno tieneningún contenido en
sí. Apenasencontrarásel uso deun componente, unaetiquetaqueno perteneceal HTML. Esfácil
localizarlo porqueesel único contenido del BODY delapágina.
<app-root></app-root>
Nota: Dependiendo detu versión deAngular estecomponentepuedetener un nombrediferente.
Además, también puedecambiar su nombredependiendo delaconfiguración del Angular CLI, que
escribesen el archivo ".angular-cli.json". En principio todos los componentessecrean con el prefijo
"app", por lo quesiempreempiezan con esasletrasy un guión, como "app-root". Pero podríascambiar
el prefijo editando el fichero deconfiguración en lapropiedad "prefix" y colocando cualquier otro valor.
Ejemplo "prefix": "dw".
Esteesel componentedondetu aplicación Angular 2 vaadesarrollarse. Todoslosdemáscomponentes
estarán debajo deéste, unosdentro deotrosen un árbol. Todo lo queocurraen tu aplicación, estarádentro
deestecomponente.
Nota: En versionestempranasdeAngular 2 habíaun texto como contenido dentro del componente
(Loading...) eslo que apareceráen el navegador mientrasno cargalapágina. Unavez quelaaplicación se
inicie, Angular lo sustituirápor el contenido definido parael propio componente, cuando arranquela
aplicación.
Si al arrancar laaplicación (ng-serve) vesqueesemensajede"Loading... " tardaen irseesporqueestás
en modo dedesarrollo y antesdeiniciarselaapp tienen quehacersevariastareas extra, como transpilado
decódigo, queno senecesitarán hacer cuando estéen producción.
Entendiendo el código del componente
El código deestecomponenteestágenerado deantemano en lacarpeta"src/ app". Allí encontrarásvarios
ficherosqueforman el componentecompleto, separadospor el tipo decódigo quecolocarásen ellos.
app.component.html: Equivalealo queconocemospor "vista" en laarquitecturaMVC.
app.component.css: Permitecolocar estilosal contenido, siendo queéstosestán encapsuladosen
estecomponentey no salen afuera.
app.component.ts: Esel corazón denuestro componente, un archivo con código TypeScript, que
setraduciráaJavascript antesdeentregarseal navegador. Por si tesirvelacomparación, seríael
equivalenteal controlador en el MVC, aunqueen Angular 2 desapareció el controlador tal como se
conocíaen AngularJS(1.x).
app.component.spec.ts: Un archivo TypeScript destinado atareasdetesting decomponentes.
Vista del component e: app.component .html
Manual de Angular
E
n
e
s
t
e
a
r
i
v
o
e
n
o
t
r
a
r
á
s
d
i
v
e
r
s
o
c
o
n
t
e
n
i
d
o
,
e
x
p
r
e
s
a
d
o
e
n
c
ó
d
i
g
o
H
T
M
L
.
C
o
m
o
h
e
m
o
s
d
i
c
h
o
,
e
s
t
e
archivo eslo queseríalavistay admitetodaclasedecódigo HTML, con etiquetasestándar y el uso deotros
componentes. Ademáspodemoscolocar expresiones, declarar bindigentrecomponentes, eventos, etc.
Nota: Losqueno conozcan detodo eso queestamoshablando (expresiones, eventos, binding, etc.) no
sepreocupen, porquelo veremosmásadelante.
Dentro del HTML delavista, entreotrascosas, encontrarás:
{{title}}
Eso esunaexpresión. Angular lo sustiruirápor el contenido deunavariable"title" antesdemostrarlo al
cliente. Esavariablesedefineen ladeclaración del componente.
Declaración del componente: app.component .ts
Esteesel archivo con el script necesario paralacreación del componente, creado mediantecódigo
TypeScript. Escomo el controlador en el patrón MVC, solo queen Angular 2 no selellamacontrolador, o
"controller". Ahoraesunaclasenormal, deprogramación orientadaaobjetos, como lasquenosofreceES6,
sólo queaquí esTypeScript quien noslafacilita.
Si abresel archivo app.component.tsencontrarásvariascosas.
El import de"component" dentro de@angular/ core
Unafunción decoradoraquehacelaacción deregistrar el componente
Laclasequehacelasvecesdecontrolador
Lafunción decoradoraobservarásquedeclaradiversascuestiones.
@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
Unadeellasesel "selector" deestecomponente, o el nombredelaetiquetaqueseusarácuando sedesee
representar. Mediantelapropiedad "templateUrl" asociamosun archivo .html queseusarácomo vistadel
componente. Por último sedefinesu estilo mediantelapropiedad "styleUrls", indicando aun array detodas
lashojasdeestilo quedeseemos.
En laclasedel componente, quesedebecolocar con un export paraqueseconozcafueradeestemódulo,
eslapartequerepresentael controlador en unaarquitecturaMVC. En ellacolocaremostodaslas
propiedadesy métodosquesedeseen usar desdelavista.
Manual de Angular
export class AppComponent {
title = 'proyecto-angular2 works!';
}
Esaspropiedadesrepresentan el modelo dedatosy sepodrán usar expresionesen lasvistasparapoder
visualizarlas.
Nota: Observaademásqueel nombredelaclasedeestecomponentetieneunaformaespecial.
Mientrasqueel nombredelaetiquetadel componente(su "selector") tienelaspalabrasseparadaspor
guiones, aquí tenemosunanotación "PascalCase" típicade lasclases(classdeprogramación orientadaa
objetos). Esto esunaconstante: En el HTML queno sereconocen mayúsculasy minúsculasseseparan
las palabraspor guionespor guiones, colocando todo en minúscula. Por su parte, losmismosnombres
en Javascript seescriben con "PascalCase", todo junto y con laprimeraletradecadapalabraen
mayúscula.
Alterando el código de nuestro componente
Paraterminar esteartículo vamosahacer unospequeñoscambiosen el código del componentepara
comprobar si lamagiadeAngular estáfuncionando.
Algo muy sencillo seríacomenzar por crear unanuevapropiedad en laclasedel componente. Pero vamos
ademásacolocar un método parapoder usarlo también desdelavista.
export class ProyectoAngular2AppComponent {
title = 'Manual de Angular de DesarrolloWeb.com';
visible = false;
decirAdios() {
this.visible = true;
}
}
Nota: Estaclase"class" seescribeen un archivo TypeScript, pero realmentelo que vemosescasi todo
Javascript válido en ES6 y ES7. TypeScript entiendetodo ES6 eincluso algunascosasdeES7.
Ahoravamosaver el código HTML quepodríatener nuestravista.
<h1>
{{title}}
</h1>
<p [hidden]="!visible">
Adiós
</p>
<button (click)="decirAdios()">Decir adiós</button>
Manual de Angular
En esteHTML hemosincluido máscosasdelasquepuedesusar desdeAngular. Habíamosmencionado la
expresión, entrellavesdobles, quepermitevolcar el contenido depropiedadesdel componente. También
encuentrasel uso deunapropiedad deun elemento, como es"hidden", entrecorchetes (nuevo en Angular
2). Ademásdeladeclaración deun evento "click" quesecolocaentreparénteis.
Nota: En el siguienteartículo explicaremoscon detalletoda estasintaxisnuevaquepodemosusar en las
vistasparadeclarar eventos, hacer data-binding, etc.
Otro detallequepuedesobservar eslapropiedad "visible" del componente, queseusaparaasignarlaal
atributo hidden del elemento "p". El método delaclase, decirAdios() seusaparaasociarlo como manejador
del evento "click".
Hablaremosmásadelantedetodasestascosasquepuedescolocar en lasvistasy algunasotras, junto con las
explicacionessobrelasintaxisquesedebeusar paradeclararlas.
Nota: Al modificar losarchivos del componente, cualquieradeellos, tanto el html, csso ts, sedebería
refrescar automáticamentelapáginadondeestásvisualizando tu proyecto unavez puesto en marchacon
el comando "ng serve", graciasal sistemade"live-reload" quetemontaAngular CLI en cualquier
proyeto Angular 2.
Otracosainteresantedel entorno detrabajo esque, si usasVisual Studio Codeu otro editor con los
correspondientesplugin TypeScript, teinformarán deposibleserroresen losarchivos.js. Esunaayudamuy
útil queaparecesegún estásescribiendo.
Con esto acabamosnuestro primer análisisy modificacionesen el componenteinicial. Estamossegurosque
estaúltimaparte, en laque hemosmodificado el código del componentebásico, habráresultado yaalgo más
entretenida.
Esteartículo esobradeAlbertoBasalo
Fuepublicado por primeravez en 06/ 07/ 2016
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ introduccion-componentes-angular2.html
Sintaxis para las vistas en Angular
Expresiones, binding, propiedades, eventos. Son muchas cosas las que podemos expresar en las
vistas H TML de las aplicaciones Angular 2. Te ofrecemos una introducción general.
En losartículos anterioresdel Manual deAngular hemosanalizado laestructuradeunaaplicación básica.
Unadelascosasfundamentalesqueencontramosesel componenteprincipal, sobreel cual hemoshecho
pequeñasmodificacionesparacomprobar quelascosasestán funcionando y comenzar aapreciar el poder
Manual de Angular
d
e
l
f
r
a
m
e
w
o
r
k
.
Dentro del componentebásico encontramosvariosarchivosy uno deellosesel código HTML del
componente, al quecomúnmentenosreferiremoscon el nombrede"vista", denominación quevienepor el
patrón dearquitecturaMVC. Puesbien, en esecódigo HTML -lavista-, demaneradeclarativa, podemos
definir y usar muchasdelaspiezascon lasquecontamosen unaaplicación: propiedades, eventos, bindeo…
Lanovedad en Angular (2, 4 y en adelante), paralosquevienen delaversión anterior del framework, es que
ahorapodemos ser mucho másprecisossobrecómo queremosquelainformación fluyaentre
componentes, entrelavistay el modelo, etc. En esteartículo vamosaofrecer unaprimeraaproximación
general atodo lo quesepuededeclarar dentro deunavista, teniendo en cuentaquemuchasdelascosas
necesitarán artículosespecíficosparaabordarlasen profundidad.
Nota: En esteartículo, así como alo largo del manual, hacemos uso constantementedeconceptosdel
MVC. Recordamosqueexisteun artículo genérico delo queesel MVC, introducción al modelo vista
controlador. Detodosmodos, en Angular 2 no se aplicaunaimplementación perfectamenteclarasobre
el MVC. Existeunaseparación del código por responsabilidades, lo queyanosaportalosbeneficiosde
laarquitecturapor capas, pero laimplementación y característicasdeestascapasno quedatan definida
como podríadarseen un framework backend. En esteartículo y los siguientesverásquehacemos
referenciaalos modelosy realmenteno esqueexistaunaclaseo algo concreto dondese colocael
código del modelo. Esemodelo realmentesegeneradesdeel controlador y paraello el controlador
puedeobtener datosdediversasfuentes, como serviciosweb. Esos datos, tanto propiedades como
métodos, sepodrán usar desdelavista. Esalgo másparecido aun VW (View Model), o sea, un modelo
paralavista, quesecreaen el controlador. Por otraparte, tampoco existe un controlador, sino unaclase
queimplementael View Model decadacomponente. En resumen, conocer el MVC teayudaráa
entender laarquitecturapropuestapor Angular 2 y apreciar susbeneficios, pero debemosmantener la
menteabiertaparano confundirnoscon conocimientosqueyapodamostener deotros frameworks.
HTML permitido en los Templates de Angular
Lostemplatesdeloscomponentes. o vistasdeloscomponentes, yasean colocadosinlineen el próximo
código TypeScript o en un archivo aparte, seescriben con HTML y permiten colocar mediantelasintaxisde
Angular expresiones, bindeos, eventos, etc. quevamosaintroducir en esteartículo.
Casi todo el HTML válido esun código potencialmenteusableen lostemplatesdeAngular. Sin embargo
hay algunasexcepcionesqueconvieneconocer.
No está permitido colocar scripts Javascript en el template
Manual de Angular
L
a
m
á
s
i
m
p
o
r
t
a
n
t
e
e
c
e
p
i
ó
n
d
e
H
T
M
L
v
á
l
i
d
o
a
u
s
a
r
e
n
u
n
t
e
m
p
l
a
t
e
(
u
n
a
v
i
s
t
a
)
e
s
l
a
e
t
i
q
u
e
t
a
S
C
R
I
P
T
,
y
a
quepuedeser origen deproblemasdeseguridad. Bajo el prismadelaseparación del código por
responsabilidades, no deberíamoscolocar unaetiquetaSCRIPT dentro deun template, pueslapartedel
desarrollo delalógicadeloscomponentessedeberíacolocar en el código TypeScript.
Pero, aún cometiendo laimprudenciao malaprácticadecolocar unaetiquetaSCRIPT, Angular harácaso
omiso deellay no ejecutaráesecódigo Javascript, evitando posiblesproblemaseinyeccionesdecódigo no
deseado.
Nota: esto mismo ocurresi en unacadenavolcadaen un templatepor interpolación {{}} o bindeo a
propiedad [[]] contieneunaetiquetaSCRIPT. Angular sedaráel trabajo desanitizar el código acolocar
en el template, evitando problemas como lainyección de código (xss).
Mástardeen esteartículo explicamoslainterpolación (sintaxis{ { } } doblesllaves) y el bindeo a
propiedades(sintaxis[[]] dobles corchetes), queson dosde las principalespiezasdeclarablesen una
vista. Aunqueen ocasioneslainterpolación lanombraremoscomo "expresiones" y el bindingaa
propiedad lo nombramossimplementecomo "propiedad". Nos referimosalo mismo, esperamosno
liarte.
No tiene sentido usar ciertas etiquetas
Hay otrasetiquetasquetampoco tienesentido usarseen un template, como BODY o HEAD. Un
componente esunaparteconcretadelapágina, no lacabecera, ni el cuerpo, por lo queno tendrían ninguna
utilidad colocar esasetiquetasen un template.
Otraetiquetano usableesBASE, quesirveparaindicar por ejemplo larutadebasealaqueaplicar todaslas
rutasrelativasdelosenlacesen todo el documento HTML.
Por lo demás, puedesusar prácticamentecualquier otro HTML disponibleen el lenguajedemarcación.
Piezas declarables en una vista
Comenzaremospor describir lascosasquedisponemosparasu declaración en unavista, demodo que
todospodamos usar un único vocabulario.
Propiedad: Cualquier valor quepodemosasignar por medio deun atributo del HTML. Ese
elemento puedeser simplementeun atributo del HTML estándar, un atributo implementado
medianteel propio Angular 2 o un atributo personalizado, creado paraun componenteen
específico.
Expresión: Esun volcado decualquier información en el texto delapágina, como contenido a
cualquier etiqueta. Laexpresión esunadeclaración queAngular procesaráy sustituirápor su valor,
pudiendo realizar sencillasoperaciones.
Binding: Esun enlaceentreel modelo y lavista. Medianteun binding si un dato cambiaen el
modelo, esecambio serepresentaen lavista. Pero ademásen Angular seintroduceel "doble
binding", por el cual si un valor semodificaen lavista, también viajahaciael modelo. Con la
novedad en Angular (2 en adelante) queel doblebindingesopcional.
Evento: esun suceso queocurrey parael cual sepueden definir manejadores, queson funciones
Manual de Angular
q
u
e
s
e
e
j
e
t
a
r
á
c
o
m
o
r
e
s
p
u
e
s
t
a
a
e
s
e
s
u
c
e
s
o
.
Nota: Generalmentecuando hablemosde"binding" en lamayoríadelasocasionesnosreferimosa
"doblebinding", queeslaprincipal novedad quetrajo Angular 1 y queleprodujo tanto éxito paraeste
framework. Sin embargo, este mismo doblebinding es un armade doblefilo, puespuededisminuir el
rendimiento delaaplicación y en ocasionespuedeproducir un flujo dedatosdifícil deentender y
depurar.
Debido al costeoperacional del doblebinding(costeen tiempo deprocesamiento si laaplicación esmuy
complejay seproducen muchosenlaces), lavelocidad deAngular puedeverseafectada. Esel motivo por el
quesehan producido nuevassintaxisparapoder expresar bindingsdevariostipos, deunay dedos
direcciones. Dicho deotramanera, ahoraseentregaal programador el control del flujo delainformación,
paraqueéstepuedaoptimizar el rendimiento delaaplicación.
Flujo de la información de la vista al modelo y modelo a vista
El programador ahoraserácapaz deexpresar cuándo unainformación debeir del modelo hacialavistay
cuándo debeir desdelavistaal modelo. Paraello usamoslasanteriores"piezas" o "herramientas" en el
HTML, lascualestienen definidadeantemano un sentido parael flujo delosdatos.
En el siguientediagramapuedesver un resumen del flujo delainformación disponibleen Angular, junto
con laspiezasdondepodemosencontrarlo y su sintaxis.
1. Laspropiedadestienen un flujo desdeel modelo alavista. Unainformación disponibleen el
modelo sepuedeasignar como valor en un elemento del HTML medianteunapropiedad, usando la
notación corchetes. Por ej: [propiedad]
2. Lasexpresionestambién viajan desdeel modelo alavista. Ladiferenciadelaspropiedadesesqueen
estecaso lasusamoscomo contenido de un elemento y ademásqueseexpresan con doblesllaves.
Por ej: { { expresión} }
3. El binding (adossentidos, o doblebinding) lo expresamosentrecorchetesy paréntesis. En este
caso lainformación fluyeen ambossentidos, desdeel modelo alavistay desdelavistaal modelo.
Por ej: [(ngBind)]
4. Loseventosno esquenecesariamentehagan fluir un dato, pero sí seconsideraun flujo de
Manual de Angular
a
p
l
i
c
a
i
ó
n
,
e
e
s
t
e
a
s
o
d
e
l
a
v
i
s
t
a
a
l
m
o
d
e
l
o
,
y
a
q
u
e
s
e
o
r
i
g
i
n
a
n
e
n
l
a
v
i
s
t
a
y
g
e
n
e
r
a
l
m
e
n
t
e
s
i
r
v
e
n
paraejecutar métodosqueacabarán modificando cosasdel modelo. Por ej: (evento)
Nota: Como ves, ahoraexisten diversas sintaxisparaexpresar cosasen lasvistas. Quizásnosresulte
extraño, pero enseguidanosfamiliarizaremos. Lanotación másraraeslaqueusamosparaexpresar un
binding en dosdirecciones [(ngBing)], pero unamanerasencilladeacordarnosdeellaes con su
denominación anglosajona"bananain abox". Losparéntesisparecen unabanana, dentro delos
corchetes, queparecen unacaja.
Ej emplos de sintaxis utilizada en vistas de Angular 2
Realmenteyahemosvisto ejemplosdebuenaparte delaspiezasposiblesadeclarar en unavista. Si tefijas
en el artículo anterior dedicado alaIntroducción aloscomponentesen Angular 2. Ahoralespodemosdar
nombresacadauno deloselementosencontrados.
Propiedades:
Erael caso delapropiedad "hidden" queusamosparamostrar / ocultar determinadoselementos. En este
caso, hidden no esunapropiedad estándar del HTML, sino queestágeneradapor Angular 2 y disponible
paraaplicar tanto en etiquetasHTML comunescomo en componentespersonalizados.
<p [hidden]="!visible">Adiós</p>
También podríamosaplicar valoresaatributosdel HTML con datosqueestán en propiedadesdel modelo,
aunqueno soportatodoslosatributosdel HTML estándar. Por ejemplo, podríamosasignar unaclaseCSS
(class) con lo quetuviésemosen unapropiedad del modelo llamada"clase".
<div [class]="clase">Una clase marcada por el modelo</div>
O el enlacedeun enlacepodríamostambién definirlo desdeunavariabledel modelo con algo como esto:
<a [href]="enlace">Pulsa aquí</a>
En el código anterior sesuponequeel componentetendráunapropiedad llamada"enlace", queservirápara
volcar su contenido en el href delaetiquetaA.
En general, el uso máscorrientequeharemosdelaspropiedadesespersonalizar el estado o
comportamiento del componente, mediantedatosquetengamosen el modelo. Veremosestecaso más
adelantecuando analicemoscon mayor detalleloscomponentes.
Lo quedemomento debequedar claro esquelaspropiedadesvan desdeel modelo alavistay, por tanto, si
semodificael valor deunapropiedad en el modelo, también semodificarálavista. Pero, si dentro dela
vistasemodificaunapropiedad no viajaráal modelo automáticamente, puesel enlaceesdeunasola
Manual de Angular
d
i
r
e
c
i
ó
n
.
Obtendrásmásdetallessobreel bindeo apropiedad en el artículo dedicado aProperty binding deAngular.
Expresiones:
Esel caso delapropiedad del modelo "title" quesevuelcacomo contenido delapáginaen el
encabezamiento.
<h1>
{{title}}
</h1>
Simplementeexisteesasustitución del valor delapropiedad, colocándoseen el texto delapágina. El enlace
esdeunaúnicadirección, desdeel modelo alavista. En lavistatampoco habríaposibilidad demodificar
nada, porqueesun simpletexto.
El caso depropiedadesdel HTML con valoresquevienen del modelo también podríamosimplementarlo
por medio deexpresiones, tal como sigue.
<a href="{{enlace}}">Clic aquí</a>
Nota: Lasdosalternativas(usar expresionescon las llaves o los corchetesparapropiedades, como
hemosvisto parael ejemplo deun href deun enlacecuyo valor traesdel modelo) funcionan
exactamenteigual, no obstanteparaalgunoscasosserámejor usar lasintaxisdepropiedadesen vez de la
deexpresiones, como esel caso del enlace. Algo queentenderemosmejor cuando lleguemosal sistema
derutas.
Explicamosmássobrelasexpresionesen el artículo sobreString interpolation deAngular.
Eventos:
Esto también lo vimosen el artículo anterior (introducción acomponentes), cuando asociamosun
comportamiento al botón. Indicamosentreparéntesisel tipo deevento y como valor el código quesedebe
deejecutar, o mejor, lafunción quesevaaejecutar paraprocesar el evento.
<button (click)="decirAdios()">Decir adiós</button>
Con respecto aAngular 1.x entenderásqueahoratodaslasdirectivascomo ng-click desaparecen, dado que
ahoraloseventos solo lostienesquedeclarar con losparéntesis. Esto esinteresanteyadeentrada, porque
nospermitedefinir deunaúnicamaneracualquier evento estándar del navegador, pero esmásinteresante
todavíacuando comencemosausar componentespersonalizados, creadospor nosotros, quepodrán
disparar también eventospersonalizados. Capturar esoseventospersonalizadosserátan fácil como capturar
Manual de Angular
l
o
s
e
v
e
n
t
o
s
e
s
t
á
a
r
d
e
l
H
T
M
L
.
Doble binding:
Paraesteúltimo caso no hemosvisto todavíaunaimplementación deejemplo, pero lo vamosaconseguir
muy fácilmente. Como sedijo, usamoslanotación "bananain abox" paraproducir estecomportamiento de
bindingen dosdirecciones. Losdatosviajan delavistaal modelo y del modelo alavista.
<p>
¿Cómo te llamas? <input type="text" [(ngModel)]="quien">
</p>
En estecaso, desdeel HTML estaríamoscreando unapropiedad dentro del modelo. Esdecir, aunqueno
declaremoslapropiedad "quien" en el Javascript, por el simple hecho deusarlaen laestructuradebinding
vaaproducir quesedeclareautomáticamentey seinicialice con lo quehayaescrito en el campo detexto. Si
ladeclaramos, o lainicializamosdesdelaclasequehacelas vecesdecontrolador, tanto mejor, pero no será
necesario.
ACTUALIZADO: Ten muy en cuentaqueparapoder usar ngModel necesitasimportar un módulo
adicional, disponiblemedianteel propio Angular, pero queno vienecargado por defecto. Esto ocurre
desde Angular 4. Ahora, cuando quierasusar la directiva ngModel tendrás que hacer el import de
FormsModule. En estemomento del manual esun poco pronto paraexplicar todoslosdetallesdeesta
importación. Lo tendrástodo másclaro másadelante, cuando hablemosespecíficamentedelosmódulosy
sobretodo en el artículo en el queexplicamostodaslasposibilidadesdeladirectivangModel.
Nota: Lanotación "bananain abox" tieneunaexplicación y es queusatanto el flujo dedatosdesdeel
modelo alavista, queconseguimoscon loscorchetesparalaspropiedades, como el flujo desdelavista
al modelo queconseguimos con losparéntesisparaloseventos.
Paraquien conozcaAngular 1.x, ngModel funcionaexactamenteigual quelaantiguadirectiva. En resumen,
leasignamosel nombredeunapropiedad en el modelo, en estecaso "quien", con laquesevaaconocer ese
dato. A partir deentonceslo quehayaescrito en el campo detexto viajarádelavistaal modelo y si cambia
en el modelo también seactualizarálavista, produciendo el binding en lasdosdirecciones.
Si quisiéramosvisualizar esedato en algún otro delavista, por ejemplo en un párrafo, usaríamosuna
expresión. Por ejemplo:
<p>
Hola {{quien}}
</p>
Conclusión
Con lo quehemosaprendido hastaaquí tenemosunabaseinicial con laquecomenzar ausar Angular y
Manual de Angular
r
e
a
l
i
z
a
r
p
e
q
u
e
ñ
o
s
e
j
e
m
p
l
o
s
s
i
n
p
e
r
d
e
r
n
o
s
d
e
m
a
s
i
a
d
o
.
P
o
d
e
m
o
s
d
e
c
i
r
q
u
e
h
e
m
o
s
d
a
d
o
n
u
e
s
t
r
o
p
r
i
m
e
r
p
a
s
o
en el aprendizaje. Terecomendamosparar un instantelalecturadel Manual deAngular paraexperimentar
un poco por tu cuenta, cambiando el código en lavistay en el componenteraíz delaaplicación, para
afianzar esteconocimiento
En lospróximosartículosdel manual vamosaabordar con mayor detalleel modelo decomponentes,
construyendo nuevoscomponentesen nuestro proyecto y practicando con todo lo visto hastaahora.
Nuestro siguientepaso esexplicar con mayor detallecómo eslaarquitecturadecomponentes, yaqueesun
concepto importanteen el desarrollo con Angular.
Esteartículo esobradeMiguel Angel Alvarez
Fuepublicado por primeravez en 19/ 07/ 2016
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ sintaxis-vistas-angular2.html
Manual de Angular
Los componentes en Angular
Abordamosel desarrollo basado en componentescon todo detalle. EslapiezamásimportantedeAngular
quenospermitiráno solo estructurar unaaplicación deunamaneraordenada, sino encapsular funcionalidad
y facilitar unaarquitecturaavanzaday defácil mantenimiento delosproyectosJavascript con lanueva
versión deesteframework.
El concept o de los componentes en Angular y su arquitectura
Qué es un componente para Angular y cómo usaremos los componentes para realizar la
arquitectura de una aplicación.
En esteartículo del Manual deAngular 2 queremosabordar el concepto del componentedesdeun punto de
vistateórico, sin entrar aver cómo seconstruyen en Angular 2. Esaparteprácticaladejaremosparael
próximo artículo, aunquecaberecordar, paralosqueseimpacientan por ver código, queyadimosuna
zambullidaen el código deloscomponentescuando comenzamoscon el "holamundo".
El objetivo esentender mejor cuál eslaarquitecturapromovidapor Angular 2 parael desarrollo de
aplicacionesy quépapel específico desempeñan loscomponentes. Esimportanteporquetodaaplicación
Angular 2 sedesarrollaen baseacomponentesy porqueesalgo relativamentenuevo en el framework.
Árbol de componentes
Unaaplicación Angular 2 sedesarrollaabasedecrear componentes. Generalmentetendrásun árbol de
componentesqueforman tu aplicación y cadapersonalo podráorganizar desu manerapreferida. Siempre
existiráun componentepadrey apartir deahí podrán colgar todaslas ramasquesean necesariasparacrear
tu aplicación.
Esto no resultaránadaextraño, puessi pensamosen unapáginaweb tenemosun mismo árbol deetiquetas,
siendo BODY laraíz delapartedel contenido. Ladiferenciaesquelasetiquetasgeneralmenteson para
mostrar un contenido, mientrasqueloscomponentesno solo encapsulan un contenido, sino también una
funcionalidad.
Manual de Angular
E
n
n
e
s
t
r
o
á
r
b
o
l
,
o
m
o
p
o
s
i
b
l
e
o
r
g
a
n
i
z
a
c
i
ó
n
,
p
o
d
e
m
o
s
t
e
n
e
r
e
n
u
n
p
r
i
m
e
r
n
i
v
e
l
l
o
s
b
l
o
q
u
e
s
p
r
i
n
c
i
p
a
l
e
s
d
e
lapantalladenuestraaplicación.
Unabarradeherramientas, con interfacesparaaccionesprincipales(lo quepodríaser unabarrade
navegación, menús, botonera, etc.).
Unaparteprincipal, dondesedesplegarán lasdiferentes"pantallas" delaaplicación.
Un áreadelogueo deusuarios.
Etc.
Nota: Obviamente, eseprimer nivel decomponentesprincipaleslo dictaráel propio proyecto y podrá
cambiar, pero lo anterior nossirveparahacernosunaidea.
Luego, cadauno deloscomponentesprincipalessepodrásubdividir, si sedesea, en nuevosárbolesde
componentes.
En labarradeherramientasprincipal podríamostener un componentepor cadaherramienta.
En el áreaprincipal podríamostener un componenteparacada"pantalla" delaaplicación o "vista".
A su vez, dentro decada"vista" o "pantalla" podíamostener otraseriedecomponentesque
implementen diversas funcionalidades.
Etc.
Losnivelesdel árbol serán losque cadaaplicación mande, atendiendo asu complejidad, y cadadesarrollador
estimenecesario, en función desu experienciao preferenciasdetrabajo. A medidaquecomponetizamos
conseguimosdividir el código delaaplicación en piezasmenores, con menor complejidad, lo que
seguramenteseabeneficioso.
Si llegamosaun extremo, y nospasamosen nuestraansiadecomponetizar, quizásobtengamosel efecto
contrario. Esdecir, acabemosagregando complejidad innecesariaalaaplicación, puesto queexisteun coste
detiempo detrabajo y recursosdeprocesamiento paraposibilitar el flujo decomunicación entre
componentes.
Componentes Vs directivas
En Angular 2 perdurael concepto dedirectiva. Pero ahoratenemoscomponentesy larealidad esque
ambosartefactossepodrían aprovechar parausossimilares. Laclaveen estecaso esqueloscomponentes
son piezasdenegocio, mientrasquelasdirectivassesuelen usar parapresentación y problemas
estructurales.
Puedespensar en un componentecomo un contenedor dondesolucionasunanecesidad detu aplicación.
Unainterfaz parainteracción, un listado dedatos, un formulario, etc.
Paraser exactos, en ladocumentación de Angular 2 nosindican queun componenteesun tipo dedirectiva.
Existien trestiposdedirectivas:
Componentes: Un componenteesunadirectivacon un template. Habrámuchasen tu aplicación y
resuelven necesidadesdel negocio. Directivas de atributos: Cambian laaparienciao comportamiento de
Manual de Angular
u
n
e
l
e
m
e
n
t
.
P
o
r
e
j
e
m
p
l
o
t
e
e
m
o
s
n
g
C
l
a
s
s
,
q
u
e
n
o
s
p
e
r
m
i
t
e
c
o
l
o
c
a
r
u
n
a
o
m
á
s
c
l
a
s
e
s
d
e
C
S
S
(
a
t
r
i
b
u
t
o
c
l
a
s
s
)
en un elemento. Directivas estructurales: Son lasquerealizan cambiosen el DOM del documento,
añadiendo, manipulando o quitando elementos. Por ejemplo ngFor, quenossirveparahacer unarepetición
(similar al ngRepeat deAngular 1.x), o ngIf queañadeo remueveelementosdel DOM con respecto auna
expresión condicional.
Por tanto, adiferenciadeotraslibreríascomo Polymer, dondetodo seresuelvemediantecomponentes, hay
quetener en cuentaquécasosdeuso son losadecuadospararesolver con un componente.
Las partes de un componente
Aunquetambién hemosanalizado anteriormente, cuando repasamoslaaplicación básicadeAngular 2
generadacon Angular CLI, cuálesson laspartesfundamentalesdeun componente, vamosavolver aeste
punto parapoder ver suspiezasdemaneraglobal.
Un componenteestácompuesto por trespartesfundamentales:
Un template
Unaclase
Unafunción decoradora
Lasdosprimeraspartescorresponden con capasdelo queconocemoscomo MVC. El templateserálo que
seconocecomo vistay seescribeen HTML y lo quecorresponderíacon el controlador seescribeen
Javascript por medio deunaclase(deprogramación orientadaaobjetos).
Por su parte, tenemosel decorador, queesunaespeciederegistro del componentey quehacede
"pegamento" entreel Javascript y el HTML.
Todasestaspartesson lasquevamosaanalizar en lospróximosartículoscon mayor detalle, comenzando
por losdecoradores, queintroduciremosen el próximo artículo.
Esteartículo esobradeAlbertoBasalo
Fuepublicado por primeravez en 01/ 08/ 2016
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ concepto-teorico-componente-angular2.html
Decorador de componentes en Angular 2
Qué es un decorador de componentes, qué función tiene y cómo se implementa en un componente
básico de Angular 2.
Ahora, unadelasfuncionesbásicasquevasatener querealizar en todo desarrollo con Angular esla
decoración decomponentes. En sí, no esmásqueunadeclaración decómo seráun componentey las
diversaspiezasdelasqueconsiste.
En el artículo deintroducción aloscomponentesexplicamossolo unadelaspartesquetieneel archivo .ts
con el código Javascript / TypeScript principal deun componente. Lo quevimoshastaahoraeralaclase
Manual de Angular
q
u
e
,
d
e
c
í
a
m
o
s
,
h
a
c
í
a
l
a
s
v
e
e
s
d
e
c
o
n
t
r
o
l
a
d
o
r
,
q
u
e
s
e
e
x
p
o
r
t
a
h
a
c
i
a
a
f
u
e
r
a
p
a
r
a
q
u
e
e
l
f
l
u
j
o
p
r
i
n
c
i
p
a
l
d
e
ejecución deunaaplicación seacapaz deconocer al componente. Además, contienelo quesellamauna
función decoradoraqueconoceremosacontinuación.
Qué es un decorador
Un decorador esunaherramientaquetendremosanuestradisposición en Javascript en un futuro próximo.
Esunadelaspropuestasparaformar partedel estándar ECMAscript 2016, conocido también como ES7.
Sin embargo, yaestán disponiblesen TypeScript, por lo quepodemoscomenzar ausarlosyaen Angular.
Básicamentees unaimplementación deun patrón dediseño desoftwarequeen sí sirveparaextender una
función medianteotrafunción, pero sin tocar aquellaoriginal, que seestáextendiendo. El decorador recibe
unafunción como argumento (aquellaquesequieredecorar) y devuelveesafunción con alguna
funcionalidad adicional.
Lasfunciones decoradorascomienzan por una"@" y acontinuación tienen un nombre. Esenombreesel
deaquello quequeramosdecorar, queyatienequeexistir previamente. Podríamosdecorar unafunción, una
propiedad deunaclase, unaclase, etc.
Miralaprimeralíneadel código del archivo .tsdetu componenteprincipal.
import { Component } from '@angular/core';
Eseimport nosestátrayendo laclaseComponent. En lasiguientelíneasedecoraacontinuación, con el
correspondiente"decorator". No esnuestro objetivo hablar sobreel patrón decorator en sí, ni ver las
posibilidadesdeestaconstrucción queseguramentetendremosen el futuro ES7, así quevamosacentrarnos
en lo queconseguimoshacer con Angular 2 medianteestos decoradores.
Nota: Uno delosmotivospor los queAngular 2 hatomado TypeScript como lenguaje es justamente
por permitir usar decoradores. Con TypeScript podemos realizar ladecoración decódigo deES7 ya
mismo, lo quefacilitaladecoración del código.
Qué información se agrega por medio del decorador
Angular 2 usalosdecoradorespararegistrar un componente, añadiendo información paraqueéstesea
reconocido por otraspartesdelaaplicación. Laformadeun decorador eslasiguiente:
Manual de Angular
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
Como apreciarás, en el decorador estamosagregando diversaspropiedadesespecíficasdel componente. Esa
información en estecaso concreto seconocecomo "anotación" y lo queleentregamosson unos
"metadatos" (metadata) queno hacemásquedescribir al componentequeseestácreando. En estecaso son
lossiguentes:
selector: esteesel nombredelaetiquetanuevaquecrearemoscuando seproceseel componente. Es
laetiquetaqueusaráscuando quierascolocar el componenteen cualquier lugar del HTML.
templateUrl: esel nombredel archivo .html con el contenido del componente, en otraspalabras, el
quetieneel código delavista.
styleUrls: esun array con todaslashojasdeestilosCSSquedeben procesarsecomo estilo local para
estecomponente. Como ves, podríamostener unaúnicadeclaración deestilos, o variassi lo
consideramosnecesario.
Nota: Esecódigo deanotación o decoración del componenteesgenerado por Angular CLI. Además,
cuando creemosnuevoscomponentesusaremosel mismo Angular CLI paraobtener el scaffolding
(esqueleto) del cual partiremos. Por tanto, no hacefaltaquememorices lasintaxisparaladecoración,
porqueteladarán hecha. En todo caso tendrásquemodificarlasi quierescambiar el comportamiento
del componente, losnombresdearchivosdel template(vista), hojasde estilo, etc.
Demomento no necesitamosdar muchamásinformación sobrelosdecoradores. Esalgo quedebemos
comenzar ausar paradesarrollar componentesen Angular 2, pero no nostienequepreocupar demasiado
todavía, porquedemomento no necesitaremostocar mucho sobreellos.
Con esto creemosquehemosdetallado perfectamenteel componenteinicial denuestraaplicación, el
generado por Angular CLI al inicializar el proyecto. En el próximo artículo, por fin, podremos crear nuestro
primer componentepropio.
Esteartículo esobradeMiguel Angel Alvarez
Fuepublicado por primeravez en 09/ 08/ 2016
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ decorador-componentes-angular2.html
Crear un componente nuevo con Angular 2
En este artículo te vamos a enseñar a crear un nuevo componente con Angular CLI y luego a
usarlo en tu aplicación Angular 2.
Despuésdenuestro repaso teórico alafiguradeloscomponentesen Angular estamosen condiciones de
Manual de Angular
i
r
n
o
s
a
l
t
e
r
r
e
n
o
d
e
l
o
p
r
á
t
i
c
o
y
v
e
r
c
ó
m
o
s
e
g
e
n
e
r
a
n
n
u
e
v
o
s
c
o
m
p
o
n
e
n
t
e
s
e
n
u
n
a
a
p
l
i
c
a
c
i
ó
n
.
Si abresel index.html quehay en lacarpeta"src" veráscomo en el body existeun único componente, pero
sin embargo, unaaplicación deAngular tendrádecenaso cientosdeellos. Loscomponentessepueden
organizar dediversasmanerasy veremosmásadelantecuando lleguemosalosmódulos, quelospodemos
crear en el módulo principal delaaplicación o en módulosespecíficosdeunafuncionalidad en concreto. De
momento vamosacrear un componenteen el módulo principal, pueseslo mássencillo paracomenzar.
Nota: Ademásdemódulos, recuerdaqueunos componentes usarán o seapoyarán en otrospara
resolver susnecesidades, creando unaestructuradeárbol. Todosloscomponentesquedesarrollemosen
adelanteestarán dealgunamaneradentro del componenteraíz. Esto no esnuevo, puesto queyase
comentó en el Manual deAngular, pero estábien recordarlo paraquequedeclaro. Partiremosdeesta
situación agregando ahoranuevoscomponentescon losque podremosexpandir laaplicación.
Pero, en realidad, nadie teobligaatener un componenteúnico como raíz. Podrías crear un componente
y usarlo directamenteen el index.html detu aplicación. Haciendo esto convenientemente(puestendrías
queagregar esecomponenteal bootstrap del módulo principal paraquefuncione) no habríaningún
problemapor ello. Aunquedebido aqueeseindex.html escódigo generado y generalmenteno lo
querremostocar, serámásrecomendablecrear loscomponentesdebajo del componenteraíz.
Creamos un componente a través de Angular CLI
YausamosAngular CLI paragenerar el código deinicio denuestraaplicación Angular. Ahoravamosausar
estaherramientadelíneadecomandosparagenerar el esqueleto deun componente. Desdelaraíz del
proyecto lanzamosel siguientecomando:
ng generate component nombre-del-componente
Nota: Existeun aliasparalaorden "generate" quepuedes usar paraescribir un poco menos. Sería
simplementeescribir "g". Seríaalgo como
ng g component nombre-del-componente
Ademásdecomponentes, laorden generatetepermitecrear el esqueleto deotraseriedeartefactoscomo
son directivas, servicios, clases, etc.
Reconociendo los archivos del componente
Manual de Angular
S
i
o
b
s
e
r
v
a
s
a
h
o
r
a
l
a
c
a
r
p
e
t
a
"
s
r
c
/
a
p
p
"
e
n
c
o
n
t
r
a
r
á
s
q
u
e
s
e
h
a
c
r
e
a
d
o
u
n
d
i
r
e
c
t
o
r
i
o
n
u
e
v
o
c
o
n
e
l
m
i
s
m
o
nombredel componentequeacabamosdecrear. Dentro encuentrasunaseriedearchivosqueyatedeben
desonar porqueloshemosanalizado yaparael componenteinicial delasaplicacionesAngular.
Nosreferimosalosarchivosdondecolocasel código (TypeScript) deregistro del componente, el CSSpara
losestilosy el HTML paralavista, másel archivo spec.ts, quesirveparael testing. Tendrásen definitiva
algo como puedesver en laimagen.
Nota: En versionestempranasdeAngular (en estaocasión nosreferimosaAngular 2, al menosen sus
primerasreleases), existíaun archivo llamado "index.ts", quehacíasolo tiene un export y servíapara
importar el componentede maneraalgo másresumida. En index.ts, seexportabael propio componente,
por su nombre. Servíaparaque, cuando importasun componentedesdeotro lugar detu aplicación, no
tengasquereferirteal archivo "nombre-del-componente.component.ts" con todassusletras, sino
simplementealacarpetadondeseencuentra. Ahoraen Angular (4) esearchivo no existe.
Componente declarado en el módulo principal
Como hemosdicho, estecomponenteque acabamosdecrerar residiráen el módulo principal. En adelante
cuando veamos módulosexplicaremoscómo hacer queel componentesecreedentro deun módulo, pero
por el momento estaeslasituación. En dicho módulo principal, archivo app.module.ts, setieneque
declarar el componentequeacabamosdecrear.
Realmente, al crear el componentemedianteel terminal, con loscomandosdel Angular CLI, las
modificacionesen el módulo principal enfocadasaladeclaración deestenuevo componenteyaestán
realizadas. No obstanteesbueno queleechemosun vistazo parairnosfamiliarizando.
Si abresel archivo app.module.ts, tendríasquereconocer ladeclaración en estosbloquesdecódigo:
1.- El import del componente
Esteimport nostraeel código TypeScript del componentequeacabasdecrear. Fíjatelaclasedel
componente y larutadondeestáel código importado.
Manual de Angular
import { NombreDelComponenteComponent } from './nombre-del-componente/nombre-del-componente.component';
2.- La declaración "declarations"
En el decorador del módulo principal, en el array dedeclarations, encontrarásnombrado el componente
queacabasdecrear.
@NgModule({
declarations: [
AppComponent,
NombreDelComponenteComponent
],
[...]
}
Nota: Anteriormente, versiones muy tempranasdeAngular 2, seusabaSystemJSparaladeclaración del
componente. Esto no aplica a las versiones actuales de Angular: En todosloslugaresdonde, en
adelante, deseabas usar esecomponente, con SystemJSestabasobligado aimportarlo paraquese
conozcasu código. Paraello hemosvisto quesolo seusabael nombredel componentey no el archivo
dondeseescribió su clase. Insistimos, eso eraantes, cuando pararealizar todo lo queeslacargade
módulosseutilizabaSystemJS. En aquellaépocaexistíaun archivo llamado system-config.tsdondese
administran todaslaslibreríasqueseimportaban con SystemJS. En ellasencontraríasladeclaración del
nuevo componentequeacabamosdegenerar.
Javascript de nuestro componente
El archivo "nombre-del-componente.component.ts" contieneel código Javascript del componente.
Nota: Apreciarásquedeberíamosdecir quecontieneel "código TypeScript del componente", dado que
en realidad adíadehoy Angular CLI solo tienelaopción degenerar código TypeScript. No debe
representar un gran problemaparati, porquerealmentetodo código Javascript es también código
TypeScript, al quese leagregan ciertascosas, sobretodo parael control detipos.
Debesreconocer yadiversaspartes:
Imports detodo aquello quenecesitemos. En principio delalibrería@angular/ core, pero luego
veremosqueaquí iremoscolocando muchosotrosimportsamedidaquevayamosnecesitando
código demáslugares.
Decorador del componente, parasu registro.
Clasequehacelasvecesdel controlador, quetengo queexportar.
En estaspartesyaconocidasno entraremosdemomento con másdetalles, puesyaloshemosabordado
Manual de Angular
a
n
t
e
r
i
o
r
m
e
n
t
e
e
n
e
l
M
a
n
u
a
l
d
e
A
n
g
u
l
a
r
.
A
h
o
r
a
t
e
p
e
d
i
m
o
s
s
i
m
p
l
e
m
e
n
t
e
e
c
h
a
r
u
n
v
i
s
t
a
z
o
a
l
a
c
a
b
e
c
e
r
a
d
e
l
a
clase, en concreto asu "implements":
export class NombreDelComponenteComponent implements OnInit {
Eseimplements esunainterfaz, queno están disponiblestodavíaen Javascript, ni tan siquieraen ES6, pero
queyason posiblesdeusar graciasaTypeScript. Essimplementecomo un contrato quedicequedentro de
laclasedel componentevamosadefinir lafuncion ngOnInit(). Sobreesafunción no hablaremosmucho
todavía, pero esun lugar dondepodremoscolocar código aejecutar cuando setengalacertezaqueel
componente hasido inicializado ya.
Solo amodo deprueba, vamosacrear unapropiedad llamada"dato" dentro denuestro componenterecién
creado. El código nosquedaráalgo como esto:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-nombre-del-componente',
templateUrl: 'nombre-del-componente.component.html',
styleUrls: ['nombre-del-componente.component.css']
})
export class NombreDelComponenteComponent implements OnInit {
dato = "Creando componentes para DesarrolloWeb.com";
constructor() {}
ngOnInit() {
console.log('componente inicializado...');
}
}
HTML del componente
El componentequeacabamosdecrear tieneun HTML deprueba, yaescrito en el archivo "nombre-del-
componente.component.html".
Podemosagregarlelaexpresión paraqueseveaen el componentelapropiedad quehemosgenerado del
lado deJavascript, en laclasedel componente. Tendríasalgo como esto:
<p>
nombre-del-componente works!
</p>
<p>
{{ dato }}
</p>
Manual de Angular
P
u
e
d
e
s
a
b
r
i
r
e
s
e
H
T
M
L
c
o
l
o
c
a
r
c
u
a
l
q
u
i
e
r
c
o
s
a
q
u
e
c
o
n
s
i
d
e
r
e
s
,
s
i
m
p
l
e
m
e
n
t
e
a
m
o
d
o
d
e
p
r
u
e
b
a
,
p
a
r
a
comprobar queconsiguesver esetexto ahoracuando usemosel componente.
Nota: No hemosentrado todavía, pero seguro quealguno yaselo preguntao quieresaberlo. El
componentetieneun archivo CSS(aunquesepueden definir variosen el decorador del componente) y
podemoseditarlo paracolocar cualquier declaración deestilos. Veremosmásadelante, o podrás
comprobar por ti mismo, queesosestilosCSSseaplican únicamenteal componentedondeestás
trabajando y no aotroscomponentesdelaaplicación.
Con esto hemosterminado deexplicar todo lo relativo alacreación deun componente. El componente
estáahí y estamossegurosqueestarásansioso por usarlo en tu proyecto. Esalgo queveremosyamismo, en
el próximo artículo del Manual deAngular 2.
Esteartículo esobradeAlbertoBasalo
Fuepublicado por primeravez en 26/ 08/ 2016
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ crear-componente-nuevo-angular2.html
Usar un componente en Angular 2
Cómo se usan componentes creados por nosotros en Angular 2, una tarea que si bien es sencilla
requiere de varios pasos.
En el pasado artículo realizamostodoslospasosparacrear un componenteen Angular 2. Realmentevimos
quelamayoríadel código lo generasdesdeAngular CLI, lo queaceleramucho el desarrollo y facilitanuestra
labor.
Ahora, paraterminar nuestrapráctica, vamosaaprender ausar el componentequeacabamosdecrear. Es
unatareasencilla, pero debido alaarquitecturadeAngular y el modo detrabajo quenosmarca, esalgo que
tendremosquerealizar en variospasos:
1. Crear el HTML para usar el componente
En el lugar delaaplicación dondelo vayasausar el componente, tienesqueescribir el HTML necesario
paraquesemuestre. El HTML no esmásquelaetiquetadel componente, quesehadefinido en lafunción
Manual de Angular
d
e
c
o
r
a
d
o
r
a
,
a
t
r
i
b
t
o
"
s
e
l
e
t
o
r
"
(
c
o
m
o
v
i
m
o
s
a
l
e
x
p
l
i
c
a
r
l
o
s
d
e
c
o
r
a
d
o
r
e
s
)
.
<app-nombre-del-componente></app-nombre-del-componente>
Dado queestamoscomenzando con Angular 2 y el anterior erael primer componentecreado por nosotros
mismos, solo lo podreamosusar dentro del componenteprincipal (aquel generado por Angular CLI al hacer
construir el nuevo proyecto). Aunquepuederesultar obvio, esaetiquetalatienesquecolocar dentro del
templatedel componenteprincipal.
El HTML (template) deestecomponenteprincipal lo encontramosen el archivo "app.component.html".
En esearchivo, lavistadel componenteprincipal, debemoscolocar laetiquetaparapermitir mostrar el
componente recién creado.
Nota: Además, el componentesecreó dentro del módulo principal. No habráproblemaen usarlo
dentro del componenteraíz, quetambién secreó dentro del módulo princial (app.module.ts). Si lo
quisieras usar en otrosmóduloso lo hubierascreado en otrosmódulos, aestaoperativahabríaque
añadir algún paso extra. Todo eso lo veremoscuando nospongamosaexplicar losmódulos.
El problemaesqueesaetiquetano esconocidapor el navegador. Lasolución laaportaAngular, y el código
del componentedesarrollado en el artículo anterior, dedicado alacreación detu primer componente. Sin
embargo, paraqueestecomponenteseconozca, debesimportarlo convenientemente. Eslo quehacemosen
lossiguientespasos.
2. Importar el código del componente
Como decíamos, parapoder usar un componentesedebedeconocer su código. Paraello tenemosque
realizar loscorrespondientesimport. LabuenanoticiaesqueAngular CLI hahecho el trabajo demanera
automática. A no ser quequierasusar estecomponentedesdeotrosmódulos, tareaqueveremosmás
adelantecuando lleguemosamódulos, no necesitasrealizar ningún import adicional.
No obstante, parafamiliarizarnoscon el código, y por si tenemosqueeditarlo nosotrosmanualmentea
posteriori, vamosaidentificar en el módulo principal "app.module.ts" lospuntosdondesehaimportado el
código deestecomponenterecién creado.
import { NombreDelComponenteComponent } from './nombre-del-componente/nombre-del-componente.component';
Eseimport indicaquetequierestraer laclasedel componente"NombreDelComponenteComponent" y
despuésdel "from" estálarutadesdedondetelatraes.
Nota: Recuerdaqueno necesitas decirlelaextensión del archivo donde estálaclase
NombreDelComponenteComponent. Setratadeun archivo .tsy generalmentelosarchivosTypeScript
no requieren queindiques su extensión al importarlos.
Manual de Angular
3. Declarar que vas a usar este componente
El import permiteconocer el código del componente, pero todavíano essuficienteparapoder usarlo.
Debemosañadirlo al array de"declarations" (tareaquetambién hahecho Angular CLI demanera
automática.
En el módulo principal, dondevasausar el componentedemomento, encuentraslafunción decoradoradel
módulo "@NgModule". En esafunción debesdeclarar todosloscomponentesqueestemódulo está
declarando, en el array "declarations".
declarations: [
AppComponent,
NombreDelComponenteComponent
],
El decorador completo del módulo principal severíaparecido aesto:
@NgModule({
declarations: [
AppComponent,
NombreDelComponenteComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
Observaqueel array "declarations" mepermitedeclarar quevoy ausar varioscomponentes. Simplemente
separo susnombrespor comas. Lo queindico, como podrásapreciar, esel nombredelaclasedel
componente quepretendo usar. Esaclaseeslaquehasimportado con el correspondiente"import" del paso
anterior (punto 2).
Y eso estodo! Al guardar losarchivossedeberíarecargar denuevo laaplicación en el navegador y deberías
ver el HTML escrito parael componentequeestás usando y queacabamosdecrear.
Conclusión a la introducción de los componentes en Angular
Con esteartículo hemoscompletado el ciclo deintroducción aloscomponentesen el framework Javascript
Angular. Hemosreconocido suspartesbásicas, hemoscreado un componentepropio y lo hemosusado en
nuestraaplicación.
El proceso puedeparecer un tanto laborioso, pero afortunadamenteAngular CLI telo facilitabastante. A
medidaquesevayarepitiendo observaremosqueno estan complicado. Lapartemásaburridadeescribir de
un componente, el esqueleto o scaffolding y losimports, yatelo dan hecho graciasaAngular CLI. Así que
nosquedasimplementehacer lapartedel componenteque correspondealasnecesidadesdelaaplicación.
Manual de Angular
C
o
l
o
s
c
o
n
o
i
m
i
e
n
t
o
s
q
e
h
e
m
o
s
i
d
o
p
r
o
p
o
r
c
i
o
n
a
n
d
o
e
n
l
o
s
a
n
t
e
r
i
o
r
e
s
c
a
p
í
t
u
l
o
s
d
e
l
M
a
n
u
a
l
d
e
A
n
g
u
l
a
r
2
,
estamossegurosdequepodráscolocar máscódigo, tanto en el HTML como en laclasedel componente
paraponer en prácticalo aprendido.
Esteartículo esobradeAlbertoBasalo
Fuepublicado por primeravez en 31/ 08/ 2016
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ usar-componente-angular2.html
Manual de Angular
Lo básico de los módulos en Angular
Vamosahoraaabordar lasbasesdeotro delosactoresprincipalesdelasaplicacionesdesarrolladascon
Angular: losmódulos. Un módulo (moduleen inglés) esunareunión decomponentesy otrosartefactos
como directivas o pipes. Losmódulosnossirven principalmenteparaorganizar el código delasaplicaciones
Angular y por tanto debemosaprender autilizarlosbien.
Trabaj ar con módulos en Angular
Cómo crear módulos, agrupaciones de componentes, directivas o pipes, en el framework Javascript
Angular. Cómo crear componentes dentro de un módulo y cómo usarlos en otros modules.
Un módulo esuno deloselementosprincipalescon losque podemosorganizar el código delasaplicaciones
en Angular. No deben ser desconocidoshastaestemomento del Manual deAngular, puesto quenuestra
aplicación básicayadisponíadeuno.
Sin embargo, en lugar decolocar el código detodosloscomponentes, directivaso pipesen el mismo
módulo principal, lo adecuado esdesarrollar diferentesmódulosy agrupar distintoselementosen unosu
otros. El orden serealizarádeunamaneralógica, atendiendo anuestraspropiaspreferencias, el modelo de
negocio o laspreferenciasdel equipo dedesarrollo.
En esteartículo aprenderásatrabajar con módulos, realizando operativasbásicascomo crear módulosy
colocar componentesen ellos.
Crear un nuevo módulo
Parafacilitar lastareasdecreación demódulosnosapoyaremosen el Angular CLI. El comando para
generar esemódulo nuevo es"generate" y acontinuación tenemosqueindicar quéeslo quesequiere
generar, en este caso "module", acabando con el nombredel módulo acrear.
ng generate module nombre
Manual de Angular
U
n
a
v
e
l
a
n
z
a
o
e
s
t
e
c
o
m
a
n
d
o
e
n
n
u
e
s
t
r
o
p
r
o
y
e
c
t
o
,
d
e
n
t
r
o
d
e
l
a
c
a
r
p
e
t
a
"
s
r
c
/
a
p
p
"
s
e
c
r
e
a
u
n
s
u
b
d
i
r
e
c
t
o
r
i
o
con el mismo nombredel módulo generado. Dentro encontraremosademásel archivo con el código del
módulo.
Nota: tanto daqueen el comado nombresel módulo como "nombre" o "Nombre" (con laprimeraen
mayúscula). El CLI aplicalas convencionesdenombresmásadecuadasy como losmódulosson clases,
internamentelescolocaen el código laprimeraletrasiempreen mayúscula. Yalosnombresdelos
directoriosy archivosesotracosay no serecomiendausar mayúsculas, por lo que los nombrarácon
minúsculasiempre.
Ahora, si abrimosel código del módulo generado "nombre.module.ts", encontraremoscómo sedefineun
módulo en Angular. Lapartemásimportantees, como yavienesiendo habitual en Angular, un decorador.
El decorador de losmódulossellama@NgModule.
@NgModule({
imports: [
CommonModule
],
declarations: []
})
Nota: esteesel código generado de un módulo con el CLI paraAngular 4. En tu caso puede tener
algunasdiferencias, dependiendo de laversión deAngular con laqueestéstrabajando.
Como vesen el decorador, tienesdemomento un par dearraysdefinidos:
imports: con losimportsqueestemódulo necesita
declarations: con loscomponentes, u otrosartefactosqueestemoduleconstruye.
Generar un componente dentro del módulo
Ahoraquetenemosnuestro primer módulo propio, vamos aagregar algo en él. Básicamentecomenzaremos
por añadirleun componente, usando como siempreel Angular CLI.
Hastaahoratodosloscomponentesquehabíamoscreado habían sido generadosdentro del módulo
principal, pero si queremospodemosespecificar otro módulo dondecrearlos, medianteel comando:
Manual de Angular
ng generate component nombre/miComponente
Esto nosgeneraráunacarpetadentro del módulo indicado, en laquecolocarátodoslosarchivosdel
componente recién creado.
Nota: en estecaso puedesobservar como hemos colocado en el nombredel componenteuna
mayúscula"miComponente", paraseparar palabrascomo en "camelCase". Por haberlo hecho así,
Angular CLI hanombrado el archivo separando las palabraspor guiones"mi-
componente.component.ts". Por su parte, podrásapreciar en el código quelaclasedel componente, se
colocacon PascalCase, como mandan las guíasdeestilosparaclases(classMiComponenteComponent).
Pero además, el comando del CLI también modificaráel código del módulo, agregando automáticamenteel
import del componentey su referenciaen el array "declarations". Ahorael código del módulo "nombre-
modulo.module.ts" tendráunaformacomo esta:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MicomponenteComponent } from './micomponente/micomponente.component';
@NgModule({
imports: [
CommonModule
],
declarations: [
MiComponenteComponent
]
})
export class NombreModuloModule { }
Exportar del módulo hacia afuera
Másadelante, si queremosqueestemódulo expongacosashaciaafuera, quesepuedan llegar autilizar desde
otrosmódulos, tendremosqueagregar unanuevainformación al decorador del módulo: el array deexports.
Manual de Angular
V
a
m
o
s
a
s
u
p
o
n
e
r
u
e
e
l
c
o
m
p
o
n
e
n
t
e
"
M
i
C
o
m
p
o
n
e
n
t
e
C
o
m
p
o
n
e
n
t
"
q
u
e
r
e
m
o
s
q
u
e
s
e
p
u
e
d
a
u
s
a
r
d
e
s
d
e
otrosmódulos. Entoncesdebemos señalar el nombredelaclasedel componenteen el array de"exports".
Con ello el decorador del modulequedaríadeestamanera.
@NgModule({
imports: [
CommonModule
],
declarations: [
MiComponenteComponent
],
exports: [
MiComponenteComponent
]
})
Usar el componente en otros módulos
El último punto quenosquedapor ver escómo usar el componenteMiComponenteComponent desde
otrosmódulos. Paraello vamosamodificar manualmenteel módulo principal delaaplicación, demodo que
puedaconocer el componentedefinido en el módulo nuevo que hemoscreado en esteartículo.
Paraimportar el componenterealmente lo quevamosaimportar esel módulo entero dondesehacolocado,
yaqueel propio módulo haceladefinición deaquello quesequiereexportar en "exports". Requierevarios
pasos
Hacer el import del módulo con la sentencia import de Javascript
Paraque Javascript (o en estecaso TypeScript) conozcael código del módulo, debemosimportarlo primero.
Esto no esalgo deAngular, sino del propio lenguajeen particular.
import { NombreModule } from './nombre/nombre.module';
Declarar el import en el decorador del module principal
Laimportación denuestro módulo serealizaen ladeclaración "imports" del módulo principal.
Esteesel código del decorador del módulo principal.
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NombreModule
],
Manual de Angular
providers: [],
bootstrap: [AppComponent]
})
Tetienesquefijar en el array imports, quetieneel módulo quehemoscreado nosotrosmismosen este
artículo "NombreModule".
Usar el componente en HTML
Finalmenteyasolo nosquedausar el componente. Paraello vamosacolocar en el templatedel componente
raíz el selector declarado en el componentecreado.
Nota: recuerdaqueel selector del componenteesel tag o etiquetaquesedebeusar parapoder usar un
componente. Esto yasedetalló anteriormenteen estemanual. Si no lo recuerdaso quieresmás
información leeel artículo Decorador decomponentesen Angular 2.
Así quesimplementeabrimosel archivo "app.component.ts" y colocamos laetiquetadenuestro nuevo
componente generado.
<app-mi-componente></app-mi-componente>
Eso estodo, si servimosnuestraaplicación deberíamosver el mensajedel componentefuncionando, quede
manerapredeterminadaseríaalgo como "mi-componenteworks!".
Si no lo vemos, o no vemosnada, entoncesnostenemosquefijar el error quenosaparece, quepodríaestar
visibleen lapantalladel terminal dondehemoshecho el "ng serve", o en laconsoladeJavascript detu
navegador. Posiblementeallí tedigaquetal componenteno seconoce, con un mensajecomo "parseerrors:
'app-mi-componente' isnot aknown element...". Eso quieredecir queno hashecho el import
correctamenteen el decorador del módulo principal. O bien quetehasolvidado dehacer el exportsdel
componente ausar, en el módulo recién creado.
Esteartículo esobradeMiguel Angel Alvarez
Fuepublicado por primeravez en 20/ 10/ 2017
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ trabajar-modulos-angular.html
Manual de Angular
Directivas esenciales de Angular
Vamosaconocer algunasdirectivasesenciales ofrecidaspor el propio framework, parael desarrollo delas
vistasen Angular.
Directiva ngClass en Angular 2
Estudio de la directiva ngClass de Angular 2, ejemplo práctico de un componente que usa esa
directiva.
Despuésdevariosartículosun tanto densosdeen el Manual deAngular 2 vamosaestudiar algunascosas
un poco másligeras, quenospermitirán practicar con el framework sin añadir muchacomplejidad alo que
yaconocemos. Paraello vamos ahacer unaseriedepequeñosartículosacercadelasdirectivasdeAngular 2
másútilesen el díaadíadel desarrollo deaplicaciones.
Comenzamoscon ladirectivangClass, quenospermitealterar lasclasesCSSquetienen loselementos dela
página. Lo veremosen el marco del desarrollo de aplicacionesAngular con un ejemplo básico.
Si vienesdeAngular 1.x verásquelasdirectivashan perdido un poco deprotagonismo en el desarrollo en
Angular 2. Muchasdelasantiguasdirectivashan desaparecido y su uso hasido sustituido por otras
herramientasdiversas. Como normaahoraen Angular 2 lasdirectivasseusarán parasolucionar necesidades
específicasdemanipulación del DOM y otrostemasestructurales.
Nota: Loscomponentestambién pueden ser considerados como un tipo dedirectiva, aunqueen este
caso seusan pararesolver problemasdenegocio, como yaseintrodujo en el artículo sobrelas
características básicasdeloscomponentes.
No t odos los problemas de clases se necesitan resolver con ngClass
Lo primero esdecir queladirectivangClassno esnecesariaen todosloscasos. Lascosasmássimplesni
siquieralanecesitan. El atributo "class" delasetiquetassi lo ponesentrecorchetesfuncionacomo
Manual de Angular
p
r
o
p
i
e
d
a
d
a
l
a
q
e
l
e
p
e
d
e
s
a
s
i
g
n
a
r
a
l
g
o
q
u
e
t
e
n
g
a
s
e
n
t
u
m
o
d
e
l
o
.
E
s
t
o
l
o
v
i
m
o
s
e
n
e
l
a
r
t
í
c
u
l
o
s
o
b
r
e
l
a
sintaxisdelasvistas.
<h1 [class]="claseTitular">Titular</h1>
En estecaso, "claseTitular" esunavariabledel modelo, algo quemepasael controlador quetendrás
asociado aun componente.
export class PruebaComponent implements OnInit {
claseTitular: string = "class1";
cambiaEstado() {
this.claseTitular = "class2"
}
ngOnInit() {
}
}
Laclassdel H1 valdrálo quehayaen lavariableclaseTitular. Cuando alguien llameal método
cambiaEstado() semodificaríael valor deesavariabley por tanto cambiaríalaclaseen el encabezamiento.
Si esto yaresuelvelamayoríadelasnecesidadesquesenos ocurren ¿paraquésirveentoncesngClass?
Asignar clases CSS con ngClass
LadirectivangClassesnecesariapara, deunamaneracómodaasignar cualquier claseCSSentreun grupo de
posibilidades. Puedesusar variosvaloresparaexpresar losgruposdeclases aplicables. Esparecido acomo
funcionabaen Angular 1.x.
A estadirectivaleindicamoscomo valor:
1. Un array con lalistadeclasesaaplicar. Esearray lo podemosespecificar demaneraliteral en el HTML.
<p [ngClass]="['negativo', 'off']">Pueden aplicarse varias clases</p>
O por su puesto podríaser el nombredeunavariablequetenemosen el modelo con el array declases
creado medianteJavascript.
<p [ngClass]="arrayClases">Pueden aplicarse varias clases</p>
Esearray lo podríashaber definido del lado deJavascript.
clases = ['positivo', 'si'];
Manual de Angular
2. Un objeto con propiedadesy valores(lo queseríaun literal deobjeto Javascript). Cadanombrede
propiedad esunaposibleclaseCSSquesepodríaasignar al elemento y cadavalor esunaexpresión quese
evaluarácondicionalmenteparaaplicar o no esaclase.
<li [ngClass]="{positivo: cantidad > 0, negativo: cantidad < 0, off: desactivado, on: !desactivado }">Línea</li>
Ej emplo de aplicación de ngClass
Vamosahacer un sencillo ejemplo deun componentellamado "BotonSino" quesimplementemuestraun
mensaje"SI" o "NO". Al pulsar el botón cambiael estado. Cadaestado serepresentaademáscon unaclase
queaplicaun aspecto.
Nota: No vamos aexplicar laspartesdel componenteporquesevieron con detalleen losartículos
anterioresdel Manual deAngular 2. Consultar todalaparte dedesarrollo decomponentes paramás
información.
Nuestro HTML esel siguiente:
<p>
<button
[ngClass]="{si: estadoPositivo, no: !estadoPositivo}"
(click)="cambiaEstado()"
>{{texto}}</button>
</p>
Laetiquetabutton tieneun par deatributosqueson losquehacen lamagia. Entrecorchetesseaplicala
directiva"ngClass", con un valor deobjeto. Entreparéntesisseaplicael evento "click", con lainvocación de
lafunción encargadadeprocesar laacción. Además, el texto del botón esalgo quenosvendrádelavariable
"texto".
Nuestro Javascript seráel siguiente:
import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-boton-sino',
templateUrl: 'boton-sino.component.html',
styleUrls: ['boton-sino.component.css']
})
export class BotonSinoComponent implements OnInit {
texto: string = "SI";
estadoPositivo: boolean = true;
Manual de Angular
cambiaEstado() {
this.texto = (this.estadoPositivo) ? "NO" : "SI";
this.estadoPositivo = !this.estadoPositivo;
}
ngOnInit() {
}
}
Como sabes, estecódigo TypeScript eslamayoríagenerado por Angular CLI. Lo quehemoshecho
nosotroseslo queestádnetro delaclaseBotonSinoComponent.
En ellacreamos laspropiedadesnecesariasen lavistay el método queseencargadeprocesar el cambio de
estado.
Nuestro CSS:
Lógicamente, paraqueesto funcionenecesitaremosdeclarar algunosestilossencillos, al menoslosdelas
clasesqueseusan en el HTML.
button {
padding: 15px;
font-size: 1.2em;
border-radius: 5px;
color: white;
font-weight: bold;
width: 70px;
height: 60px;
}
.si{
background-color: #6c5;
}
.no{
background-color: #933;
}
Con esto estodo! Esun ejemplo muy sencillo quequizásparalosquevienen deAngular 1.x resulte
demasiado básico, pero seguro quelo agradecerán quienesestén comenzando con Angular en estos
momentos. Másadelantelo complicaremosalgo. Realmenteladificultad mayor puedeser seguir lospasos
paralacreación del componentey luego lospasosparasu utilización, pero eso yalo hemosexplicado
anteriormente.
Esteartículo esobradeMiguel Angel Alvarez
Fuepublicado por primeravez en 13/ 09/ 2016
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ directiva-nglass-angular2.html
Manual de Angular
Directiva ngFor de Angular 2
Explicamos la directiva ngFor, o *ngFor, que nos permite repetir una serie de veces un bloque de
HTML en aplicaciones Angular 2.
En esteartículo vamosaconocer y practicar con unadirectivadelasmásimportantesen Angular 2, quees
ladirectivangFor, capaz dehacer unarepetición deelementos dentro delapágina. Estarepetición nos
permite recorrer unaestructuradearray y paracadauno de suselementosreplicar unacantidad de
elementosen el DOM.
Paralosquevengan deAngular 1 lessonará, puesto queeslo mismo queyaseconocedengRepeat, aunque
cambian algunascosillassobrelasintaxisparalaexpresión del bucle, así como algunosmecanismoscomo la
ordenación.
Uso básico de ngFor
Paraver un ejemplo deestadirectivaen funcionamiento estamosobligadosacrear deantemano un array
con datos, quedeben ser enviadosalavista, paraqueyaen el HTML sepuedarealizar esarepetición. Como
todo en Angular 2 seorganizamedianteun componentes, vamosacrear un componentequecontienelo
necesario parapoder usar estael ngFor.
Comenzamoscon el código delapartedeTypeScript, queesdondetendremosquecrear losdatosque
estarán disponiblesen lavista.
import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-listado-preguntas',
templateUrl: 'listado-preguntas.component.html',
styleUrls: ['listado-preguntas.component.css']
})
export class ListadoPreguntasComponent implements OnInit {
preguntas: string[] = [
"¿España ganará la Euro 2016?",
"¿Hará sol el día de mi boda?",
"¿Estás aprendiendo Angular 2 en DesarrolloWeb?",
"¿Has hecho ya algún curso en EscuelaIT?"
];
Manual de Angular
ngOnInit() {
}
}
Estecódigo nosdebedesonar, puesesel boilerplatedeun componente(creado medianteAngular CLI) al
quelehemosagregado ladeclaración deunapropiedad detipo array destrings.
Nota: Hemosasignado el valor deesearray demaneraliteral, pero lo normal seríaquelo obtengasde
algunafuentecomo un servicio web, API, etc.
Luego, veamosel código HTML deestecomponente, queesdondecolocamosladirectivangFor.
<p *ngFor="let pregunta of preguntas">
{{pregunta}}
</p>
Esalgo muy sencillo, simplementetenemosun párrafo queserepetiráun número de veces, unapor cada
elemento del array depreguntas. En estecaso esun párrafo simple, pero si dentro deél tuviéramosmás
elementos, también serepetirían. Lo quetenemosqueanalizar con detalleesel uso deladirectiva, aunque
creemosqueseauto-explicaperfectamente.
*ngFor="let pregunta of preguntas"
Lo primero que verásesun símbolo asterisco (*) quequizásparezcaun poco extraño. No esmásque
"azúcar sintáctico" pararecordarnosqueestasdirectivas(lascomenzadaspor el asterisco) afectan al DOM,
produciendo lainserción, manipulación o borrado deelementosdel mismo.
Nota: En las explicacionesqueencontrarásen ladocumentación deAngular 2 sobreel origen del
asterisco en el nombredeladirectivanosmencionan detalles acercade su implementación abajo nivel,
indicando queparaello sebasan en el tag TEMPLATE, uno delasespecificacionesnativasde Web
Components.
Como valor deladirectivaverásquesedeclarademanerainternaparaestebucleunavariable"pregunta",
quetomarácomo valor cadauno delosvaloresdel array en cadaunadesusrepeticiones.
Nota: "let" es unaformadedeclarar variablesen Javascript ES6. Quieredecir queaquellavariablesólo
tendrávalidez dentro del bloquedondesedeclara. En estecaso "demanerainterna" nosreferimosaque
"pregunta" solo tendrávalidez en laetiquetaquetieneel ngFor y cualquieradesusloselementoshijo.
Manual de Angular
Recorrido a arrays con obj etos con ngFor
GeneralmentengFor lo usaráspararecorrer arraysqueseguramentetendrán como valor en cadaunadesus
casillasun objeto. Esto no cambiamucho con respecto alo queyahemosvisto en esteartículo, pero sí es
unabonitaoportunidad deaprender algo nuevo con TypeScript.
Demomento veamoslascosassin TypeScript parair progresivamente. Así seríacómo quedaríala
declaración denuestro array, al quetodavíano indicaremos el tipo parano liarnos.
preguntasObj = [
{
pregunta: "¿España ganará la Euro 2016?",
si: 22,
no: 95
},
{
pregunta: "¿Estás aprendiendo Angular 2 en DesarrolloWeb??",
si: 262,
no: 3
},
{
pregunta: "¿Has hecho ya algún curso en EscuelaIT??",
si: 1026,
no: 1
}
]
Como ves, lo queanteseraun array destringssimpleshapasado aser un array deobjetos. Cadauno delos
objetosnosdescriben tanto lapreguntaen sí como lasrespuestaspositivasy negativasquesehan recibido
hastael momento.
Ahora, al usarlo en lavista, el HTML, podemos mostrar todoslosdatosdecadaobjeto, con un código que
podríaser parecido aeste:
<p *ngFor="let objPregunta of preguntasObj">
{{objPregunta.pregunta}}:
<br>
<span class="si">Si {{objPregunta.si}}</span> /
<span class="no">No {{objPregunta.no}}</span>
</p>
Como vesen estecódigo, dentro del párrafo tengo acceso alapregunta, queal ser un objeto, contiene
diversaspropiedadesqueuso paramostrar losdatoscompletosdecadaitem.
Modificación implementando Interfaces TypeScript
Como hasvisto, no existemuchadiferenciacon respecto alo queteníamos, pero ahoravamosadarleun
uso aTypeScript quenospermitiráexperimentar algo quenosaportael lenguaje: interfaces.
Manual de Angular
E
n
e
s
t
e
a
s
o
v
a
m
o
s
a
s
a
r
l
a
s
i
n
t
e
r
f
a
c
e
s
s
i
m
p
l
e
m
e
n
t
e
p
a
r
a
d
e
f
i
n
i
r
u
n
t
i
p
o
d
e
d
a
t
o
s
p
a
r
a
l
a
s
p
r
e
g
u
n
t
a
s
,
u
n
esquemaparanuestrosobjetospregunta. En estecaso solo lo vamosausar paraque, alahoradeescribir
código, el editor nospuedaayudar indicando erroresen caso quelainterfaz no secumpla. Así, alahorade
escribir código podremosestar segurosquetodaslaspreguntascon lasquetrabajemostengan losdatosque
son necesariosparalaaplicación.
Nota: Lasinterfacesquesesabeson mecanismosparasolventar lascarenciasdeherenciamúltiple, en
estecaso lasvamosausar como unasimple definición detipos.
Algo tan sencillo como esto:
interface PreguntasInterface {
pregunta: string;
si: number;
no: number;
}
PermiteaTypeScript conocer el esquemadeun objeto pregunta. Ahora, apoyándonosen esainterfaz
podrásdeclarar tu array depreguntasdeestamanera.
preguntasObj: PreguntasInterface[] = [
{
pregunta: "¿Te gusta usar interfaces?",
si: 72,
no: 6
}
]
Ahoraestamosindicando el tipo deloselementosdel array, diciéndolequedebeconcordar con lo definido
en lainterfaz. ¿Tegusta?Quizásahorano apreciesmuchadiferencia, pero esto sepuedeusar paravarias
cosas, significando unaayudaen laetapadedesarrollo, y sin afectar al rendimiento delaaplicación, puesto
quelasinterfacesen TypeScript unavez transpilado el código no generan código alguno en Javascript.
Nota: Lo normal es quecoloquesel código delainterfaz en un archivo independientey quehagasel
correspondiente"import". Recordando queAngular CLI tieneun comando paragenerar interfacesque
tepuederesultar útil. De momento si lo deseas, amodo depruebalo puedescolocar en el mismo
archivo queel código TypeScript del componente.
Quizásparalosqueno estén acostumbradosaTypeScript seadifícil hacerseunaideaexactasobrecómo te
ayudaríael editor decódigo por el simplehecho deusar esainterfaz. Parailustrarlo hemoscreado estevídeo
en el quemostramoslasayudascontextualescuando estamosdesarrollando con Visual Studio Code.
Manual de Angular
Paraver estevídeo esnecesario visitar el artículo original en:
http:/ / desarrolloweb.com/ articulos/ directiva-ngfor-angular2.html
Hablaremosmássobreinterfacesen otrasocasiones. Ahorael objetivo erasimplementever unapequeña
muestradelasutilidadesquepodríaaportarnos.
Como habrásvisto no esdifícil entender estadirectiva, pero ten en cuentaquehemosvisto lo esencial sobre
lasrepeticiones con ngFor. Hay mucho másquehabríaque comentar en un futuro, acercadeusosun poco
másavanzadoscomo podríaser laordenación deloselementosdel listado.
Esteartículo esobradeMiguel Angel Alvarez
Fuepublicado por primeravez en 27/ 09/ 2016
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ directiva-ngfor-angular2.html
Directiva ngModel
Explicaciones sobre la directiva ngModel de Angular, con ejemplos de uso diversos, con binding
de una y dos direcciones. Importar FormsModule para su funcionamiento en Angular 4.
LadirectivangModel esun viejo conocido paralaspersonasque vienen delasversionesantiguasdel
framework, cuando sellamabaAngularJS. Quizásparaellosno requieratantasexplicacionesde concepto,
aunquesí seráimportanteexplicar cómo usarla, porquehan cambiado bastantescosas.
Detodosmodos, tanto paradesarrolladoresexperimentadoscomo paralosmásnovatos, vamosarepasar
en esteartículo del Manual deAngular losaspectosbásicosdengModel y ver algunosejemplossencillosde
funcionamiento en componentes.
Qué es ngModel
Pensando en laspersonasqueson nuevasen Angular, tendremosquecomenzar aclarando quéesngModel.
Básicamentese tratadeun enlace, entrealgo quetienesen ladefinición del componentecon un campo de
formulario del template(vista) del componente.
Manual de Angular
Nota: "model" en ngModel vienedelo queseconocecomo el modelo en el MVC. El modelo trabaja
con los datos, así quepodemosentender queel enlacecreado con ngModel permitequedesdelavista
puedausar un dato. Sin embargo, con expresionesyasepodíausar un dato, volcando su valor en lavista
como { { dato} } . Ladiferencia es queal usar ese dato en camposde formulario, debes aplicar el valor
medianteladirectivangModel.
Por ejemplo, tenemosun componentellamado "cuadrado", quedeclaraunapropiedad llamada"lado". La
classdel componentepodríaquedar así:
export class CuadradoComponent {
lado = 4;
}
Si queremosqueesevalor "lado" sevuelquedentro deun campo INPUT deformulario, tendríamosque
usar algo como esto.
<input type="number" [ngModel]="lado">
Estamosusando ladirectivangModel como si fueraunapropiedad del campo INPUT, asignándoleel valor
quetenemosdeclarado en el componente.
Dar soporte a la propiedad ngModel en el campo de formulario
Sin embargo, nuestro componente"cuadrado" no funcionaríatodavía, porqueAngular 4 en principio no
reconocengModel como propiedad deun campo INPUT deformulario. Por ello, si ejecutastu aplicación
con el código tal como hemoshecho hastaahora, obtendrásun mensajedeerror como este: "Can't bind to
'ngModel' sinceit isn't aknown property of 'input'."
Lasolución pasapor traernosesapropiedad, queestáen el módulo "FormsModule".
Paraello tenemosquehacer laoperativatradicional deimportar aquello quenecesitamos. En estecaso
tendremosqueimportar FormsModuleen el módulo dondevamosacrear aquel componentedondese
quierausar ladirectivangModule.
Por ejemplo, si nuestro componente"CuadradoComponent" estáen el módulo "FigurasModule", estesería
el código necesario paradeclarar el import de"FormsModule".
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CuadradoComponent } from './cuadrado/cuadrado.component';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
Manual de Angular
FormsModule
],
declarations: [CuadradoComponent],
exports: [CuadradoComponent]
})
export class FigurasModule { }
Del código del módulo anterior, debesfijarteen doscosas:
1.- El import de FormsModule, quevienede@angular/ forms
import { FormsModule } from '@angular/forms';
2.- Ladeclaración en el array de imports del módulo en cuestión:
imports: [
[...]
FormsModule
],
Con estainfraestructurayasomoscapacesdeusar ngModuleen lasvistasdeloscomponentesAngular.
Enlace de una o de dos direcciones con ngModel
Tal como hemosdejado el código hastael momento en lavista, el input estabaasociado al valor deuna
propiedad del componente, sin embargo, eraun enlacedeunaúnicadirección.
<input type="number" [ngModel]="lado">
Con esasintaxis en lavista, lo quehayaen lapropiedad "lado" seescribíacomo valor del input, pero no
encontramosel doblebinding. Y aunqueesto esalgo queyasetrató en el artículo desintaxisdelasvistasen
Angular, queremosrecordar que, paraespecificar el doblebinding, sedebeusar lasintaxis"bananain a
box".
<input type="number" [(ngModel)]="lado">
Ahora, lo queseescribaen el campo INPUT también viajaráhaciael modelo, actualizando el valor dela
propiedad "lado" del componente.
Evento ngModelChange
Si lo deseas, también tienesdisponibleun evento llamado "ngModelChange" queseejecutacuando cambia
el valor en lapropiedad asociadaaun ngModel, con el quepodríamosconseguir un comportamiento
idéntico al visto en el punto anterior del doblebinding, pero sin usar el binding doble.
Manual de Angular
T
i
e
n
e
s
q
u
e
t
r
a
b
a
j
a
r
o
n
g
M
o
d
e
l
C
h
a
n
g
e
e
n
c
o
n
j
u
n
t
o
c
o
n
l
a
d
i
r
e
c
t
i
v
a
n
g
M
o
d
e
l
.
M
e
d
i
a
n
t
e
n
g
M
o
d
e
l
a
s
o
c
i
a
s
lapropiedad quequieresasociar y entoncestendráslaposibilidad deasociar un manejador deevento a
ngModelChange, cadavez queesapropiedad cambia.
Dentro del manejador deevento podemosademásusar unavariablellamada$event, en laquerecibimosel
nuevo valor escrito, quepodríamosvolcarladenuevo alapropiedad por medio deunaasignación, para
conseguir el mismo efecto del bindingen lasdosdirecciones. El código tequedaríacomo esto:
<input type="number" [ngModel]="lado" (ngModelChange)="lado = $event">
Nota: Estasintaxisno aportaningunaventajaen términos derendimiento, por lo queen principio no
sesueleusar mucho. Generalmentevamosapreferir usar lasintaxisdel binding dedosdirecciones
[(ngModel)], por ser másconcisa. Detodos modos, podríaser interesantedisponer dengModelChange
en el caso que, cuando cambiaseel modelo, necesitasesrealizar otrasacciones, adicionales alasimple
asignación deun nuevo valor en lapropiedad del componente.
Ej emplo realizado en este artículo
Ahoraparalareferencia, voy adejar el código realizado parailustrar el comportamiento y uso deladirectiva
ngModel. Estarácompuesto por variosarchivos.
Vista del component e:
Comenzamoscon lavistadel componente, archivo cuadrado.component.html, queeslo másimportanteen
estecaso, yaqueesel lugar dondehemosusado ngModel.
Hecreado variasversionesdeenlace al input, como puedesver acontinuación.
<p>
Tamaño del lado {{lado}}
</p>
<p>
1 way binding <input type="number" [ngModel]="lado">
</p>
<p>
2 way binding: <input type="number" [(ngModel)]="lado">
</p>
<p>
Evento ngModelChange: <input type="number" [ngModel]="lado" (ngModelChange)="cambiaLado($event)">
</p>
Otracosaqueapreciarásen lavistaesqueel evento ngModelChangeno tieneescrito el código del
manejador en lapropiavista, por considerarlo un antipatrón. Esmásinteresantequeel código secoloque
dentro deun método del componente. En estecaso tendrásqueenviarleal método el valor $event, paraque
lo puedasusar allí.
Manual de Angular
Código TypeScript del componente:
El código del componenteestaráen el archivo cuadrado.component.tsy no tieneningunacomplicación en
especial.
import { Component } from '@angular/core';
@Component({
selector: 'dw-cuadrado',
templateUrl: './cuadrado.component.html',
styleUrls: ['./cuadrado.component.css']
})
export class CuadradoComponent {
lado = 1;
cambiaLado(valor) {
this.lado = valor;
}
}
Módulo donde se crea el componente:
Por último recuerdaqueesesencial queimportesen el módulo dondeestéscreando estecomponenteel
propio módulo del coredeAngular dondeseencuentraladirectivangModule. Esto lo hemosdescrito en
un bloqueanterior, pero volvemosacolocar aquí el código fuente:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CuadradoComponent } from './cuadrado/cuadrado.component';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
FormsModule
],
declarations: [CuadradoComponent],
exports: [CuadradoComponent]
})
export class FigurasModule { }
Por supuesto, parapoder usar estecomponente"CuadradoComponent" en otro módulo tendrásquehacer
el correspondienteimport, pero esto esalgo queyasetrató en el artículo delosmódulosen Angular.
Nota: Ademásdelaaplicación dengModel quehemosconocido en esteartículo, relacionada
directamentecon el sistemadebinding deAngular, ngModel también sirveparadefinir qué camposde
formulario deben ser tratados al generarselosobjetosngForm. Estosobjetossecrean automáticamente
y Angular losponeadisposición parapoder controlar el formulario deunamaneramuy precisa. Ese uso
Manual de Angular
l
o
v
e
r
e
m
o
s
m
á
s
a
d
e
l
a
n
t
e
c
u
a
n
d
o
h
a
b
l
e
m
o
s
e
n
d
e
t
a
l
l
e
d
e
l
o
s
f
o
r
m
u
l
a
r
i
o
s
d
e
A
n
g
u
l
a
r
.
Esteartículo esobradeMiguel Angel Alvarez
Fuepublicado por primeravez en 26/ 10/ 2017
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ directiva-ngmodel-angular.html
Manual de Angular
Binding en Angular al detalle
En lossiguientesartículosvamosaexplorar detenidamenteel sistemadedata-binding creado con Angular,
tratando con profundidad algunostemasyausadosdentro deestemanual, así como abordando nuevos
temasimportantesrelacionadoscon el bindeo dedatos.
Interpolación {{}} en Angular al detalle
Todo lo que tienes que saber sobre el binding por interpolación de strings en Angular, generada
con la sintaxis de las dobles llaves {{}}.
Con esteartículo comenzamosunaseriedeentregasdel Manual deAngular en lasquevamosaabordar
distintosaspectosdel binding en esteframework. Son importantes, porqueapesar deser cosasbásicas
muchasveceslasdejamospasar y esedesconocimiento acabacreando confusionesmás adelante.
Detodosmodos, no vamosaexplicar todo desdecero, yaquelasbasesdel data-binding yalashemos
conocido en artículosanterioresdel manual. Concretamenteesinteresantequehayasleído el artículo sobre
lasintaxisparalasvistasdecomponentes.
En esteartículo vamosatratar muchascosassobrelainterpolación en Angular quequizáshemosdado por
sentadasen artículosanterioresy quemerecelapenatratar demaneradetalladay clara.
Qué es la interpolación de strings
Lainterpolación decadenas, también conocidaen ingléscomo "string interpolation", o simplementecomo
interpolación, esun mecanismo deAngular desustitución deunaexpresión por un valor decadenaen un
template.
Cuando Angular veen un templatealgo escrito entredoblesllaves{ { } } lo evalúay lo tratadeconvertir en
unacadena, paraluego volcarlo en el template.
<p>Esto es un caso de interpolación de {{algunaCadena}}</p>
Manual de Angular
E
s
o
q
u
i
e
r
e
d
e
c
i
r
a
A
n
g
u
l
a
r
q
u
e
d
e
b
e
s
u
s
t
i
t
u
i
r
u
n
a
p
r
o
p
i
e
d
a
d
d
e
l
c
o
m
p
o
n
e
n
t
e
l
l
a
m
a
d
a
"
a
l
g
u
n
a
C
a
d
e
n
a
"
y
colocar su valor tal cual en el template.
Si "algunaCadena" esunacadena, simplementeseescribirásu valor en el template, pero si eso no erauna
cadenatratarádecolocarlo demaneraque lo fuera. Por ejemplo, si tuvieraun valor numérico colocaráel
número tal cual en el template.
Puedesusar también lainterpolación como valor depropiedadesdeelementosHTML, como esel siguiente
caso.
<img src="{{urlImagen}}">
En estecaso secolocaráel valor delapropiedad urlImagen como src parael elemento IMG.
Lainterpolación esdinámica. Quieredecir que, si cambiael valor delapropiedad del componente, Angular
sedaráel trabajo decambiar todosloslugaresdondeseestáhaciendo uso deesapropiedad, lo que
cambiaríael texto quehay escrito del párrafo anterior, o cambiaríalaimagen queseestávisualizando en el
elemento IMG anterior.
Expresiones, entre las dobles llaves
Lo quesecolocaentrelasdoblesllavesson llamadasexpresiones. Podemoscrear expresionessimplesy
complejasy Angular sedaráel trabajo deevaluarlasantesdevolcar el resultado dentro del template.
Lo queesimportanteesque, aquellaevaluación delaexpresión, debedeser convertidaen unacadena antes
devolcarseen un template. Esdecir, cualquier expresión al final decuentasseconvertiráen unacadenay
eso eslo quesecolocaráen lavistadel componente.
Unaexpresión puedeser algo tan simplecomo unapropiedad del componente, como lasusadas
anteriormenteen esteartículo.
{{algunaCadena}}
Esasencillaexpresión seevalúaal valor quetengalapropiedad algunaCadenay sevuelcaen el template.
También podemosver expresionescon operacionesmatemáticas.
{{ 1+ 1 }}
Expresionescon operador lógico denegación:
{{ ! valorBoleano)
Incluso expresionescuyo valor escalculado por un método del componente.
Manual de Angular
{{ metodoComponente() }}
Lo quedevuelvaesemétodo del componenteeslo quesecolocaráen el template. Esemétodo sevolveráa
ejecutar cadavez queel estado del componentecambie, esdecir, cadavez quecambieunadesus
propiedades, produciendo siempreunasalidaactualizada.
Nota: aunquevamosainsistir sobreestepunto y seentenderámejor si sigues lalecturadel artículo, hay
quedecir queesemétodo tienequelimitarse aproducir saliday además ser sencillo y rápido deejecutar.
Esto evitaráafectar negativamenteal rendimiento delasaplicaciones. el motivo essencillo: si durantela
ejecución delaaplicación semodifican laspropiedadesdel componente, Angular volveráaejecutar ese
método, actualizando lasalidaconvenientemente. Eso seharáantecualquier pequeño cambio en el
componente, y no solo antecambios en laspropiedadescon lasquetrabaje el método, incluso se
producirásolamentepor haber ocurrido un evento susceptibledemodificar el estado. Si ponesen el
método código quetardeen ejecutarse, Al producirsemuchas invocaciones repetidasaestemétodo, se
multiplicaráel costedetiempo deejecución, produciendo que laaplicación caigaen rendimiento y
afectando negativamentealaexperienciadeusuario.
Los efectos laterales están prohibidos en las expresiones
Lainterpolación en Angular esun enlace(binding) deunaúnicadirección. Cuando cambian losvaloresen
el componenteviajan haciael template, produciendo laactualización delavista.
Lainterpolación no deberíaproducir cambiosen laotradirección, esdecir, modificar algo en lavista
afectando al estado del componente. Dicho deotro modo, lasexpresionesnuncadeben contener sentencias
quepuedan producir efectoslaterales. Esdecir, código quepuedaafectar acambiosen laspropiedades de
componentes.
Ten en cuentaquelasexpresionestienen como utilidad devolver unacadenaparavolcarlaen el templatedel
componente, por lo queno deberíascolocar lógicadenegocio en ellas, manipulando variableso
propiedadesdeestado del componenteo laaplicación.
Por estedetalle, algunosoperadoresestán prohibidosen lasexpresiones, por ejemplo losdeasignación,
incrementos, decrementos, etc. Por ejemplo, nuncahagasalgo como esto:
{{ valorBoleano = false }}
Si Angular observaunaexpresión con operacionescapacesderealizar efectoslaterales, tedevolveráun
error, como el quevesen lasiguienteimagen:
Manual de Angular
P
o
r
e
s
t
e
m
i
s
m
o
m
o
t
i
v
o
,
a
n
d
o
d
e
n
t
r
o
d
e
u
n
a
e
x
p
r
e
s
i
ó
n
i
n
v
o
c
a
s
a
u
n
m
é
t
o
d
o
,
n
o
d
e
b
e
r
í
a
s
m
o
d
i
f
i
c
a
r
e
n
e
l
código deesemétodo datosdel componentecapacesdeproducir efectoslaterales, sino simplemente
limitarteaproducir unasalida.
{{ metodoProduceEfectosLaterales() }}
En el caso quemetodoProduceEfectosLaterales() tengacódigo queproduzcacambiosel el estado del
componente Angular no telo vaaadvertir y vaaejecutar el método sin producir ningún mensajedeerror,
pero aun así no lo deberíashacer. No essolo por ceñirsealas buenasprácticas, sino porqueAngular no
tendráen cuentaaquel cambio en el estado del componenteparadesencadenar otrasoperacionesnecesarias,
lo quepuedeproducir quetustemplatesno muestran loscambiosen propiedadesu otrosefectosno
deseables.
Otras consideraciones en las expresiones
Otrascosasqueestábien saber cuando seusan expresionesson lassiguientes:
Lasexpresionestienen como contexto al componentedel templatequeseestádesarrollando. Pero
no pueden acceder al contexto global, como variablesglobalesu objetoscomo document o window.
Tampoco acosasdel navegador como console.log().
No sepueden escribir estructurasdecontrol, como sentenciasif, for, etc.
Laejecución deunaexpresión debeser directa. Por ejemplo no podráshacer queseconsulteun
API REST en unaexpresión.
Mantén lasimplicidad. Cosascomo usar unanegación en laexpresión escorrecto, pero si lo que
tienesquecolocar esciertalógicacompleja, entoncesconvieneusar un método en el componente.
Ofrecer siempreel mismo resultado con losmismosvaloresdeentrada. Esto seconocecomo
expresionesidempotentes, aquellasqueejecutadasvariasvecesdan siempreel mismo resultado.
Obviamente, si laentradaesdistintay losdatosqueseusan paracalcular el valor delaexpresión
cambian, el resultado también cambiará, pero seguirásiendo idempotentesi con el mismo juego de
valoresdeentradaconseguimossiemprelamismasalida. Esto esnecesario paraque losalgoritmos
dedetección decambiosdeAngular funcionen correctamente.
Esteartículo esobradeMiguel Angel Alvarez
Fuepublicado por primeravez en 30/ 10/ 2017
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ binding-interpolacion-angular.html
Binding a propiedades en Angular al detalle
Qué es el property binding, junto con una serie de detalles importantes sobre el bindeo a
propiedades que como desarrollador Angular debes conocer.
Aunqueyahemoshablado del binding depropiedades, vamosavolver sobreesteconcepto pueshemos
pasado por alto bastantesdetallesen losquemerecelapenadetenersecon calma. Setratadeuna
característicadisponibleen el desarrollo detemplatesdelos componentes, quehemosvisto aplicadaalo
Manual de Angular
l
a
r
g
o
v
a
r
i
o
s
e
j
e
m
p
l
o
s
d
e
l
M
a
n
u
a
l
d
e
A
n
g
u
l
a
r
,
p
e
r
o
e
s
p
e
r
a
m
o
s
p
o
d
e
r
o
f
r
e
c
e
r
a
l
g
u
n
o
s
c
o
n
o
c
i
m
i
e
n
t
o
s
e
x
t
r
a
queseguramentetevendrán bien.
Comenzaremosrepasando denuevo el concepto, paraofrecer luego diversasexplicacionesadicionalessobre
cómo funcionael property binding. Ademásresolveremosalgunasdudascomunesdelaspersonasque se
inician en Angular.
Qué es el bindeo a propiedades
El bindingapropiedades, o "property binding" en inglés, sirveparaasignar un valor aunapropiedad deun
elemento deun template. Esaasignación podráser un valor literal, escrito tal cual en el template, pero
generalmentesetratarádeun valor obtenido atravésdeunapropiedad del componente, demodo quesi el
estado del componentecambia, también cambielapropiedad del elemento asignadaen el template.
Paraque no quedelugar adudastenemosquedefinir exactamentequéesunapropiedad. Dehecho, en el
párrafo anterior hemosusado lapalabra"propiedad" parareferirnosadoscosas, lo quepuede dar mayor
pieaconfusión.
Propiedades de componentes
Loscomponentesgeneradoscon Angular seimplementan medianteunaclase, deprogramación orientadaa
objetos. Laspropiedadesdeesaclase, losdatosquealmacenael componente, son lo quellamamos
"propiedadesdel componente".
Generalmenteen esteartículo cuando nosreferimosa"property binding" no nosreferimosespecíficamente
apropiedadesdel componente, sino apropiedadesexpresadasen un template. Éstaspueden ser
propiedadesdeelementosHTML (propiedadesdel DOM deesoselementos) o propiedadesde
componentesen general.
Propiedades expresadas en el template
En el HTML del componente, lo quellamamosel templateo lavista, laspropiedadesson cualquier cosaa
lasqueasignamosvalorespor medio debinding. Esto lo podemosver bien con un ejemplo.
A continuación tieneselementosdel HTML alosquedefinimos valorespor medio deatributos.
<img src="imagen.jpg">
<button disabled>Estoy desactivado</button>
Manual de Angular
A esosatributosdelasetiquetaslesasignamosvalores, que sirven parainicializar loselementosHTML.
Debesdesaber desobracómo funcionan.
Tal como están, esaetiquetaIMG o esebotón tendrán siempreel mismo valor en suspropiedades"src" y
"disabled". Sin embargo, si quisierasasignar un valor dinámico auno deesosatributos, tomando algo
definido medianteunapropiedad del componente, tendríasqueacudir al property binding. Sedefineel
bindeo apropiedad medianteunasintaxisespecial deAngular, asunto deesteartículo.
<img [src]="rutaImagen">
<button [disabled]="estadoBoton">Estoy activado o desactivado</button>
En estecaso esdondeencontramoslaspropiedadesgenéricasalasquenoshacemosreferencia, aquellas
expresadasen el templatecon lanotación deloscorchetesdeinicio y decierre.
Graciasal binding depropiedadestenemosunaimagen y un botón igualmente, pero en laimagen su src se
calculaen función delapropiedad del componentellamada"rutaImagen". En el caso del botón, el estado
activo o desactivado, estádefinido por lapropiedad del componente"estadoBoton".
Lo importantequedebemosentender es: cuando trabajascon propiedadesdel template, no estásasignando
valoresaatributosdeHTML. Dehecho, al ponerleloscorchetesdejan deser atributosdel HTML para
pasar aser propiedades del template de Angular.
Variantes del propert y binding
Medianteloscorchetespuedesasignar valoresdinámicosapropiedadesdeun componente, propiedadesde
directivas, o en el caso deloselementosHTML nativos, estásasignando valoresdirectamenteal DOM.
Vamosaanalizar másdecercaestoscasoscon variosejemplos.
<img [src]="rutaImagen">
En esteejemplo estamoscolocando un valor aunapropiedad deun elemento nativo del HTML, quenos
aceptaun string.
Sin embargo no todaslaspropiedadesaceptan cadenas, algunasaceptan boleanos, como erael caso del
botón.
<button [disabled]="estadoBoton">Estoy activado o desactivado</button>
Esteesun caso interesante, porqueel elemento nativo del HTML funcionademodo diferente. Si tieneel
atributo "disabled" estádesactivado. Si eseatributo no aparece, entoncesestaráactivado. Yaparadefinir el
valor de lapropiedad deAngular aparecerásiempreel atributo, pero en algunasocasionesestarádesactivado
y en otrasactivado, dependiendo del valor delavariableboleana"estadoBoton".
Manual de Angular
T
a
m
b
i
é
p
o
d
e
m
o
s
e
c
o
n
t
r
a
r
b
i
n
d
i
n
g
a
p
r
o
p
i
e
d
a
d
e
s
e
n
u
n
a
d
i
r
e
c
t
i
v
a
,
c
o
m
o
s
e
p
u
e
d
e
v
e
r
e
n
e
l
s
i
g
u
i
e
n
t
e
código.
<div [ngStyle]="objEstilos">DIV con estilos definidos por Angular</div>
En estecaso, mediantelapropiedad "objEstilos" seestádefiniendo dinámicamenteel styledeestadivisión.
Si cambiael objeto cambiarálaaplicación delosestilosal elemento.
Por último, tenemosasignación apropiedadespersonalizadasdenuestrospropioscomponentes.
<mi-componente [propiedadPersonalizada]="valorAsignado"></mi-componente>
Esteesun caso especial, queexplicaremoscon detallecuando hablemosdelaspropiedades@Input de
componentes. Básicamentenospermiten crear cualquier tipo depropiedad en componentes, quesomos
capacesdedefinir en el padre. En esecaso concreto, mediantelapropiedad del componentepadre
"valorAsignado" estamosaplicando el valor del componentehijo en lapropiedad "propiedadPersonalizada".
Binding de una dirección
Como sehamencionado, laasignación deunapropiedad esdinámica. Esdecir, si cambiacon el tiempo,
también cambiarálaasignación al elemento al que estamosbindeando.
Volvemosdenuevo al ejemplo:
<img [src]="rutaImagen">
Al crearselaimagen setomarácomo valor desu "src" lo quehayaen lapropiedad del componente
"rutaImagen". Si con el tiempo "rutaImagen" cambiadevalor, el valor viajarátambién alaimagen,
alterando el archivo gráfico que dichaimagen muestra.
Property bindingessiempredeunadirección, depadreahijo. El padredefineun valor y lo asignaal hijo.
Por tanto, aunqueel hijo modificaseel valor nuncaviajaráal padre.
Obviamente, asignando un valor aun [src] deunaimagen dichaimagen no vaacambiar el valor, pero en el
caso deun componentecreado por nosotrossí quepodríaocurrir.
<app-cliente [nombre]="nombreCliente"></app-cliente>
En estecaso, el padrehadefinido queel nombredel clientesealo queéstetieneen su propiedad
"nombreCliente". Podríaocurrir queel componenteapp-clientecambiaseel valor desu propiapropiedad
"nombre". Si eso ocurre, el componentepadreno notaránadapor darseun binding deunaúnicadirección
(padresahijos).
Manual de Angular
Nota: En breveexplicaremoscómo es posiblecrear componentesqueacepten valores deentradaen
suspropiedades. Esto adelantamosquesehacecon el decorador @Input al definir lapropiedad en la
clasedel componente.
Valores posibles para una propiedad
Entrelascomillasasignadascomo valor aunapropiedad podemoscolocar variascosas. Lo común esque
bindeemosmedianteunapropiedad del componente, tal como sehavisto en ejemplos anteriores, pero
podríamoscolocar otro código TypeScript.
Así, dentro del valor deunapropiedad, podemosusar un pequeño conjunto deoperadorescomo el de
negación "!", igual queteníamosen lasexpresionesen el binding por interpolación decadenas.
Ademásvamos aver un ejemplo interesanteporquenosdarápieaexplicar otrascosas: podríamosbindear a
un literal.
<img [src]="'ruta.jpg'">
En estecaso "ruta.jpg" estáescrito entrecomillassimples, luego esun literal destring. Quieredecir que
Angular lo evaluarácomo unacadena, lo asignaráalapropiedad y seolvidarádeél. Esto no tiene mucho
sentido, yaquelo podríamoshaber conseguido exactamenteel mismo efecto con el propio atributo HTML,
sin colocar loscorchetes.
<img src="'ruta.jpg'">
Estaposibilidad (laasignación deun literal) tendrámássentido al usarlo en componentespersonalizados.
<app-cliente nombre="DesarrolloWeb.com"></app-cliente>
Al no colocar lapropiedad entrecorchetes, escomo hacer un binding aun literal destring. Por tanto, el
componente app-clienterecibiráel valor "DesarrolloWeb.com" en su propiedad "nombre" al inicializarse,
pero no seestableceráningún binding durantesu existencia.
También podemosbindear aun método, provocando queesemétodo seejecuteparaaplicar un valor ala
propiedad bindeada.
<p [ngClass]="obtenClases()">Esto tiene class o clases dependiendo de la ejecución de un método</p>
En estecaso, cadavez quecambiecualquier cosadel estado del componente, seejecutarádenuevo
obtenClases() pararecibir el nuevo valor declasesCSSquesedeben aplicar al elemento.
Manual de Angular
Nota: El código detu método obtenClases() deberíaser muy conciso y rápido deejecutar, puesto que
su invocación serealizarámuy repetidasveces. En definitiva, debes usarlo con cuidado parano afectar al
rendimiento delaaplicación.
Evitar efectos laterales
Del mismo modo queocurríacon lasexpresionesen laInterpolación destrings, sedebeevitar queal
evaluar el valor deunapropiedad secambieel estado del componente.
Por ejemplo, si en laexpresión aevaluar paradefinir el valor deunapropiedad colocasunaasignación, verás
un error deAngular advirtiendo esteasunto.
<img [src]="ruta = 'ruta.jpg'">
Esto último no sepuedehacer. Angular sequejarácon un mensajecomo "emplateparseerrors: Parser
Error: Bindingscannot contain assignments".
Ten en cuentaque, al bindear unapropiedad medianteel valor devuelto por un método, Angular no
mostraráerroresfrenteaefectoslateralesproducidospor modificar el estado del componente. Por ejemplo
en:
<img [src]="calculaSrc()">
Si en calculaSrc() cometemoslaimprudenciademodificar el estado, Angular no serácapaz dedetectarlo y
podremosencontrar inconsistenciasentrelaspropiedadesdel componentey lo queseestámostrando en el
template.
Demomento estodo lo quetienesquesaber sobreel bindeo depropiedades. En el siguienteartículo
revisaremosotradelaspreguntasfrecuentesdelaspersonasquecomienzan con Angular, ¿Cuándo usar
interpolación o bindeo apropiedades?.
Esteartículo esobradeMiguel Angel Alvarez
Fuepublicado por primeravez en 09/ 11/ 2017
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ binding-propiedades-angular.html
Binding a propiedad vs interpolación de strings, en Angular
Cuándo usar el binding de propiedad o la interpolación de strings, dos alternativas con objetivos
distintos en Angular, que a veces pueden confundir.
En esteartículo vamosaanalizar en contraposición dosalternativasdebindingen Angular, queaveces
pueden producir dudas, básicamente porquepodrían ser usadasen contextossimilares.
Manual de Angular
E
l
o
b
j
e
t
i
v
o
e
s
a
d
a
r
a
l
l
e
t
o
r
a
i
d
e
n
t
i
f
i
c
a
r
l
o
s
c
a
s
o
s
d
o
n
d
e
s
e
r
e
c
o
m
i
e
n
d
a
u
s
a
r
e
l
b
i
n
d
e
o
d
e
p
r
o
p
i
e
d
a
d
e
s
o
l
a
interpolación destrings, demodo queseacapaz deescoger lamejor opción en cadacaso.
Recuerdaqueestosconceptosyasehan explicado, demodo quedeberíasconocer al menosquédiferencias
tienen. Si no esasí terecomendamosleer el artículo sobrelainterpolación destringsy el binding de
propiedades.
Dos mecanismos distintos, que pueden usarse en situaciones parecidas
Sabiendo quelainterpolación destringsy el bindingdepropiedadesson cosasbien distintas, queremos
mostrar queen ocasionespueden ser usadasen losmismoslugares, produciendo idéntico resultado.
Observemosel siguientecódigo.
<p>
<img src="{{urlImagen}}">
</p>
<p>
<img [src]="urlImagen">
</p>
En el primer caso seestárealizando interpolación, colocando como valor deunapropiedad algo queviene
deunavariable del componente. En el segundo caso seestáusando binding alapropiedad src, colocando el
valor delamismavariable.
Amboscasosresuelven el HTML del componentecon el mismo resultado. ¿Cuál esel correcto?
Tenemosmásejemplos. Observaahoraesteotro caso, en el quebásicamentecolocamosunaclaseobtenida
por medio deunapropiedad del componente. El resultado seráel mismo.
<ul>
<li [class]="valorClass">item 1</li>
<li class="{{valorClass}}">item 2</li>
</ul>
Por último veamosun caso dondetambién obtenemosel mismo resultado, pero usando dos
aproximacionesmucho másdiferentes.
Manual de Angular
<p>{{texto}}</p>
<p [innerHTML]="texto"></p>
En el primer párrafo estamoscolocando como contenido un texto por interpolación. Mientrasqueen el
segundo párrafo secolocael mismo texto, atravésdelapropiedad del componenteinnerHTML.
Si estásconfuso con ambasposibilidadesseríamásquenormal. Intentaremosarrojar algo deluz sobrecuál
deellasteconvieneusar en cadacaso.
Uso de la interpolación con cadenas
En todosloscasosanterioresestamosen definitivavolcando cadenasen diversospuntosdel template.
Aunqueesascadenasavecessecoloquen en propiedadesdel componente, no dejan deser cadenas.
En todosloslugaresdondesetratedecolocar cadenasen unavista, puedequetengamássentido usar
interpolación, debido en mi opinión alaclaridad del código delavista.
Pero ojo, porqueesto esunaopinión personal, queno atiendeaningún motivo relacionado con el propio
framework. Dehecho, lo cierto esqueno existeunadiferenciareal entreunau otraposibilidad, por lo que
sepueden usar indistintamente.
Lo importanteseríaestablecer unanormaaseguir por todoslosdesarrolladoresen cuanto acuál usar en los
casosen losqueno existadiferencia, demodo quetodo el mundo tomelasmismasdecisionesy
obtengamosun código máshomogéneo.
Uso de property binding con valores distint os de cadenas
El caso devaloresqueno sean cadenasdecaracteresesyadistinto. Realmentelainterpolación destrings
siempredebedevolver unacadena, por lo queno seráadecuadasi aquello quesetienequeusar en una
propiedad no esdirectamenteunacadena.
Por ejemplo, lapropiedad "disabled" deun botón debeigualarsepor property binding aun valor boleano,
luego no seráadecuado usar interpolación. Por tanto, lo correcto seríaesto:
<button [disabled]="activo">Clic aquí</button>
En estecaso concreto, no deberíamosusar interpolación, yaqueel resultado no seráel deseado. Por
ejemplo, esto no seríacorrecto.
<button disabled="{{activo}}">Clic aquí</button>
El motivo esqueactivo se interpolaríapor lapalabra"false". En estecaso disabled="false" en HTML sería
lo mismo quecolocar el atributo "disabled" sin acompañarlo deningún valor, lo queequivaleal final aque
el botón estédesactivado.
En definitiva, cadavez quetengamosqueusar un dato queno seaunacadena, espreferiblecolocar el
Manual de Angular
b
i
n
d
i
g
d
e
p
r
o
p
i
e
d
a
.
P
o
r
e
j
e
m
p
l
o
,
l
a
d
i
r
e
c
t
i
v
a
n
g
S
t
y
l
e
e
s
p
e
r
a
u
n
o
b
j
e
t
o
c
o
m
o
v
a
l
o
r
,
p
o
r
l
o
q
u
e
e
s
t
a
r
í
a
m
o
s
obligadosausar property binding.
<div [ngStyle]="estilo">Test de estilo</div>
Sanitización de cadenas en templates de Angular
En el caso quetanto property binding como string interpolation seusen paravolcar cadenasen el template,
hay unadiferenciadestacableen lamaneracomo lascadenassevan asanitizar antesdevolcarseal template.
En vistadeestapropiedad en el componente:
cadenaXSS = 'Esto es un <script>alert("test")</script> con XSS';
Lapropiedad cadenaXSSpresentaun problemadeseguridad, por unainyección decódigo deun script, lo
queseconocepor XSS.
Podríamosvolcarlaen un templatedelasiguientemanera:
<div>{{ cadenaXSS }}</div>
<div [innerHTML]="cadenaXSS"></div>
Angular en amboscasoshaceun saneamiento delacadena, desactivando laetiquetaSCRIPT, paraevitar
problemasdeseguridad por inyección decódigo XSS. Pero el resultado deesesaneamiento esdiferenteen
cadacaso.
En estecaso concreto, lasalidaqueobtendremoseslasiguiente:
Esto es un <script>alert("test")</script> con XSS Esto es un alert("test") con XSS
Tienesqueobservar que, en el caso delainterpolación destrings, laetiquetascript teaparececomo texto en
lapágina. Es decir, seráun simpletexto y no unaaperturay cierredeunaetiquetaparacolocar un script
Javascript.
Esperamosquecon estasindicacioneshayasresuelto algunasdudastípicasquepueden surgir cuando
empiezasatrabajar en el desarrollo con Angular. Ahoraestásen condicionesdeescoger lamejor opción en
cadacaso, entrestring interpolation y Property binding.
Esteartículo esobradeMiguel Angel Alvarez
Fuepublicado por primeravez en 23/ 11/ 2017
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ binding-propiedad-vs-interpolacion-strings.html
Manual de Angular
Servicios en Angular
Comenzamosunaseriedeartículosquenosexplicarán quéson losservicios, unadelaspiezasprincipalesde
lasaplicacionesen Angular. Estudiaremoscómo usar serviciosdentro deaplicaciones, cómo crearlos, cómo
agregarlosamóduloso componentes, cómo instanciar servicios, etc. Veremostambién quépapel juegan los
serviciosdentro del marco deunaaplicación, con ejemplosdeuso quepuedan ilustrar lasbuenasprácticasa
losprogramadores.
Servicios en Angular
Qué son los servicios en el framework Javascript Angular, cómo crear nuestros primeros services,
cómo usarlos desde los componentes.
Hastaahoraen el Manual deAngular hemoshablado mucho decomponentes, y también demódulos. Pero
existen otrostiposdeartefactosque podemosusar paraorganizar el código denuestrasaplicacionesdeuna
maneramáslógicay fácil demantener.
En importanciaacomponentesy móduloslesiguen losservicios. Con esteartículo iniciamossu
descripción. Losservicios, o "services" si lo prefieresen inglés, son unadelaspiezasfundamentalesen el
desarrollo deaplicacionesAngular. Veremosquéesun servicio y cómo dar nuestrosprimerospasosen su
creación y utilización en un proyecto.
Concepto de servicio en Angular
Si eresyaviejo conocido del desarrollo con Angular sabráslo queesun servicio, puesesunaparte
importantedentro delaarquitecturadelasaplicacionescon esteframework. Pero si eresnuevo seguro que
tevendrábien tener unapequeñadescripción delo queesun servicio.
Básicamentehemosdicho anteriormentequeel protagonistaen lasaplicacionesdeAngular esel
componente, quelasaplicacionessedesarrollan en baseaun árbol decomponentes. Sin embargo, amedida
quenuestrosobjetivossean másy máscomplejos, lo normal esqueel código deloscomponentestambién
vayaaumentando, implementando muchalógicadel modelo denegocio.
Manual de Angular
E
n
p
r
i
c
i
p
i
o
e
s
t
o
o
s
e
r
í
a
t
a
n
p
r
o
b
l
e
m
á
t
i
c
o
,
p
e
r
o
s
a
b
e
m
o
s
q
u
e
l
a
o
r
g
a
n
i
z
a
c
i
ó
n
d
e
l
c
ó
d
i
g
o
,
m
a
n
t
e
n
i
e
n
d
o
piezaspequeñasderesponsabilidad reducida, essiempremuy positiva. Además, siemprellegaráel momento
en el quedoso máscomponentestengan queacceder alosmismosdatosy hacer operacionessimilarescon
ellos, quepodrían obligarnosarepetir código. Parasolucionar estassituacionestenemosalosservicios.
Básicamenteun servicio esun proveedor dedatos, quemantienelógicadeacceso aellosy operativa
relacionadacon el negocio y lascosasquesehacen con losdatosdentro deunaaplicación. Losservicios
serán consumidospor los componentes, quedelegarán en elloslaresponsabilidad deacceder ala
información y larealización deoperacionescon losdatos.
Cómo crear un servicio
Tal como viene siendo costumbreen el desarrollo con Angular, nosapoyaremosen Angular CLI parala
creación del esqueleto, o scaffolding, deun servicio.
Paracrear un servicio usamosel comando "generateservice", indicando acontinuación el nombredel
servicio quequeremosgenerar.
ng generate service clientes
Esto nos generaríael servicio llamado "ClientesService". Lacoletilla"Service", al final del nombre, tela
agregaAngular CLI, así como también nombraal archivo generado con lafinalización "-service", paradejar
bien claro queesun servicio.
Eshabitual quequierascolocar el servicio dentro deun módulo en concreto, paralo quepuedesindicar el
nombredel módulo, unabarra"/ " y el nombredel servicio. Pero atención: ahoralo detallaremosmejor,
pero queremosadvertir yaqueesto no agregará el servicio al código de un módulo concreto, sino que
colocaráel archivo en el directorio deesemódulo. Enseguidaveremosquétienesquehacer paraqueeste
servicio seasignerealmenteal módulo quedesees.
ng generate service facturacion/clientes
Nota: como los servicios son algo quesesueleusar desde varioscomponentes, muchos desarrolladores
optan por crearlosdentro deun módulo compartido, quepuedellamarse"común", "shared" o algo
parecido.
Ahora, si quieres, puedesecharleun vistazo al código básico deun service, generado por el CLI. Enseguida
lo examinamos. No obstante, antesqueremosexplicar otro paso importanteparaqueel servicio sepueda
usar dentro delaaplicación.
Agregar la declaración del servicio a un módulo
Parapoder usar esteservicio esnecesario quelo agreguesaun módulo. Inmediatamentelo podrásusar en
Manual de Angular
c
u
a
l
q
u
i
e
r
a
d
e
l
o
s
c
o
m
p
o
n
e
t
e
s
q
u
e
p
e
r
t
e
n
e
c
e
n
a
e
s
t
e
m
ó
d
u
l
o
.
E
s
t
e
p
a
s
o
e
s
i
m
p
o
r
t
a
n
t
e
q
u
e
l
o
h
a
g
a
s
,
p
u
e
s
t
o
que, al contrario delo queocurríaal crear un componente con el CLI, lacreación deun servicio no incluye
lamodificación del módulo dondelo hascreado.
Así pues, vamosatener quedeclarar el servicio manualmenteen el módulo. Lo haremosgraciasal
decorador del módulo (@NgModule), en el array de"providers". El decorador deun módulo con el array
deproviderspodríaquedar máso menosasí.
@NgModule({
imports: [
CommonModule
],
declarations: [ListadoClientesComponent],
providers: [ClientesService]
})
Obviamente, tendrásquehacer el correspondienteimport al módulo, paraqueseconozcalaclase
ClientesService.
import { ClientesService } from './clientes.service';
Como decimos, ahoraestemódulo hadeclarado el servicio como "provider", por lo quesuscomponentes
podrán usar esteservicio.
Nota: El provider queacabamosdedeclarar en el módulo esun array quetambién podremosdeclarar
en un componente, con lo quepodríamosasignar un servicio aun componenteen concreto y no aun
módulo completo. Másadelanteexplicaremosdóndepuedesdeclarar el provider, dependiendo decómo
quieresquetu servicio segestioneanivel de aplicación.
Código básico de un service en Angular
Ahorapodemosexaminar el código generado paranuestro servicio y aprender nuevascosasdeAngular.
Esteseríanuestro recién creado servicio "ClientesService".
import { Injectable } from '@angular/core';
@Injectable()
export class ClientesService {
constructor() { }
}
Como verás, el servicio no tienenadatodavía, solo su declaración, pero hay cosasinteresantesquetenemos
Manual de Angular
q
u
e
e
x
p
l
i
a
r
,
p
r
i
c
i
p
a
l
m
e
t
e
u
n
n
u
e
v
o
d
e
c
o
r
a
d
o
r
q
u
e
n
o
h
a
b
í
a
m
o
s
c
o
n
o
c
i
d
o
h
a
s
t
a
e
l
m
o
m
e
n
t
o
:
"@injectable".
El decorador @injectableindicaaAngular quelaclasequesedecora, en estecaso laclaseClientesService,
puedenecesitar dependenciasquepuedan ser entregadaspor inyección dedepdendencias. Demomento
puedesquedartequelosserviciosnecesitan deestedecorador, aunquerealmentedisponer deél no es
condición indispensable.
Nota: Lainyección dedependenciasesun patrón dedesarrollo bastantehabitual en el mundo delos
frameworks. Yaesfamiliar paralosantiguos desarrolladoresdeAngular, puesestabayaimplementada
en lasversionesde AngularJS(1.x). Sin embargo, no esalgo propio o específico deAngular, sino dela
programación en general. Tenemosun artículo queexplica demanerateóricamáscosasimportantes
sobreestepatrón dediseño de sofware: Inyección dedependencias.
El import, arribadel todo, { Injectable} from '@angular/ core', lo quehaceesquenuestraclaseconozcay
seacapaz deusar el decorador @injectable.
Por lo demás, el servicio estávacío, pero lepodemos poner yaalgo decódigo paraquenossirvadealgo. De
momento vamosaexponer medianteel servicio unasimplepropiedad con un dato, queluego vamosa
poder consumir desdealgún componente. Paraello usamoslaspropiedadesdelaclase, tal como nos
permite TypeScript.
export class ClientesService {
accesoFacturacion = 'https://login.example.com';
constructor() { }
}
En nuestraclaseClientesServicehemoscreado unapropiedad llamada"accesoFacturacion", en laque
hemosasignado un valor queseríacomún paratodoslosclientes. El dato eslo demenos, lo interesantees
ver queladeclaración no distadeotrasdeclaraciones en clasesquehayamosvisto ya.
Cómo inyectar dependencias de servicios
Ahoranostocaver lamagiadeAngular y su inyección dedependencias, quevamosausar parapoder
disponer del servicio en un componente.
Como en otrosframeworks, en Angular lainyección dedependenciasserealizapor medio del constructor.
En el constructor deun componente, quehastaahorahabíamosdejado siemprevacío, podemosdeclarar
cualquieradelosserviciosquevamosausar y el framework seencargarádeproporcionarlo, sin que
tengamosquerealizar nosotrosningún trabajo adicional.
Esto estan sencillo como declarar como parámetro ladependenciaen el constructor del componente.
constructor(private clientesService: ClientesService) { }
Manual de Angular
D
e
e
s
t
a
m
a
n
e
r
a
e
s
t
a
m
o
s
i
n
d
i
c
a
n
d
o
a
T
y
p
e
S
c
r
i
p
t
y
A
n
g
u
l
a
r
q
u
e
v
a
m
o
s
a
u
s
a
r
u
n
o
b
j
e
t
o
"
c
l
i
e
n
t
e
s
S
e
r
v
i
c
e
"
q
u
e
esdelaclase"ClientesService". A partir deentonces, dentro del componenteexistiráeseobjeto,
proporcionando todoslosdatosy funcionalidad definidaen el servicio.
Nota: Esmuy importantequeal declarar lainyección dedependenciasen el constructor no teolvides
deladeclaración devisibilidad (yaseapublic o private), puessi no lacolocasno segenerarálapropiedad
en el objeto construido. Si defineslapropiedad delaclase como pública, afectaráasu visibilidad:
constructor(public clientesService: ClientesService) esto esalgo queteproporcionaTypeScript. Público
o privado el efecto seráel mismo, secrearálapropiedad "clientesService", inyectando como valor un
objeto delaclaseClientesService.
Explicando con det alle la declaración de propiedades implícita en el const ruct or
Aquí tenemosquedetenernosparaexplicar algo delamagia, o azúcar sintáctico, queteofreceTypeScript.
Porqueel hecho quesedeclareunapropiedad en un objeto solo porqueserecibaun parámetro en el
constructor no esalgo usual en Javascript.
Cuando TypeScript detectael modificador devisibilidad "public" o "private" en el parámetro enviado al
constructor, inmediatamentedeclaraunapropiedad en laclasey leasignael valor recibido en el constructor.
Por tanto, estadeclaración:
export class ListadoClientesComponent {
constructor(public clientesService: ClientesService) { }
}
Seríaequivalenteaescribir todo el código siguiente:
export class ListadoClientesComponent {
clientesService: ClientesService;
constructor(clientesService: ClientesService) {
this.clientesService = clientesService;
}
}
En resumen, TypeScript entiendeque, si defineslavisibilidad deun parámetro en el constructor, o que
quiereshacer en realidad escrear unapropiedad en el objeto recién construido, con el valor recibido por
parámetro.
Usando el servicio en el componente
Ahora, paraacabar estaintroducción alosserviciosen Angular, tenemosquever cómo usaríamoseste
servicio en el componente. No nosvamosadetener demasido en hacer ejemploselaborados, quepodemos
abordar másadelante, solo veremosun par demuestrassobrecómo usar lapropiedad declaradaen el
servicio.
Manual de Angular
1.- Usando el servicio dentro de la clase del componente
Dentro delaclasedenuestro componente, tendremosel servicio apartir delapropiedad usadaen su
declaración. En el constructor dijimosqueel servicio sellamaba"clientesService", con laprimeraen
minúsculapor ser un objeto.
Puescomo cualquier otrapropiedad, accederemosaellamediantelavariable"this".
export class ListadoClientesComponent implements OnInit {
constructor(public clientesService: ClientesService) { }
ngOnInit() {
console.log(this.clientesService);
}
}
El ejemplo no valeparamucho, solo paramostrar que, desdequeestécreado el objeto podemosacceder al
servicio con "this.clientesService".
También nossirvepararecordar que, el primer sitio donde podríamosusar losserviciosdeclaradosesen el
método ngOnInit(). Dicho deotro modo, si necesitamosdeestosserviciosparainicializar propiedadadesen
el componente, el lugar dondeponerlosen marchaseríael ngOnInit().
2.- Usando el servicio en el template de un componente
Por su parte, en el templatedeun componente, podrástambién acceder al servicio, paramostrar sus
propiedadeso incluso invocar susmétodoscomo respuestaaun evento, por ejemplo.
Como el servicio estáen unapropiedad del componente, podremosacceder aél meditanteesenombrede
propiedad.
<p>
URL De acceso: {{clientesService.accesoFacturacion}}
</p>
Conclusión a la introducción a los servicios en Angular
Eso estodo lo quetienesquesaber paracomenzar aexperimentar con losserviciosen Angular. Es
momento quepongaslasmanosen el código y comiences aexperimentar por tu cuenta, creando tus
propiosserviciosy usándolosdesdetuscomponentes.
En artículosposterioresveremosserviciosun poco máscompletos, quehagan máscosasqueel quehemos
visto en lapresenteentrega.
Manual de Angular
Esteartículo esobradeMiguel Angel Alvarez
Fuepublicado por primeravez en 04/ 12/ 2017
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ servicios-angular.html
Usar clases e Int erfaces en los servicios Angular
Al desarrollar servicios con Angular es una buena idea usar clases e Interfaces para definir las
estructuras de datos. Veremos cómo y por qué.
Si algo caracterizaaTypeScript, el lenguajecon el quesedesarrollaen Angular, esel uso detipos. Podemos
usar tiposprimitivosen variables, lo quenosayudaráarecibir ayudasen el momento en el que
desarrollamosel código, pero también podemosdefinir tiposmáscomplejospor medio declasese
interfaces.
A lo largo del Manual deAngular hemosdeclarado variablesindicando sustiposen muchasocasiones, pero
hastaahorano hemosusado casi nuncalasclasesparatipar y mucho menoslasinterfaces. En losservicios
esun buen lugar paraempezar aacostumbrarnosaello, lo quenosreportarámuchosbeneficiosalahorade
programar.
Esteartículo no avanzarátanto en lo queesofrecer nuevos conocimientosdeAngular, sino másbien en el
uso decostumbresquenosayudarán en el díaadíay quepor tanto son muy comunesalahorade
desarrollar aplicacionesprofesionales. Paraentenderlo esbueno queconozcaslosfundamentosde
TypeScript y también específicamentedelasinterfacesTypeScript. Obviamente, necesitarástambién saber
lo queesun servicio y cómo crearlosy usarlosen Angular.
Ayudas en tiempo de desarrollo, no en t iempo de ej ecución
Aunquepuederesultar decajón paramuchaspersonas, queremoscomenzar por señalar quelasayudasque
teofreceTypeScript serán siempreen tiempo dedesarrollo. Parapoder aprovechartedeellaslo ideal es
disponer deun editor queentiendaTypeScript, mostrando en el momento quedesarrollaslosproblemas
detectadosen el código.
A lahoradecompilar laaplicación, parasu ejecución en el navegador, también teayudaráTypeScript,
especificando loserroresquehaencontrado en el código, derivadospor un uso incorrecto delasvariablesy
sustipos.
Manual de Angular
S
i
n
e
m
b
a
r
g
o
,
u
n
a
v
e
z
u
e
e
l
n
a
v
e
g
a
d
o
r
e
j
e
c
u
t
a
e
l
c
ó
d
i
g
o
d
e
b
e
s
e
n
t
e
n
d
e
r
q
u
e
t
o
d
o
l
o
q
u
e
i
n
t
e
r
p
r
e
t
a
e
s
Javascript, por lo quelostiposno interferirán en nada. No serámáspesado parael navegador, ni te alertará
deproblemasquesepuedan producir, yaqueéstesolo ejecutarácódigo Javascript. Sin embargo, lo cierto es
quesi tipastecorrectamentetodo lo queestuvo en tu mano y el compilador no tealertó deningún error,
difícilmenteseproduciráun error por un tipo mal usado en tiempo deejecución.
Si yatienesciertaexperienciacon TypeScript habrásobservado lacantidad deerroresquesedetectan
prematuramenteen el código y lo mucho queel compilador teayudaamedidaqueestásescribiendo. Esto
facilitaahorrar mucho tiempo y disfrutar deunaexperienciadeprogramación másagradable. Por todo ello,
usar lostipossiemprequepuedasesunaideaestupenday en esteartículo queremosexplicartecómo ir un
poco másallá, en el marco delosserviciosdeAngular.
Crear una clase para definir el tipo de tus obj etos
Lamaneramáscomún dedefinir tipos, paralaspersonasacostumbradasalenguajesdeprogramación
orientadosaobjetos, son lasclases.
Si tienesen tu aplicación quetrabajar con cualquier tipo de entidad, esunabuenaideaquecreesunaclase
queespecifiquequédatoscontieneesaestructura.
Si nuestraaplicación usaclientes, lo másnormal esquedefinaslaclasecliente, máso menoscomo esto:
class Cliente {
nombre: String;
cif: String;
direccion: String;
creado: Date;
}
Luego, cuando quierascrear un clientepodrásdeclararlo usando el tipo delaclaseCliente.
let cliente: Cliente;
A partir deahora, en el caso queusesun código queno respeteesadeclaración sealertará
convenientemente.
Manual de Angular
Crear una interfaz para definir el tipo de tus obj et os
Máso menoslo mismo podemosconseguir con unainterfaz deTypeScript. Esalgo queyahemosexplicado
en el artículo deInterfacesTypeScript. Pero en resumen, puedesdefinir unainterfaz declientesdeesta
manera.
interface Cliente {
nombre: String;
cif: String;
direccion: String;
creado: Date;
}
Luego podemoscrear unavariableasignando lainterfacecomo si fueraun tipo.
let cliente: Cliente;
A partir deaquí el editor nosavisarácuando el valor asignado no cumplalainterfaz.
Manual de Angular
¿Clases o interfaces?
Si ambasconstruccionestesirven paramáso menoslo mismo ¿cuándo usar clasesy cuándo usar interfaces?
larespuestadependeun poco sobrecómo vayasagenerar losdatos.
Esmuy habitual usar simplementeinterfaces, desprovistasdeinicialización y funcionalidad, yaqueesas
partesescomún quesean delegadasen losservicios. Pero en el caso deusar clases, tusnuevosobjetos serán
creadoscon lapalabra"new".
let cliente1 = new Cliente();
cliente.nombre = 'EscuelaIT S.L.";
cliente.cif = 'B123';
cliente.direccion = 'C/ Del Desarrollo Web .com';
cliente.creado = new Date(Date.now());
Si losobjetosquedebescrear presentan tareasdeinicialización pesadas, usando clases, podrásapoyarteen
losconstructorespararesumir lospasosparasu creación. En estecaso podemosconseguir un código más
compacto:
let cliente1 = new Cliente('EscuelaIT S.L.', 'B123', 'C/ Del Desarrollo Web .com');
Nota: obviamente, paraque esto funcionetienesquehaber creado el correspondienteconstructor en la
implementación delaclaseCliente. Observaqueen caso detener un constructor podríamosahorrarnos
pasarleel objeto de laclaseDate, paraasignar en lapropiedad "creado", puesto quepodríamos delegar
en el constructor latareadeinstanciar un objeto Date con lafechacon el instanteactual.
Sin embargo, losobjetosquecontienen datospararepresentar en tu aplicación no siempresegeneran
mediantetu propio código frontend, yaqueeshabitual queesosdatosprovengan dealgún web service(API
REST o similar) quetelosproporcionepor medio dellamadas"HTTP" (Ajax). En estoscasosno harás
"new", sino queusarásAngular parasolicitar al servidor un dato, queserádevuelto en formadeun objeto
JSON habitualmente. En estos casosesespecialmenteidóneo definir unainterfaz y declarar lael objeto que
tedevuelvael servidor con el tipo definido por esainterfaz. Másadelanteveremosejemplosdeestecaso en
concreto.
Useso no serviciosweb paratraertelosdatos, con interfacestambién puedescrear objetosque
correspondan con el tipo dedatosdefinido en lainterfaz. Simplementelos crearíasen tusserviciospor
medio deliteralesdeobjeto.
let cliente: Cliente;
cliente = {
nombre: 'EscuelaIT',
cif: 'ESB123',
direccion: 'C/ de arriba, 1',
creado: new Date(Date.now())
};
Manual de Angular
Como puedesver, ladecisión sobreusar claseso interfacespuededepender delasnecesidadesdetu
aplicación, o incluso detuspreferenciaso costumbresdecodificación.
Incluso, nadateimpidetener ambascosas, unainterfaz y unaclaseimplementando esainterfaz, para
disponer también delaposibilidad deinstanciar objetosayudadospor un constructor.
export interface ClienteInterface {
nombre: String;
cif: String;
direccion: String;
creado: Date;
}
export class Cliente implements ClienteInterface {
creado: Date;
constructor(public nombre: string, public cif: String, public direccion: String) {
this.creado = new Date(Date.now());
}
}
Definir el modelo de datos en un archivo ext erno
Paraordenar el código denuestraaplicación estambién habitual queel modelo dedatossedefinaen un
archivo TypeScript aparte. En esearchivo puedesguardar ladeclaración del tipo y luego importarlo en
cualquier lugar dondequierasusar esetipo dedatos.
Archivo "clientes.modelo.t s"
Por ejemplo, tendríamosel archivo "clientes.modelo.ts" y esearchivo tendría, por ejemplo ladeclaración de
lainterfaz:
export interface Cliente {
nombre: String;
cif: String;
direccion: String;
creado: Date;
}
Nota: no teolvides decolocar lapalabra"export" delantedel nombredelainterfaz, paraqueesa
declaración sepuedaimportar desdeotros archivos.
Archivo "clientes.service.ts"
Manual de Angular
P
o
r
s
u
p
a
r
t
e
,
e
n
e
l
s
e
r
v
i
c
i
o
t
e
n
d
r
í
a
m
o
s
q
u
e
h
a
c
e
r
e
l
i
m
p
o
r
t
d
e
e
s
t
e
t
i
p
o
,
d
e
f
i
n
i
d
o
e
n
c
l
i
e
n
t
e
s
.
m
o
d
e
l
o
.
t
s
,
y
usarlo al declarar objetos.
import { Cliente } from './cliente.modelo';
Por supuesto, unavez definido estetipo dedatos, graciasalacorrespondienteinterfaz importada, lo debes
deusar en tu servicio, en el mayor número delugaresdondepuedas, lo queteproporcionaráun código más
robusto, capaz deadvertirtede cualquier tipo deproblemasen tiempo dedesarrollo y ahorrartemuchas
complicaciones.
Esteseríael código denuestro servicio, dondehacemos uso del tipo Clienteimportado.
import { Injectable } from '@angular/core';
import { Cliente } from './cliente.modelo';
@Injectable()
export class ClientesService {
clientes: Cliente[] = [];
constructor() { }
anadirCliente(cliente: Cliente) {
this.clientes.push(cliente);
}
clienteNuevo(): Cliente {
return {
nombre: 'DesarrolloWeb.com',
cif: 'B123',
direccion: 'Oficinas de EscuelaIT, C/ Formación online nº 1',
creado: new Date(Date.now())
};
}
}
En el código anterior debesfijarteen variascosassobreTypeScript:
Ladeclaración del array "clientes" indicaquesuselementosson detipo Cliente.
En el parámetro del método "anadirCliente" hemosdeclarado el tipo dedatosquerecibimos, de
tipo Cliente.
El valor deretorno del método clienteNuevo() sehadeclarado queserádetipo Cliente.
Obviamente, si durantelaescrituradetu código, no solo en esteservicio sino también en cualquier otro
lugar dondeseuse, no envíasobjetosdelostiposesperados, TypeScript sequejaráy telo harásaber.
Fíjateen lasiguienteimagen. Esel código deun componentellamado "AltaClienteComponent". Hemos
cometido laimprudenciadedeclarar un clientecomo detipo String (flecharoja). Por ello, todoslos
métodosen losquetrabajamoscon esecliente, apoyándonosen el servicio ClientesService, están marcados
Manual de Angular
c
o
m
o
s
i
f
u
e
r
a
n
e
r
r
o
r
(
f
l
e
c
h
a
s
a
m
a
r
i
l
l
a
s
)
.
Nota: Laanterior imagen perteneceal editor Visual Studio Code, queyaincorporadecasatodo lo
necesario paraayudarte al programar con TypeScript, mostrando loscorrespondienteserrores
encontradosen tiempo de desarrollo.
Conclusión
Con esto hemosllegado aun ejemplo deun servicio un poco máscomplejo del quevimosen el artículo
anterior, quetambién secomportarádeun modo másrobusto, alertando deposiblesproblemasalahorade
escribir el código, y cuando el compilador deTypeScript analiceel código paraconvertirlo aJavascript.
También noshadado pieausar algunasdelascosasquenosaportaTypeScript, paraseguir aprendiendo
estesuperset de Javascript. Espero queapartir deahorapuedasesforzartepor sacar mayor partido aeste
lenguaje.
Esteartículo esobradeMiguel Angel Alvarez
Manual de Angular
Fuepublicado por primeravez en 14/ 12/ 2017
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ clases-interfaces-servicios-angular.html
Práctica Angular con Módulos, Componentes y Servicios
Vamos a crear un ejemplo práctico con lo visto hasta el momento en el Manual de Angular en el
que pondremos en uso los conocimientos adquiridos sobre módulos, componentes y servicios.
Somosconscientesdequelo quehemosvisto hastaestepunto del Manual deAngular 2 puederesultar
complicado deasimilar si no realizamosun ejemplo completo, quenosayudeaver demaneraglobal el flujo
dedesarrollo con esteframework. Por ello, vamosapararnosaquí parapracticar un poco.
Veremoscómo trabajar en el desarrollo deunaaplicación Angular en laqueparticipan todoslosintegrantes
quehemosexplicado hastaahora, esdecir: módulos,componentesyservicios.
En el presenteejercicio vamos aconstruir un sistemadealtadeclientesy un listado declientesqueirá
incrementando ítems, amedidaquelosdemosdealta. Seráinteresanteparaloslectores, pero no dejadeser
un sencillo demo decómo trabajar en Angular en estosprimerospasos, pueshay mucho másen el
framework queno hemostenido tiempo deaprender todavía.
Así quevamos aponer manosalaobra. Procuraréser muy específico, yendo paso apaso. Confío no
olvidarmedemencionar ningunapartedel proceso. Ten en cuentaademásquesolamenteresumiréalgunos
detallesdel código, puesen artículospasadosdel presentemanual haquedado yaexplicado todo lo que
vamosaver.
Iremospresentando listadosdecadaunadelaspartesdel código queseirán realizando y al final deeste
artítulo encontrarás también el enlaceal repositorio con el código completo.
Creamos nuestra aplicación
El primer paso es, usando el CLI, crear nuestraaplicación nueva. Lo hacesentrando en lacarpetadetus
proyectosy ejecutando el comando.
ng new clientes-app
Luego puedesentrar en lacarpetadelaaplicación y lanzar el servidor web dedesarrollo, paraver lo quese
haconstruido hastael momento.
Manual de Angular
cd clientes app
ng serve -o
Creamos nuestro módulo de clientes
Laaplicación recién generadayacontieneun módulo principal, sin embargo, yo prefiero dejar esemódulo
con pocaso ningunacosamásdelasquenosentregan por defecto al generar laaplicación básica. Por ello
crearemoscomo primer paso un módulo nuevo, llamado "ClientesModule".
EncargamosaAngular CLI lacreación del esqueleto denuestro módulo con el siguientecomando:
ng generate module clientes
Definir el modelo de datos
Vamosacomenzar nuestro código por definir lostiposdedatosquevamosausar en estaaplicación.
Vamosatrabajar con clientesy grupos.
Crearemosel modelo dedatosdentro delacarpetadel módulo "clientes". No existeen Angular un
generador deestetipo demodelos, por lo quecrearéel archivo amano con el editor. Lo voy anombrar
"cliente.model.ts".
En estearchivo coloco lasinterfacesdeTypeScript quedefinen losdatosdemi aplicación.
export interface Cliente {
id: number;
nombre: string;
cif: string;
direccion: string;
grupo: number;
}
export interface Grupo {
id: number;
nombre: string;
}
Como ves, hecreado el tipo dedatosClientey, por complicarlo un poquito más, el tipo dedatosGrupo.
Así, cadaclientegenerado perteneceráaun grupo.
Nota: Estapartedelacreación deinterfacesesperfectamenteopcional. Solo lahacemosparausar esos
tiposen ladeclaración devariables. El compilador deTypeScript nosavisarási en algún momento no
respetamosestostiposdedatos, ayudando en tiempo dedesarrollo y ahorrando algún queotro error
derivado por despistes.
Manual de Angular
Crear un servicio para los clientes
Lo ideal escrear un servicio (servicedeAngular) dondeconcentremoslas tareasdetrabajo con losdatosde
losclientes, descargando decódigo aloscomponentesdelaaplicación y centralizando en un solo archivo la
lógicadelaaplicación.
El servicio lo vamosacrear dentro delacarpetadel módulo clientes, por lo queespecificamoslaruta
completa.
ng generate service clientes/clientes
En el servicio tengo quehacer el import del modelo dedatos, interfacesdeClientey Grupo (creadasen el
paso anterior).
import { Cliente, Grupo } from './cliente.model';
Nuestro servicio no tienenadadel otro mundo. Vamosaver su código y luego explicaremosalgún queotro
punto destacable.
import { Injectable } from '@angular/core';
import { Cliente, Grupo } from './cliente.model';
@Injectable()
export class ClientesService {
private clientes: Cliente[];
private grupos: Grupo[];
constructor() {
this.grupos = [
{
id: 0,
nombre: 'Sin definir'
},
{
id: 1,
nombre: 'Activos'
},
{
id: 2,
nombre: 'Inactivos'
},
{
id: 3,
nombre: 'Deudores'
},
];
this.clientes = [];
}
Manual de Angular
getGrupos() {
return this.grupos;
}
getClientes() {
return this.clientes;
}
agregarCliente(cliente: Cliente) {
this.clientes.push(cliente);
}
nuevoCliente(): Cliente {
return {
id: this.clientes.length,
nombre: '',
cif: '',
direccion: '',
grupo: 0
};
}
}
1. Lasdospropiedadesdel servicio contienen losdatosquevaamantener. Sin embargo, lashemos
definido como privadas, demodo queno sepuedan tocar directamentey tengamosqueusar los
métodosdel servicio creadosparasu acceso.
2. Losgruposlosconstruyescon un literal en el constructor. Generalmentelostraeríasdealgún
servicio REST o algo parecido, pero demomento estábien paraempezar.
3. Agregar un clienteesun simple"push" al array declientes, deun clienterecibido por parámetro.
4. Crear un nuevo clienteessimplementedevolver un nuevo objeto, quetienequerespetar lainterfaz,
yaqueen lafunción nuevoCliente() seestáespecificando queel valor dedevolución seráun objeto
del tipo Cliente.
5. Fíjatequeen general estátodo tipado, tareaopcional pero siempreútil.
Declarar el servicio para poder usarlo en los componentes
Unatareafundamental parapoder usar losserviciosesdeclararlosen el "module" dondesevayan ausar.
Paraañadir el servicio en el module"clientes.module.ts", el primer paso esimportarlo.
import { ClientesService } from './clientes.service';
Luego hay quedeclararlo en el array "providers".
providers: [
ClientesService
]
Manual de Angular
Crear componente que da de alta client es
Vamosacontinuar nuestraprácticacreando un primer componente. Esel queseencargarádedar dealta
losclientes.
Generamosel esqueleto usando el Angular CLI.
ng generate component clientes/altaCliente
Comenzaremoseditando el archivo del componentey luego iremosatrabajar con el template. Por tanto,
vamosaabrir el fichero "alta-cliente.component.ts".
Agregar el servicio al componente
Muy importante. Parapoder usar el servicio anterior, tengo queagregarlo al componenterecién creado,
realizando el correspondienteimport.
import { ClientesService } from './../clientes.service';
Y posteriormenteyapodréinyectar el servicio en el constructor del componente.
constructor(private clientesService: ClientesService) { }
Agregar el modelo de datos
Parapoder seguir usando lostiposdedatosdemi modelo, vamosaagregar el archivo dondesegeneraron
lasinterfaces.
import { Cliente, Grupo } from './../cliente.model';
Código TypeScript completo del componente
El código completo de"alta-cliente.component.ts", paraladefinición demi componente, quedaríamáso
menosasí
import { Cliente, Grupo } from './../cliente.model';
import { ClientesService } from './../clientes.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-alta-cliente',
templateUrl: './alta-cliente.component.html',
styleUrls: ['./alta-cliente.component.css']
Manual de Angular
})
export class AltaClienteComponent implements OnInit {
cliente: Cliente;
grupos: Grupo[];
constructor(private clientesService: ClientesService) { }
ngOnInit() {
this.cliente = this.clientesService.nuevoCliente();
this.grupos = this.clientesService.getGrupos();
}
nuevoCliente(): void {
this.clientesService.agregarCliente(this.cliente);
this.cliente = this.clientesService.nuevoCliente();
}
}
Esimportantemencionar estospuntos.
1. El componentedeclaraun par depropiedades, el clientey el array degrupos.
2. En el constructor, queseejecutalo primero, conseguimosunainstanciadel servicio declientes,
mediantelainyección dedependencias.
3. PosteriormenteseejecutangOnInit(). En estepunto yaseharecibido el servicio declientes, por lo
quelo puedo usar paragenerar losvaloresquenecesito en laspropiedadesdel componente.
4. El método nuevoCliente() esel queseejecutarácuando, desdeel formulario dealta, seproduzcael
envío dedatos. En estecódigo usamos el servicio clientesService, paraagregar el clientey generar
un clientenuevo, paraqueel usuario puedaseguir dando dealtaclientessin machacar losclientes
anteriormentecreados.
Template del component e, con el formulario de alta de cliente
Vamosaver ahoracuál esel HTML del componentedealtadeclientes, quebásicamentecontieneun
formulario.
Pero antesdeponernoscon el HTML, vamosahacer unaimportantetarea. Consisteen declarar en el
módulo declientesquesevaausar ladirectiva"ngModel". Paraello tenemosquehacer dos pasos:
En el archivo "clientes.module.ts" comenzamospor importar "FormsModule".
import { FormsModule } from '@angular/forms';
En el decorador, indicamosel importsdel FormsModule.
imports: [
CommonModule,
FormsModule
Manual de Angular
],
Ahoraveamosel código del template, en el quereconocerásel uso delapropiedad "cliente" declaradaen el
constructor, así como el array degrupos.
<h2>Alta cliente</h2>
<p>
<span>Nombre:</span>
<input type="text" [(ngModel)]="cliente.nombre">
</p>
<p>
<span>CIF:</span>
<input type="text" [(ngModel)]="cliente.cif">
</p>
<p>
<span>Dirección:</span>
<input type="text" [(ngModel)]="cliente.direccion">
</p>
<p>
<span>Grupo:</span>
<select [(ngModel)]="cliente.grupo">
<option *ngFor="let grupo of grupos" value="{{grupo.id}}">{{grupo.nombre}}</option>
</select>
</p>
<p>
<button (click)="this.nuevoCliente()">Guardar</button>
</p>
Usar el componente Alta cliente
Estecomponente, de altadeclientes, lo quiero usar desdeel componenteraíz demi aplicación. Como el
componente raíz estádeclarado en otro módulo, necesito hacer queconozcaal AltaClienteComponent.
Esto lo consigo en dospasos:
1.- Agregar al exports AltaClienteComponent
En el módulo declientes"clientes.module.ts" agrego al exportsel componentequequiero usar desdeotros
módulos.
exports: [
AltaClienteComponent
]
2.- Importar en el módulo raíz
Ahora, en el módulo raíz, "app.module.ts", debesdeclarar quevasausar componentesquevienen de
clientes.module.ts. Paraello tienesquehacer el correspondienteimport:
Manual de Angular
import { ClientesModule } from './clientes/clientes.module';
Y luego declarasel módulo en el array deimports:
imports: [
BrowserModule,
ClientesModule
],
Hechoslosdospasosanteriores, yapuedesusar el componenteen el template. Paraello simplemente
tenemosqueescribir su tag, en el archivo "app.component.html".
<app-alta-cliente></app-alta-cliente>
Llegado aestepunto, si todo haido bien, deberíasver yael componentedealtadeclientesfuncionando en
tu página.
Nota: Si seproducecualquier error, entoncestetocarárevisar lospasosanterioreso hacer una
búsquedacon el texto del error quetedevuelvalaconsoladel navegador o el terminal, paraver dóndete
hasequivocado.
Crear el componente listado-cliente
Paraacabar nuestraprácticavamosacrear un segundo componentedeaplicación. Seráel componenteque
nosmuestreun listado delosclientesquesevan generando.
Como siempre, comenzamoscon un comando del CLI.
ng generate component clientes/listadoClientes
Ahorael flujo detrabajo essimilar al realizado parael componenteanterior. Vamosdetallando por pasos.
Creaslosimport del servicio y delostiposdedatosdel modelo.
import { Cliente, Grupo } from './../cliente.model';
import { ClientesService } from './../clientes.service';
Inyectasel servicio en el constructor.
constructor(private clientesService: ClientesService) { }
Manual de Angular
En estecomponentetendremoscomo propiedad el array declientesque el servicio vayacreando. Así pues,
declarasdicho array declientes:
clientes: Cliente[];
Cuando seinicialiceel componentetienesquesolicitar losclientesal servicio. Esto lo hacemosen el método
ngOnInit().
ngOnInit() {
this.clientes = this.clientesService.getClientes();
}
Código completo del componente ListadoClientesComponent
Puedesver acontinuación el código TypeScript completo decómo nos quedaríaestesegundo componente.
import { Cliente, Grupo } from './../cliente.model';
import { ClientesService } from './../clientes.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-listado-clientes',
templateUrl: './listado-clientes.component.html',
styleUrls: ['./listado-clientes.component.css']
})
export class ListadoClientesComponent implements OnInit {
clientes: Cliente[];
constructor(private clientesService: ClientesService) { }
ngOnInit() {
this.clientes = this.clientesService.getClientes();
}
}
Código de la vist a
Ahorapodemosver cómo seríalavista, código HTML, del listado decomponentes.
<h2>
Listado clientes
</h2>
<div *ngIf="! clientes.length">No hay clientes por el momento</div>
<div>
Manual de Angular
<article *ngFor="let cliente of clientes">
<span>{{cliente.nombre}}</span>
<span>{{cliente.cif}}</span>
<span>{{cliente.direccion}}</span>
<span>{{cliente.grupo}}</span>
</article>
</div>
No lo hemoscomentado anteriormente, pero puedesdarleun poco deestilo aloscomponenteseditando el
archivo deCSS. Por ejemplo, esteseríaun poco deCSSquepodríascolocar en el fichero "listado-
clientes.component.css".
article {
display: flex;
border-bottom: 1px solid #ddd;
padding: 10px;
font-size: 0.9em;
}
span {
display: inline-block;
width: 22%;
margin-right: 2%;
}
Usar el componente del listado
Parausar estecomponentedelistado declientes, yaquelo queremosinvocar desdeel módulo raíz, tienes
queampliar el exportsdel module"clientes.module.ts".
exports: [
AltaClienteComponent,
ListadoClientesComponent
]
Como parael anterior componente, dealtadeclientes, yahabíamosimportado el módulo declientes, no
necesitas hacer nadamás. Ahorayapuedesusar el usar el componentedirectamenteen el templatedel
componente raíz "app.component.html".
<app-listado-clientes></app-listado-clientes>
Eshoradever denuevo laaplicación construiday disfrutar del buen trabajo realizado. El aspecto dela
aplicación quehemosrealizado deberíaser máso menosel siguiente:
Manual de Angular
Conclusión
Llegado aestepunto, hemosterminado lapráctica. Tenemosun sistemadealtay visualización declientes
dinámico, generado en unaaplicación Angular con diferentespiezasdel framework.
El código completo lo puedesver en esterepositorio en GitHub, en esteenlacequetellevaaun commit
concreto.
Si hasentendido el proceso y por tanto haspodido seguir lospasos, estásen el buen camino. Yaconoceslas
principalespiezasparael desarrollo en Angular. Aún quedamucho por aprender, pero lossiguientespasos
serán mássencillos.
Si tehafaltado información paraentender lo quehemoshecho en esteartículo, tesugiero queleascon
calmaloscorrespondientesartículosdel Manual deAngular, en losquedetallamos cadaunadelaspiezas
usadasen estaaplicación dedemo.
Esnormal también quetesalgan erroressobrelamarcha. Pararesolverlosel compilador deTypeScript y el
propio Angular ayudan bastante. Puedespreguntar o "googlear" paraencontrar respuestasatusproblemas.
Esteartículo esobradeMiguel Angel Alvarez
Fuepublicado por primeravez en 05/ 01/ 2018
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ practica-angular-modulos-componentes-servicios.html
Manual de Angular
Observables en Angular
En lospróximosartículosintroduciremosel concepto deobservable, unaherramientaparalaprogramación
reactivadentro deaplicacionesdeAngular, capaz deaumentar sensiblementeel rendimiento delas
aplicaciones.
Introducción teórica a los observables en Angular
Aclaramos conceptos sobre los observables, por qué son importantes en Angular., qué es la
programación reactiva y qué es RxJS.
En esteartículo vamosacomenzar unanuevaetapaen nuestro conocimiento de Angular, dedicando tiempo
paraunaprimeraaproximación alos"observables", queson unadelasprincipalesnovedadesdel
framework apartir deAngular 2. Losobservables representan también unadelasmejoresformasde
optimizar unaaplicación, aumentando su rendimiento.
En Angular seusan mucho losobservables, dadasu utilidad y versatilidad, aunquehemosdeadmitir queno
esunatareasencilladeaprender inicialmente. Intentaremosacercártelos deunamanerasencilla, paraquelos
puedasir digiriendo poco apoco y suavizar su curvadeaprendizaje. Demomento, en esteartículo del
Manual deAngular, nuestro objetivo esofrecer unaintroducción general, paraquecomiencesaconocerlos,
así como el concepto deprogramación reactiva.
El "por qué" de los observables
Hemosdicho quelosobservablesson unadelasprincipalesherramientasparaprogramar aplicacionesde
mayor rendimiento. Obviamenteeseesel motivo por el cuál seusan en Angular. Pero, ¿dónderesideesa
mejoraderendimiento?
Uno delosmotivos por losqueAngular (y en especial su predecesor AngularJS) seconvirtió en un
framework tan usado essu capacidad deproporcionar unaactualización automáticadelasfuentesde
información. Esdecir, en Angular somoscapacesdeusar un almacén dedatosy, cuando semodificaese
almacén, recibir automáticamentesuscambios, sin quetengamosqueprogramar amano esetránsito dela
información.
Manual de Angular
I
n
c
l
u
s
o
,
a
u
n
q
u
e
n
c
o
m
p
o
n
e
n
t
e
s
e
a
e
l
e
n
c
a
r
g
a
d
o
d
e
a
c
t
u
a
l
i
z
a
r
e
s
e
a
l
m
a
c
é
n
d
e
d
a
t
o
s
,
h
e
m
o
s
v
i
s
t
o
q
u
e
,
usando servicios, podemosconseguir queotroscomponentesreciban automáticamentelasactualizaciones.
Si no lo recuerdas, consultael artículo deprácticacon Angular con componentes, módulosy servicios.
Sin embargo, aunqueAngular nosahorraescribir mucho código, ésto tieneun costeen términosde
rendimiento. Quizásunaaplicación pequeñano severátan afectadapor el trabajo queAngular hacepor
debajo, paraproporcionarnosautomáticamenteloscambios, pero sí sedejaránotar en aplicaciones
medianas. Yalasmásgrandesaplicacionesacusarán sensiblementeunamayor faltaderendimiento.
Nota: Paraser másconcreto, Angular por debajo haceunaseriedeoperacionesdemanerarepetitiva, en
las queconsultaloscambiosen lafuentede datos, parasaber cuándo seactualizan y entoncesrealizar las
accionesoportunaspararefrescar losdatosen loslugaresdondeseestán usando. Esano eralamejor
estrategiaposibley por estemotivo, otras libreríascomo ReactJS, que supieron implementar un patrón
decomportamiento másacertado, capaz deofrecer mayor rendimiento, comenzaron aganar su espacio
antelahegemoníadeAngular.
Lasolución aplicadaen Angular 2 (y quemantienen lassiguientesversiones, 4, 5...) fuéusar un patrón
llamado "Observable", quebásicamentenosahorratener quehacer consultasrepetitivasdeacceso ala
fuentedeinformación, aumentando el rendimiento delasaplicaciones.
Programación reactiva
Hacemosaquí unapausaparaintroducir otro concepto relacionado con losobservables, como esla
"programación reactiva". Aunqueparahablar deprogramación reactivaexisten librosenteros, vamosa
explicar muy por encimasobrelo quesetrata.
Programación tradicional
Primero establezcamosunabasesobreun conocimiento delaprogramación tradicional quenosparece
obvio, pero que eslabasesobrelaprogramación reactiva, quetienequever con el flujo deejecución delas
instrucciones.
En programación tradicional lasinstruccionesseejecutan unadetrásdeotra. Por tanto, si realizamosun
cálculo con dosvariablesy obtenemosun resultado, aunquelasvariablesusadasparahacer el cálculo
cambien en el futuro, el cálculo yaserealizó y por tanto el resultado no cambiará.
let a = 1;
let b = 3;
let resultado = a + b; // resultado vale 4
// Más tarde en las instrucciones...
a = 7; // Asignamos otro valor a la variable a
// Aunque se cambie el valor de "a", resultado sigue valiendo 4,
El anterior código ilustrael modo detrabajo delaprogramación tradicional y laprincipal diferenciacon
respecto alaprogramación reactiva. Aunquepuedaparecer magia, en programación reactiva la variable
resultado habría actualizado su valor al alterarse las variables con las que se realizó el cálculo.
Manual de Angular
Programación react iva y los fluj os de datos
Parafacilitar el cambio decomportamiento entrelaprogramación tradicional y laprogramación reactiva, en
éstaúltimaseusan intensivamentelosflujosdedatos. La programación reactiva es la programación
con flujos de datos asíncronos.
En programación reactivasepueden crear flujos(streams) apartir decualquier cosa, como podríaser los
valoresqueunavariabletomealo largo del tiempo. Todo puedeser un flujo dedatos, como losclicssobre
un botón, cambiosen unaestructuradedatos, unaconsultaparatraer un JSON del servidor, un feed RSS,
el listado detuitsdelaspersonasalasquesigues, etc.
En laprogramación reactivasetienen muy en cuentaesosflujosdedatos, creando sistemasqueson capaces
deconsumirlosdedistintosmodos, fijándoseen lo querealmentelesimportadeestosstreamsy
desechando lo queno. Paraello sedisponedediversasherramientasquepermiten filtrar losstreams,
combinarlos, crear unosstreamsapartir deotros, etc.
Como objetivo final, reactiveprograming seocupadelanzar diversos tiposdeeventos sobre los flujos:
Laaparición dealgo interesantedentro deeseflujo
Laaparición deun error en el stream
Lafinalización del stream
Como programadores, mediantecódigo, podemosespecificar quéeslo quedebeocurrir cuando cualquiera
deesoseventosseproduzca.
Si quieresleer mássobreprogramación reactiva, unaintroducción mucho másdetalladalaencuentrasen el
artículo Theintroduction to ReactiveProgramming you've been missing.
Observables y programación reactiva
El patrón observableno esmásqueun modo deimplementación delaprogramación reactiva, que
básicamenteponeen funcionamiento diversosactoresparaproducir losefectosdeseados, queesreaccionar
anteel flujo delosdistintoseventosproducidos. Mejor dicho, producir dichoseventosy consumirlosde
diversosmodos.
Loscomponentesprincipalesdeestepatrón son:
Observable: Esaquello quequeremosobservar, queseráimplementado medianteunacolección de
eventoso valoresfuturos. Un observablepuedeser creado apartir deeventosdeusuario derivados
del uso deun formulario, unallamadaHTTP, un almacén dedatos, etc. Medianteel observablenos
podemossuscribir aeventosquenospermiten hacer cosascuando cambialo queseesté
observando.
Observer: Esel actor quesededicaaobservar. Básicamenteseimplementamedianteunacolección
defuncionescallback quenospermiten escuchar loseventoso valoresemitidospor un observable.
Lascallbackspermitirán especificar código aejecutar frenteaun dato en el flujo, un error o el final
del flujo.
Subject: esel emisor deeventos, queescapaz decrear el flujo deeventoscuando el observable
sufrecambios. Esoseventosserán losqueseconsuman en losobservers.
Manual de Angular
E
s
t
a
s
s
o
n
l
a
s
b
a
s
e
s
d
e
l
p
a
t
r
ó
n
.
S
a
b
e
m
o
s
q
u
e
h
e
m
o
s
p
u
e
s
t
o
v
a
r
i
o
s
c
o
n
c
e
p
t
o
s
q
u
e
s
ó
l
o
q
u
e
d
a
r
á
n
m
á
s
c
l
a
r
o
s
cuando losveamosen código. Serádentro depoco. Aunquevistasmuy por encima, son conceptoscon los
quemerecelapenacomenzar afamiliarizarse.
Existen diversaslibreríasparaimplementar programación reactivaquehacen uso del patrón observable.
UnadeellasesRxJS, queeslaqueseusaen Angular.
Qué es RxJS
ReactiveExtensions(Rx) esunalibreríahechapor Microsoft paraimplementar laprogramación reactiva,
creando aplicacionesqueson capacesdeusar el patrón observableparagestionar operacionesasíncronas.
Por su parteRxJSeslaimplementación en Javascript deReactiveExtensions, unamásdelasadaptaciones
existentesen muchosotroslenguajesdeprogramación.
RxJSnosofreceunabasedecódigo Javascript muy interesanteparaprogramación reactiva, no solo para
producir y consumir streams, sino también paramanipularlos. Como esJavascript lapuedesusar en
cualquier proyecto en estelenguaje, tanto del lado del clientecomo del lado del servidor.
LalibreríaRxJSdepor sí esmateriadeestudio paraun curso o un manual, pero tenemos queintroducirla
aquí porquelausaAngular paraimplementar susobservables. Esdecir, en vez dereinventar larueda,
Angular seapoyaen RxJSparaimplementar laprogramación reactiva, capaz demejorar sensiblementeel
desempeño delasaplicacionesquerealicemoscon esteframework.
Como habrásentendido, podemosusar RxJSen diversoscontextosy uno deellosson lasaplicaciones
Angular. En los próximosartículoscomenzaremosaver código deAngular paralacreación deobservables
y dealgún modo estaremosaprendiendo lapropialibreríaRxJS.
Conclusión
Con lo quehemostratado en esteartículo tienesunabasedeconocimiento esencial, necesariaparadar el
paso deenfrentartealosobservablesen Angular.
No hemosvisto nadadecódigo pero no tepreocupes, porqueen el próximo artículo vamosarealizar una
prácticadeuso deobservablesen Angular con laque podráspracticar con estemodelo detrabajo parala
comunicación decambios. Lo importantepor ahoraesaclarar conceptosy establecer lasbasesde
conocimiento necesariasparaque, alahoradever el código, tengasunamayor facilidad deentender cómo
funcionaesto delosobservablesy laprogramación reactiva.
Esteartículo esobradeMiguel Angel Alvarez
Fuepublicado por primeravez en 16/ 01/ 2018
Disponibleonlineen http:/ / desarrolloweb.com/ articulos/ introduccion-teorica-observables-angular.html

Navigation menu