Manual Angular 2 De
Manual%20de%20%20Angular
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 113
| Download | |
| Open PDF In Browser | View PDF |
Manual de Angular
Manual de Angular
Int roducción: Manual de Angular
Comenzamos la redacción anuestro Manual de Angular, la evolución del framework Javascript más popular
para el desarrollo de aplicaciones del lado del cliente.
En esta página irás viendo los artículos del Manual de Angular según los vayamos publicando a lo largo de
los próximos meses.
Nuestro objetivo es recorrer las piezas principales de este potente framework y estudiar los mecanismos
para el desarrollo de aplicaciones web universales con Angular 2. De momento encontrarás unaestupenda
introducción al desarrollo con el nuevo Angular, y abordaremos muchos más detalles en breve.
Este manual aborda el framework Angular, en sus versiones 2 en adelante. Cabe aclarar que, poco después
de salir la versión de Angular 2, el framework cambió de nombre aAngular. A partir de aquí se han ido
publicando diversas entregas con números basados en el versionado semántico, pero siempre bajo la misma
base tecnológica. Por tanto, este manual es válido tanto si quieres conocer Angular 2 o Angular 4 o las que
vengan, yaque el framework en sí sigue manteniendo sus mismas bases.
Encuentras este manual online en:
http:/ / desarrolloweb.com/ manuales/ manual-angular-2.html
Manual de Angular
Aut ores del manual
Las siguientes personas han participado como autores escribiendo artículos de este manual.
Miguel Angel Alvarez
Miguel es fundador de DesarrolloWeb.com y laplataforma de formación online
EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997,
transformando su hobby en su trabajo.
Albert o Basalo
Alberto Basalo es experto en Angular y otras tecnologías basadas en Javascript,
como NodeJSy MongoDB. Es director de ÁgoraBinaria, empresa dedicadaal
desarrollo de aplicaciones y alaformación a través de Academia Binaria.
Manual de Angular
Int roducción al desarrollo con Angular
En esta primera parte del manual vamos a dar los primeros pasos para desarrollar aplicaciones con Angular.
Veremos cómo crear el esqueleto de la aplicación básica y conoceremos los principales componentes de
todo proyecto.
Int roducció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 ha cambiado tanto que hasta el nombre es distinto. Lo conocíamos como "AngularJS" y ahoraes
sólo "Angular". No deja de ser una anécdota que hayan eliminado el "JS" hastadel nombre del dominio,
pero es representativo. No porque ahora Angular no seaJavascript, sino porque es evolución radical.
Angular 2 es otro framework, no simplemente unanueva versión. A los que no conocían Angular 1 ésto les
será indiferente, pero los que ya dominaban este framework sí deben entender que el conocimiento que
necesitan adquirir es poco menos que si comenzasen desde cero. Obviamente, cuanta más experiencia en el
desarrollo se tenga, más sencillo será lanzarse a usar Angular 2 porque muchas cosas sonarán de antes.
En este artículo encontrarás un poco de historiarelacionada con Angular 1 y 2, junto con los motivos por
los que Angular 2 es otro framework totalmente nuevo, que rompe compatibilidad hacia atrás.
N ota: Cabe decir que, aunque en este artículo nos refiramos constantemente aAngular como Angular
2, lo correcto es nombrarlo simplemente "Angular". De hecho, la versión 4 o lapróxima versión 5 sigue
llamándose "Angular", asecas. En estos momentos Angular se haacogido al versionado semántico, por
lo que el número de la versión importa menos, ya que siempre se mantiene el nombre del framework
como "Angular" y la base tecnológicasigue siendo la misma. Lo que aprendas en este manual aplica a
Angular 2, 4, 5... y en adelante.
Ret os y necesidades de la nueva versión de Angular
Manual de Angular
Desde su creación hace ya más de 4 años, Angular ha sido el framework preferido por la mayoría de los
desarrolladores Javascript. Este éxito ha provocado que los desarrolladores quieran usar el framework para
más y más cosas.
De ser una plataforma para la creación de Web Apps, ha evolucionado como motor de unaenorme
cantidad de proyectos del ámbito empresarial y de ahí para aplicaciones en laWeb Mobile Híbrida, llevando
la tecnología al límite de sus posibilidades.
Es el motivo por el que comenzaron adetectarse problemas en Angular 1, o necesidades donde no se
alcanzaba una solución a la alturade lo deseable. Son las siguientes.
Javascript: Paracomenzar encontramos problemas en la creación de aplicaciones debido al propio
Javascript. Es un lenguaje con carácter dinámico, asíncrono y de complicada depuración. Al ser tan
particular resulta difícil adaptarse a él, sobre todo para personas que están acostumbradas a manejar
lenguajes más tradicionales como Java o C# , porque muchas cosas que serían básicas en esos lenguajes no
funcionan igualmente en Javascript.
Desarrollo del lado del cliente: Ya sabemos que con Angular te llevas al navegador mucha programación
que antes estaba del lado del servidor, comenzando por el renderizado de las vistas. Esto hace que surjan
nuevos problemas y desafíos. Uno de ellos es la sobrecarga en el navegador, haciendo que algunas
aplicaciones sean lentas usando Angular 1 como motor.
Por otra parte tenemos un impacto negativo en laprimera visita, ya que se tiene que descargar todo el
código de laaplicación (todas las páginas, todas las vistas, todas las rutas, componentes, etc), que puede
llegar a tener un peso de megas.
N ota: A partir de la segunda visita no es un problema, porque ya están descargados los scripts y
cacheados en el navegador, pero para un visitante ocasional sí que representa un inconveniente grande
porque nota que laaplicación tardaen cargar inicialmente.
Los intentos de implementar Lazy Load, o cargaperezosa, en el framework en su versión 1.x no fueron muy
fructíferos. Lo ideal seríaque no fuese necesario cargar toda tu aplicación desde el primer instante, pero es
algo muy difícil de conseguir en la versión precedente por el propio inyector de dependencias de Angular
1.x.
Otro de los problemas tradicionales de Angular era el impacto negativo en el SEO, producido por un
renderizado en el lado del cliente. El contenido se inyecta mediante Javascript y aunque se dice que Google
ha empezado a tener en cuentaese tipo de contenido, las posibilidades de posicionamiento de aplicaciones
Angular 1 eran mucho menores. Nuevamente, debido a la tecnologíade Angular 1, era difícil de salvar.
Soluciones implement adas en el nuevo Angular 2
Todos esos problemas, difíciles de solucionar con la tecnología usadapor Angular 1, han sido los que han
impulsado asus creadores adesarrollar desde cero una nuevaversión del framework. Lanueva herramienta
está pensada paradar cabida atodos los usos dados por los desarrolladores, llevar aJavascript a un nuevo
nivel comparable alenguajes más tradicionales, siendo además capaz de resolver de una manera adecuada
Manual de Angular
las necesidades y problemas de la programación del lado del cliente.
En lasiguiente imagen puedes ver algunas de las soluciones aportadas en Angular 2.
TypeScript / Javascript: Como base hemos puesto a Javascript, ya que es el inicio de los problemas de
escalabilidad del código. Ayuda poco a detectar errores y además produce con facilidad situaciones poco
deseables.
N ota: Con ECMAscript 6 yamejora bastante el lenguaje, facilitando la legibilidad del código y
solucionando diversos problemas, pero todavíase le exige más. Ya puestos ano usar el Javascript que
entienden los navegadores (ECMAscript 5), insertando lanecesidad de usar un transpilador como Babel,
podemos subir todavíaun poco de nivel y usar TypeScript.
Angular 2 promueve el uso de TypeScript a sus desarrolladores. El propio framework estádesarrollado en
TypeScript, un lenguaje que agrega las posibilidades de ES6 y el futuro ES7, además de un tipado estático y
ayudas durante la escritura del código, el refactoring, etc. pero sin alejarte del propio Javascript (ya que el
código de Javascript es código perfectamente válido en TypeScript).
La sugerencia de usar TypeScript para desarrollar en Angular es casi unaimposición porque la
documentación y los generadores de código están pensados en TypeScript. Se supone que en futuro
también estarán disponibles para Javascript, pero de momento no es así. De todos modos, parala
tranquilidad de muchos, TypeScript no agrega más necesidad de procesamiento alas aplicaciones con
Angular 2, ya que este lenguaje solamente lo utilizas en laetapa de desarrollo y todo el código que se ejecuta
en el navegador es al final Javascript, ya que existe una transpilación previa.
N ota: Puedes saber más sobre este superset de Javascript en el artículo de introducción a TypeScript.
Lazy SPA: Ahorael inyector de dependencias de Angular no necesita que estén en memoriatodas las clases
o código de todos los elementos que conforman una aplicación. En resumen, ahoracon Lazy SPA el
framework puede funcionar sin conocer todo el código de laaplicación, ofreciendo la posibilidad de cargar
más adelante aquellas piezas que no necesitan todavía.
Manual de Angular
Renderizado Universal: Angular nació para hacer web y renderizar en HTML en el navegador, pero ahora
el renderizado universal nos permite que no solo se pueda renderizar una vista a HTML. Gracias aésto,
alguien podría programar una aplicación y que el renderizado se haga, por ejemplo, en otro lenguaje nativo
para un dispositivo dado.
Otracosa que permite el renderizado universal es que se use el motor de renderizado de Angular del lado
del servidor. Es una de las novedades más interesantes, ya que ahora podrás usar el framework para
renderizar vistas del lado del servidor, permitiendo un mejor potencial de posicionamiento en buscadores de
los contenidos de una aplicación. Esta mismanovedad también permite reducir el impacto de laprimera
visita, ya que podrás tener vistas "precocinadas" en el servidor, que puedes enviar directamente al cliente.
Data Binding Flow: Uno de los motivos del éxito de Angular 1 fue el data binding, pero éste tenía un
coste en tiempo de procesamiento en el navegador, que si bien no penalizaba el rendimiento en todas las
aplicaciones sí eraun problemaen aquellas más complejas. El flujo de datos ahora está mucho más
controlado y el desarrollador puede direccionarlo fácilmente, permitiendo optimizar las aplicaciones. El
resultado es que en Angular 2 las aplicaciones pueden llegar a ser hasta 5 veces más rápidas.
Componentes: Laarquitecturade una aplicación Angular ahora se realiza mediante componentes. En este
caso no se trata de una novedad de la versión 2, ya que en la versión de Angular 1.5 yase introdujo el
desarrollo basado en componentes.
Sin embargo, la componetización no es algo opcional como en Angular 1.5, sino es una obligatoriedad. Los
componentes son estancos, no se comunican con el padre a no ser que se haga explícitamente por medio de
los mecanismos disponibles, etc. Todo esto generaaplicaciones más mantenibles, donde se encapsula mejor
la funcionalidad y cuyo funcionamiento es más previsible. Ahora se evita el acceso universal a cualquier cosa
desde cualquier parte del código, vía herencia o cosas como el "Root Scope", que permitíaen versiones
tempranas de Angular modificar cualquier cosa de la aplicación desde cualquier sitio.
Evolución de las versiones 1 y 2 de Angular
Las versiones de AngularJS1.x siguen vivas y continuarán dando soporte desde el equipo de Angular. Por
tanto, se prevé que después de la actual 1.5 seguirán lanzando actualizaciones, nuevas versiones, etc.
La novedad es que ahora comienzaen paralelo lavidade Angular 2 y seguirá evolucionando por su camino.
Obviamente, la primera noticia que esperamos todos es que se presente la versión definitiva (ten en cuenta
que en el momento de escribir estas líneas Angular 2 está solo en versiones RC, Release Candidate).
De este modo, debe quedar claro, paralas personas que tengan aplicaciones en Angular 1.x, que no
necesitan actualizarlas en una fecha determinada. Todavía existe un buen tiempo por delante en el que sus
proyectos van a estar perfectamente soportados y el código de las aplicaciones perfectamente válido.
Manual de Angular
Han anunciado además que en algún momento habrá algún sistema parahacer el upgrade de las aplicaciones
de Angular 1.x a la 2.x. Esto podría permitir Incluso unaconvivencia, en una misma aplicación, de partes
desarrolladas con Angular 1 y otras con la versión 2. Lafecha de lanzamiento de ese hipotético
"ngUpgrade" está sin confirmar y obviamente tampoco será magia. Veremos en el próximo próximo año lo
que sucede, una vez que esa evolución de las versiones 1 y 2 estén conviviendo.
Conclusión
Se espera un futuro muy prometedor aAngular 2. Sus novedades son importantes y permitirán afrontar el
futuro sobre una base tecnológica capaz de resolver todas las necesidades y retos actuales. En el Manual de
Angular estaremos explicando en los próximos meses cómo usar este framework para desarrollar todo tipo
de aplicaciones basadas en Javascript. Si además quieres aprender ya mismo Angular 2, tutorizado por
nosotros te recomendamos también el curso completo de Angular 2 que encuentras en EscuelaIT.
Para aquel desarrollador que empieza desde cero en Angular 2 será un un bonito camino que le permitirá
crecer profesionalmente y ampliar seriamente sus capacidades y el rango de proyectos que sea capaz de
acometer. El recorrido puede ser difícil al principio, pero la recompensa será grande.
Por su parte, quien ya tengaexperienciaen Angular 1.x siempre le será positiva, sobre todo paralos que (a
partir de la1.5) comenzaron a usar componentes. Aunque en Angular 2 cambie la manerade realizar las
cosas, le resultará todo más familiar y por tanto su curva de aprendizaje serámás sencilla.
Este artículo es obra de AlbertoBasalo
Fue publicado por primeravez en 09/ 06/ 2016
Disponible online en 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
Después de la introducción a las características de Angular 2 del pasado artículo, en esta ocasión te
presentamos una introducción Angular CLI, unade las herramientas esenciales para desarrollar con el
nuevo framework Angular. Es un paso esencial y necesario antes de comenzar a ver código, puesto que
necesitamos esta herramienta parapoder iniciar nuestraprimera aplicación Angular 2, 4 y versiones
venideras.
Debido a la complejidad del desarrollo con Angular, aunque el ejemplo que deseemos desarrollar se trate de
un sencillo "Hola mundo", comenzar usando Angular CLI nos ahorrará escribir mucho código y nos
permitirá partir de un esquema de aplicación avanzado y capaz de facilitar los flujos de desarrollo. Además
nos ofreceráuna serie de herramientas yaconfiguradas y listas para hacer tareas como, depuración, testing o
deploy. Y dicho sea de paso, el CLI también nos ahorrará caer en errores de principiante que nos
provoquen frustración en los momentos iniciales. Así que vamos con ello.
N ota: Mencionamos la complejidad del desarrollo con Angular y la necesidad de usar su CLI, pero es
que el propio desarrollo parala web se hasofisticado bastante. Necesitamos compilar o transpilar el
código, gestores de dependencias, sistemas de empaquetado y compactado de código, sistemas que nos
revisen la sintaxis y nos ayuden a escribir un código limpio, etc. Cada unade esas tareas las debes de
realizar con una herramientadefinida, pero configurarlas todas y conseguir que trabajen al unísono no es
unatareatrivial. Aparte de tiempo necesitarás bastante experiencia y es algo que no siempre se dispone.
Por ello, lamayoría de los frameworks actuales ofrecen interfaces por líneade comandos para hacer las
más diversas tareas. Por todo ello, no hay un framework o libreríaque se precie que no ofrezca su
propio CLI.
Qué es Angular CLI
Dentro del ecosistema de Angular 2 encontramos una herramientafundamental llamada"Angular CLI"
(Command Line Interface). Es un producto que en el momento de escribir este artículo todavíase
encuentraen fase beta, pero que ya resulta fundamental para el trabajo con el framework.
Angular CLI no es unaherramienta de terceros, sino que nos laofrece el propio equipo de Angular. En
resumen, nos facilita mucho el proceso de inicio de cualquier aplicación con Angular, ya que en pocos
minutos te ofrece el esqueleto de archivos y carpetas que vas a necesitar, junto con unacantidad de
herramientas ya configuradas. Además, durante laetapa de desarrollo nos ofrecerá muchas ayudas,
generando el "scaffolding" de muchos de los componentes de una aplicación. Durante la etapa de
producción o testing también nos ayudará, permitiendo preparar los archivos que deben ser subidos al
servidor, transpilar las fuentes, etc.
Manual de Angular
Node y npm
Angular CLI es una herramientaNodeJS, es decir, parapoder instalarla necesitaremos contar con NodeJS
instalado en nuestro sistema operativo, algo que podemos conseguir muy fácilmente yendo ala página de
https:/ / nodejs.org y descargando el instalador para nuestro sistema.
Además se instala vía "npm". Por npm generalmente no te tienes que preocupar, pues se instalaal instalar
NodeJS. No obstante es importante que ambas versiones, tanto la de la plataformaNode como el gestor de
paquetes npm, se encuentren convenientemente actualizados. En estos momentos como requisito nos piden
tener Node 4 o superior.
Actualizado: En estos momentos, septiembre de 2017 y paraAngular en su versión 4, es necesario
tener al menos NodeJSversión 6.9.x y npm 3.x.x.
N ota: Puedes saber la versión de Node que tienes instalada, así como la versión de npm por medio de
los comandos:
node -v
npm -v
No tienes que saber Node para desarrollar con Angular, pero sí necesitas tenerlo para poder instalar y
usar Angular Angular CLI, además de unaserie de herramientas fantásticas para desarrolladores.
Inst alar Angular CLI
Esto lo conseguimos desde el terminal, lanzando el comando:
npm install -g @angular/cli
Durante el proceso de instalación se instalará el propio Angular CLI junto con todas sus dependencias. La
instalación puede tardar varios minutos dependiendo de la velocidad de tu conexión a Internet.
Una vez instalado dispondrás del comando "ng" a partir del cual lanzarás cualquiera de las acciones que se
pueden hacer mediante lainterfaz de comandos de Angular. Puedes comenzar lanzando el comando de
ayuda:
ng --help
N ota: ng (que se lee "enyi") es el apelativo familiar de "Angular" que se conoce desde el inicio del
framework.
Manual de Angular
También encontrarás una excelente ayuda si entras en lapágina de Angular CLI, navegando por sus
secciones, o bien en el propio repositorio de GitHub angular-cli.
Crear el esquelet o de una aplicación Angular 2
Uno de los comandos que puedes lanzar con Angular CLI es el de creación de un nuevo proyecto Angular
2. Este comando se ejecutamediante "new", seguido del nombre del proyecto que queramos crear.
ng new mi-nuevo-proyecto-angular
Lanzado este comando se creará unacarpeta igual que el nombre del proyecto indicado y dentro de ella se
generarán una serie de subcarpetas y archivos que quizás por su número despisten a un desarrollador que se
inicia en Angular. Si es así no te preocupes porque poco a poco nos iremos familiarizando con el código
generado.
Además, como hemos dicho, se instalarán y se configurarán en el proyecto una gran cantidad de
herramientas útiles para la etapadel desarrollo front-end. De hecho, gran cantidad de los directorios y
archivos generados al crear un nuevo proyecto son necesarios paraque estas herramientas funcionen. Entre
otras cosas tendremos:
Un servidor paraservir el proyecto por HTTP
Un sistema de live-reload, para que cuando cambiamos archivos de la aplicación se refresque el
navegador
Herramientas paratesting
Herramientas paradespliegue del proyecto
Etc.
Una vez creado el proyecto inicial podemos entrar en lacarpeta con el comando cd.
cd mi-nuevo-proyecto-angular
Una vez dentro de esa carpeta encontrarás un listado de archivos y carpetas similar a este:
Manual de Angular
N ota: Estalista de carpetas y archivos se ha actualizado a laversión de Angular 4, en septiembre de
2017. Con nuevas versiones del framework nos podemos encontrar con ligeras diferencias del contenido
de laaplicación básicagenerada. En principio no deberíapreocuparnos demasiado, puesto que a veces
se reorganizan las cosas o se usan dependencias distintas que no alteran mucho el funcionamiento o las
prácticas necesarias para el desarrollo con Angular.
Servir el proyect o desde un web server
Angular CLI lleva integrado un servidor web, lo que quiere decir que podemos visualizar y usar el proyecto
sin necesidad de cualquier otro software. Paraservir la aplicación lanzamos el comando "serve".
ng serve
Eso lanzará el servidor web y lo pondráen marcha. Además, en el terminal verás como salidadel comando
la ruta donde el servidor está funcionando. Generalmente será algo como esto (pero te sugerimos verificar
el puerto en la salidade tu terminal):
http://localhost:4200/
En lasiguiente imagen ves lasalida del terminal nuestro.
Manual de Angular
Podrías modificar el puerto perfectamente si lo deseas, simplemente indicando el puerto deseado con la
opción --port:
ng serve --port 4201
Una vez hayas abierto en navegador y accedido a laURL de localhost, con el puerto indicado, verás la
pantalla de inicio de la aplicación que se acaba de crear. Tendráun aspecto similar al de lasiguiente imagen
(ten en cuenta que esta páginaes solo una especie de "hola mundo" y que su aspecto puede cambiar
dependiendo de la versión de Angular que estés usando.
Manual de Angular
Script s de npm
Para quien no lo sepa, npm es el "Node Package Manager", el gestor de paquetes de NodeJS. El CLI de
Angular lo hemos instalado víanpm. Nuestrapropiaaplicación Angular se puede gestionar vía npm, para
instalar sus dependencias. Iremos conociendo las mecánicas en el Manual de Angular, no obstante,
queremos detenermos ahablar de unaherramienta de utilidad a la que puedes sacar ya mismo algo de valor:
los scripts de npm.
Los scripts de npm son como subcomandos que npm te acepta para automatizar diferentes tareas. Éstos se
definen en el archivo "package.json", en la sección "scripts".
N ota: "package.json" es una especie de resumen de las cosas que se han instalado en un proyecto vía
npm. Nuestra aplicación Angular recién instalada tiene un archivo package.json que puedes abrir para
dar un primer vistazo. En un archivo package.json encontramos diversas cosas, como el nombre del
proyecto, lalicencia, autores, las dependencias de un proyecto, tanto las que importan para la fase de
desarrollo como para el proyecto en general. Este archivo tiene formato JSON, por lo que es un simple
texto plano que no te costará de leer.
Como scripts de npm en nuestro proyecto recien creado encuentras varias alternativas como "start",
"build", "test", etc. Esos scripts se pueden poner en marcha desde la consola, mediante el comando "npm",
por ejemplo, para lanzar el script "start", tienes que escribir el comando de consola:
ng start
En el archivo package.json encuentras el comando que se ejecutaráal hacer cadauno de estos scripts npm.
Por ejemplo "start" lo que provoca es que se lance el comando "ng serve". Por lo tanto los comandos "npm
start" o "ng serve" en principio son equivalentes. Sin embargo, nosotros podemos modificar los scripts npm
para ajustarlos a nuestras necesidades, o incluso crear nuevos comandos npm. Para probar simplemente
vamos aponer "--o" al final del comando correspondiende con el script "start". Este "--o" lo que hace es
que, al iniciarse el servidor paracorrer laaplicación Angular, se abra el navegador directamente y nos la
muestre.
"scripts": {
"ng": "ng",
"start": "ng serve --o",
[...]
}
Ahora, al hacer un "npm start" observarás cómo se inicia el servidor web, nos indicala URL donde está
disponible, pero nos abre el navegador automáticamente mostrando esaURL. Así te ahorras el trabajo de
lanzar tú mismo el browser y escribir a mano la dirección del servidor que se ha abierto para servir nuestra
app de Angular.
Problema Angular CLI con Broccoli en Windows
Manual de Angular
El problema más típico que nos podemos encontrar al usar Angular CLI es que no tengamos permisos de
administrador. Al intentar poner en marchael servidor recibirás un error como este:
TheBroccoli Plugin: [BroccoliTypeScriptCompiler] failedwith: operation not permitted.
Es muy sencillo de solucionar en Windows, ya que simplemente necesitamos abrir el terminal en modo
administrador (botón derecho sobre el icono del programaque uses para línea de comandos y "abrir como
administrador". Eso permitirá que Angular CLI disponga de los permisos necesarios para realizar las tareas
que requiere.
ACTUALI ZACI ÓN : Esto lo han cambiado en una versión beta de Angular CLI (Beta6), por lo que ya no
hace falta privilegios de administrador para usar las herramientas de línea de comandos de Angular 2.
En Linux o Mac, si te ocurre algo similar, simplemente tendrías que lanzar los comandos como "sudo".
Angular CLI t iene mucho más
En esta pequeñaintroducción solo te hemos explicado cómo iniciar un nuevo proyecto de Angular 2 y
cómo servirlo después por medio del comando serve. Pero lo cierto es que detrás de Angular CLI hay
muchas otras instrucciones de gran utilidad. Principalmente, como hemos comentado, encontrarás una gran
cantidad de comandos que permiten crear el esqueleto de componentes, directivas, servicios, etc.
A medida que vayamos adentrándonos en el desarrollo con Angular 2 iremos aprendiendo de una forma
sencillay práctica todas las posibilidades que permite estaherramienta. De momento te recomendamos
documentarte en el mencionado repositorio de Github.
Este artículo es obra de AlbertoBasalo
Fue publicado por primeravez en 14/ 06/ 2016
Disponible online en http:/ / desarrolloweb.com/ articulos/ angular-cli.html
Análisis de las carpet as de un proyect o 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 abordamos la herramienta Angular CLI y ahora vamos aintroducirnos en el resultado
que obtenemos mediante el comando "ng new", que vimos servía paragenerar el esqueleto básico de una
aplicación Angular 2.
No obstante, antes de entrar en materia, vamos atraer dos puntos interesantes. Uno de ellos es una
reflexión previa sobre la complejidad de un proyecto "vacío" parauna aplicación Angular 2. El otro es una
de las preguntas típicas que se hacen cuando una persona se inicia con cualquier herramienta nueva: el
editor que se recomienda usar.
Manual de Angular
Profesionalización
Todas las mejoras que nos ofrece Angular 2 tienen un coste a nivel técnico. Anteriormente (versiones 1.x)
podíamos comenzar unaaplicación de Angular con un código de inicio muy sencillo y sin necesidad de
configurar diversas herramientas frontend. Básicamente podíamos enlazar Angular desde su CDN y con un
script muy elemental empezar a usarlo.
Esto ya no es así. Con Angular 2 el número de piezas que necesitamos integrar, incluso en aplicaciones tan
sencillas como un "hola mundo", es mucho mayor.
En aplicaciones grandes, donde existíaun entorno bien definido por parte del equipo de desarrollo de esa
aplicación (linter, transpiler, loader, tester, deployer…) se equilibra. Es decir, Angular no nos exige nada
nuevo que ya no estuvieran usando equipos de desarrollo de aplicaciones grandes. Pero lo cierto es que
aplicaciones pequeñas tendrán bastante más complejidad. Todo esto nos lleva a que desarrolladores
ocasionales encontrarán más difícil el uso del framework en sus pasos iniciales, pero el esfuerzo sin duda
merecerá la pena porque los pondrá a un nivel muy superior y eso redundará en su beneficio profesional.
¿Qué edit or de código usar con Angular 2?
Se puede usar cualquier editor de código. Es unaaplicación HTML y Javascript / TypeScript, por lo que
puedes usar cualquIer editor de los que vienes usando para cualquiera de estos lenguajes.
Como recomendación se sugiere usar un editor ligero, pero que te facilite la programación. Entre los que
encontramos de código libre y gratuitos para cualquier uso están Brackets, Atom o Visual Studio Code. Éste
último es quizás el más indicado, porque ya viene configurado con una serie de herramientas útiles y clave
para desarrollar con Angular 2 como es el "intellisense" de TypeScript. De todos modos, a través de plugins
podrás hacer que tu editor preferido también sea capaz de mostrarte las ayudas en tiempo de programación
del compilador de TypeScript.
Archivos y carpet as con un proyect o de Angular 2.1 y Angular 4
Comenzaremos explicando los archivos y carpetas que encuentras en una aplicación recién creada con el
Angular CLI, tal como lo encontrarás si usas Angular 4, y en versiones más adelantadas de Angular 2. Más
adelante en este mismo artículo explicaremos también carpetas que aparecían en las primeras versiones de
Angular 2, que no son exactamente los mismos. El motivo principal de estas diferencias es que el tooling
que se usaen Angular cambió poco después de liberar la versión 2, por ejemplo con la incorporación de
WebPack. Con ello también la estructura de las carpetas básicas de un proyecto Angular cambió. No es una
diferencia muy grande, y creemos que es útil que mantengamos en el manual ambas alternativas.
Manual de Angular
Archivos suelt os:
Encontrarás varios archivos sueltos en la carpetaraíz de tu proyecto. Te señalamos algunos importantes que
debes conocer:
index.html Este archivo es información básicadel proyecto recién creado. Te puede dar una idea inicial de
qué es lo que encontrarás en estas carpetas y cómo usar el proyecto. Complementará sin duda las
explicaciones de este manual de Angular. Encontrarás algunos comandos explicados del CLI, como "ng
serve" el cuál ya hemos tratado, para servir el proyecto. También comentará que tienes que hacer para
realizar el build, comando "ng build" y llevar a producción una aplicación.
.angular-cli.json Es un archivo oculto (en Linux o Mac, pues comienza por ".") en el que se almacenan
configuraciones del CLI de Angular.
package.json Este es el archivo que resume las dependencias del proyecto, las librerías sobre las que nos
apoyamos, que se gestionan por medio de npm.
tslint.json Este archivo sirve paraconfigurar el linter, el programaque nos alertarácuando tengamos
problemas de estilo en el código.
.editorconfig Este es un archivo que sirve paradefinir la configuración parael editor de código que
estemos utilizando. Permite centralizar laconfiguración, de modo que sea común paratodos los
desarrolladores que vayan atrabajar en el proyecto.
Carpet a src
Es la carpeta donde están las fuentes del proyecto. Esta carpeta es la que usaremos para desarrollar la
aplicación y donde iremos colocando componentes y otro tipo de artefactos necesarios para poner en
marcha nuestras ideas.
Entro de "src" encuentras muchos archivos que seguramente te serán familiares, como el index.html, que
hace de raíz del proyecto. Es interesante que abras ese archivo para comprobar cómo es la raíz de una
aplicación Angular. Te debería llamar la atención el código que encontrarás en el body:
Loading...
Ese es el componente raíz de nuestra aplicación Angular 2. Hablaremos de componentes con detalle más
adelante. De momento para lo que te interesa a ti, que es reconocer el flujo de ejecución básico, hay que
decir que su código estáen la carpeta"src/ app".
En esa carpeta encontrarás varios archivos del componente que analizaremos con calmamás adelante. De
momento verás un archivo ".html" que contiene la vista de este componente y un archivo ".css" que
contiene el CSS. Si tu componente se llamaba "mi-nombre-proyecto-app", estos archivos se llamarán "minombre-proyecto.component.html" y " mi-nombre-proyecto.component.css".
Para terminar esta primerazambullida al código te recomendamos editar esos archivos. Es código HTML y
CSSplano, por lo que no tendrás ningún problema en colocar cualquier cosa, siempre que sea HTML y CSS
correcto, claro está.
Para quien use Angular 1 ya reconocerá unaestructuracomo esta:
{{title}}
Es unaexpresión que Angular 2 sustituirá por un dato que se declaraen el archivo .ts del componente. De
momento lo dejamos ahí.
Ej ecut ar el proyect o
Para comprobar si tus cambios en el HTML del componente han tenido efecto puedes probar el proyecto.
La ejecución de estaaplicación yalavimos en el artículo de Angular CLI, por lo que no necesitarás mayores
explicaciones. De todos modos, como resumen, sigue los pasos:
Desde la raíz del proyecto, con el terminal, ejecutamos el comando:
ng serve
Luego nos dirigimos a laURL que nos indican como resultado de la ejecución del comando, que será algo
como:
http://localhost:4200/
Entonces deberías ver la páginafuncionando en tu navegador, con el HTML editado tal como lo has dejado
en el archivo .html del componente principal.
En futuros artículos profundizaremos sobre muchos de los puntos relatados aquí. De momento creemos
Manual de Angular
que esta introducción al código debe aclararte muchas cosas, o plantearte muchas otras dudas.
Si es tu caso, no te preocupes por sentirte despistado por tantos archivos y tantas cosas nuevas, pues poco a
poco iremos familiarizándonos perfectamente con todaesta infraestructura. Paratu tranquilidad, decir que
esta es la parte más compleja y que, apartir de aquí, las cosas serán más agradecidas. Si además vienes de
Angular 1, empezarás areconocer mejor las piezas que antes existían en el framework.
Este artículo es obra de AlbertoBasalo
Fue publicado por primeravez en 29/ 06/ 2016
Disponible online en http:/ / desarrolloweb.com/ articulos/ codigo-proyecto-inicial-angular2.html
Int roducción a los component es 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 se desarrolla en base a componentes. Desde la aplicación más básica de Angular (2, 4 o en
adelante), el Hola Mundo, todo tiene que comenzar por un componente. Nuestraaplicación
"componetizada" se construirá, la verdad, en base a un árbol de componentes de "n" niveles, desde un
componente principal asus hijos, nietos, etc.
Por si no lo sabes, los componentes son como etiquetas HTML nuevas, que podemos inventarnos para
realizar las funciones que sean necesarias paranuestro negocio. Pueden ser cosas diversas, desde una
sección de navegación aun formulario, o un campo de formulario. Para definir el contenido de esta nueva
etiqueta, el componente, usas un poco de HTML con su CSSy por supuesto, un poco de Javascript para
definir su funcionalidad.
Básicamente eso es un componente, una de las piezas fundamentales de las aplicaciones en Angular, que
nos trae diversos beneficios que mejoran sensiblemente la organización de una aplicación, su
mantenimiento, reutilización del código, etc.
Para comenzar aintroducirnos en el desarrollo en base a componentes vamos a realizar en este primer
artículo un análisis del componente inicial, que contiene de toda aplicación Angular y que podemos
encontrar en el proyecto básico creado vía Angular CLI.
Manual de Angular
Localizar el component e inicial
En el Manual de Angular 2 hemos visto que nuestraaplicación se desarrolla en el directorio "src". Allí
encontramos el archivo index.html raíz de la aplicación.. Si lo abres verás que no tiene ningún contenido en
sí. Apenas encontrarás el uso de un componente, una etiqueta que no pertenece al HTML. Es fácil
localizarlo porque es el único contenido del BODY de la página.
{{title}}
Adiós
Manual de Angular
En este HTML hemos incluido más cosas de las que puedes usar desde Angular. Habíamos mencionado la
expresión, entre llaves dobles, que permite volcar el contenido de propiedades del componente. También
encuentras el uso de unapropiedad de un elemento, como es "hidden", entre corchetes (nuevo en Angular
2). Además de la declaración de un evento "click" que se coloca entre parénteis.
N ota: En el siguiente artículo explicaremos con detalle toda esta sintaxis nuevaque podemos usar en las
vistas para declarar eventos, hacer data-binding, etc.
Otro detalle que puedes observar es la propiedad "visible" del componente, que se usa paraasignarla al
atributo hidden del elemento "p". El método de laclase, decirAdios() se usa paraasociarlo como manejador
del evento "click".
Hablaremos más adelante de todas estas cosas que puedes colocar en las vistas y algunas otras, junto con las
explicaciones sobre lasintaxis que se debe usar para declararlas.
N ota: Al modificar los archivos del componente, cualquiera de ellos, tanto el html, css o ts, se debería
refrescar automáticamente la páginadonde estás visualizando tu proyecto unavez puesto en marcha con
el comando "ng serve", gracias al sistemade "live-reload" que te montaAngular CLI en cualquier
proyeto Angular 2.
Otracosa interesante del entorno de trabajo es que, si usas Visual Studio Code u otro editor con los
correspondientes plugin TypeScript, te informarán de posibles errores en los archivos .js. Es unaayuda muy
útil que aparece según estás escribiendo.
Con esto acabamos nuestro primer análisis y modificaciones en el componente inicial. Estamos seguros que
esta última parte, en la que hemos modificado el código del componente básico, habrá resultado ya algo más
entretenida.
Este artículo es obra de AlbertoBasalo
Fue publicado por primeravez en 06/ 07/ 2016
Disponible online en http:/ / desarrolloweb.com/ articulos/ introduccion-componentes-angular2.html
Sint axis par a las vist as 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 los artículos anteriores del Manual de Angular hemos analizado la estructura de unaaplicación básica.
Una de las cosas fundamentales que encontramos es el componente principal, sobre el cual hemos hecho
pequeñas modificaciones paracomprobar que las cosas están funcionando y comenzar a apreciar el poder
Manual de Angular
del framework.
Dentro del componente básico encontramos varios archivos y uno de ellos es el código HTML del
componente, al que comúnmente nos referiremos con el nombre de "vista", denominación que viene por el
patrón de arquitectura MVC. Pues bien, en ese código HTML -la vista-, de maneradeclarativa, podemos
definir y usar muchas de las piezas con las que contamos en unaaplicación: propiedades, eventos, bindeo…
La novedad en Angular (2, 4 y en adelante), para los que vienen de la versión anterior del framework, es que
ahora podemos ser mucho más precisos sobre cómo queremos que la información fluyaentre
componentes, entre la vista y el modelo, etc. En este artículo vamos a ofrecer una primeraaproximación
general atodo lo que se puede declarar dentro de unavista, teniendo en cuenta que muchas de las cosas
necesitarán artículos específicos para abordarlas en profundidad.
N ota: En este artículo, así como a lo largo del manual, hacemos uso constantemente de conceptos del
MVC. Recordamos que existe un artículo genérico de lo que es el MVC, introducción al modelo vista
controlador. De todos modos, en Angular 2 no se aplicaunaimplementación perfectamente clara sobre
el MVC. Existe unaseparación del código por responsabilidades, lo que ya nos aportalos beneficios de
la arquitectura por capas, pero laimplementación y características de estas capas no queda tan definida
como podría darse en un framework backend. En este artículo y los siguientes verás que hacemos
referenciaa los modelos y realmente no es que exista una clase o algo concreto donde se colocael
código del modelo. Ese modelo realmente se genera desde el controlador y paraello el controlador
puede obtener datos de diversas fuentes, como servicios web. Esos datos, tanto propiedades como
métodos, se podrán usar desde lavista. Es algo más parecido a un VW (View Model), o sea, un modelo
parala vista, que se crea en el controlador. Por otraparte, tampoco existe un controlador, sino una clase
que implementa el View Model de cadacomponente. En resumen, conocer el MVC te ayudaráa
entender laarquitectura propuesta por Angular 2 y apreciar sus beneficios, pero debemos mantener la
mente abierta para no confundirnos con conocimientos que ya podamos tener de otros frameworks.
HTML permit ido en los Templat es de Angular
Los templates de los componentes. o vistas de los componentes, ya sean colocados inline en el próximo
código TypeScript o en un archivo aparte, se escriben con HTML y permiten colocar mediante la sintaxis de
Angular expresiones, bindeos, eventos, etc. que vamos a introducir en este artículo.
Casi todo el HTML válido es un código potencialmente usable en los templates de Angular. Sin embargo
hay algunas excepciones que conviene conocer.
No est á permit ido colocar script s Javascript en el t emplat e
Manual de Angular
La más importante excepción de HTML válido a usar en un template (una vista) es la etiqueta SCRIPT, ya
que puede ser origen de problemas de seguridad. Bajo el prismade la separación del código por
responsabilidades, no deberíamos colocar una etiquetaSCRIPT dentro de un template, pues la parte del
desarrollo de la lógicade los componentes se debería colocar en el código TypeScript.
Pero, aún cometiendo la imprudenciao malapráctica de colocar una etiqueta SCRIPT, Angular hará caso
omiso de ella y no ejecutará ese código Javascript, evitando posibles problemas e inyecciones de código no
deseado.
N ota: esto mismo ocurre si en unacadena volcadaen un template por interpolación { { } } o bindeo a
propiedad [[]] contiene una etiqueta SCRIPT. Angular se dará el trabajo de sanitizar el código a colocar
en el template, evitando problemas como la inyección de código (xss).
Más tarde en este artículo explicamos la interpolación (sintaxis { { } } dobles llaves) y el bindeo a
propiedades (sintaxis [[]] dobles corchetes), que son dos de las principales piezas declarables en una
vista. Aunque en ocasiones la interpolación lanombraremos como "expresiones" y el bindinga a
propiedad lo nombramos simplemente como "propiedad". Nos referimos a lo mismo, esperamos no
liarte.
No t iene sent ido usar ciert as et iquet as
Hay otras etiquetas que tampoco tiene sentido usarse en un template, como BODY o HEAD. Un
componente es una parte concreta de la página, no la cabecera, ni el cuerpo, por lo que no tendrían ninguna
utilidad colocar esas etiquetas en un template.
Otraetiqueta no usable es BASE, que sirve para indicar por ejemplo la ruta de base a la que aplicar todas las
rutas relativas de los enlaces en todo el documento HTML.
Por lo demás, puedes usar prácticamente cualquier otro HTML disponible en el lenguaje de marcación.
Piezas declarables en una vist a
Comenzaremos por describir las cosas que disponemos para su declaración en una vista, de modo que
todos podamos usar un único vocabulario.
Propiedad: Cualquier valor que podemos asignar por medio de un atributo del HTML. Ese
elemento puede ser simplemente un atributo del HTML estándar, un atributo implementado
mediante el propio Angular 2 o un atributo personalizado, creado para un componente en
específico.
Expresión: Es un volcado de cualquier información en el texto de la página, como contenido a
cualquier etiqueta. La expresión es una declaración que Angular procesará y sustituirá por su valor,
pudiendo realizar sencillas operaciones.
Binding: Es un enlace entre el modelo y lavista. Mediante un binding si un dato cambia en el
modelo, ese cambio se representaen la vista. Pero además en Angular se introduce el "doble
binding", por el cual si un valor se modificaen la vista, también viajahaciael modelo. Con la
novedad en Angular (2 en adelante) que el doble binding es opcional.
Evento: es un suceso que ocurre y parael cual se pueden definir manejadores, que son funciones
Manual de Angular
que se ejecutarán como respuesta a ese suceso.
N ota: Generalmente cuando hablemos de "binding" en la mayoría de las ocasiones nos referimos a
"doble binding", que es la principal novedad que trajo Angular 1 y que le produjo tanto éxito paraeste
framework. Sin embargo, este mismo doble binding es un armade doble filo, pues puede disminuir el
rendimiento de laaplicación y en ocasiones puede producir un flujo de datos difícil de entender y
depurar.
Debido al coste operacional del doble binding (coste en tiempo de procesamiento si la aplicación es muy
compleja y se producen muchos enlaces), la velocidad de Angular puede verse afectada. Es el motivo por el
que se han producido nuevas sintaxis para poder expresar bindings de varios tipos, de unay de dos
direcciones. Dicho de otra manera, ahorase entregaal programador el control del flujo de la información,
para que éste pueda optimizar el rendimiento de la aplicación.
Fluj o de la información de la vist a al modelo y modelo a vist a
El programador ahoraserá capaz de expresar cuándo una información debe ir del modelo hacia la vista y
cuándo debe ir desde la vista al modelo. Para ello usamos las anteriores "piezas" o "herramientas" en el
HTML, las cuales tienen definida de antemano un sentido para el flujo de los datos.
En el siguiente diagrama puedes ver un resumen del flujo de la información disponible en Angular, junto
con las piezas donde podemos encontrarlo y su sintaxis.
1. Las propiedades tienen un flujo desde el modelo a lavista. Unainformación disponible en el
modelo se puede asignar como valor en un elemento del HTML mediante una propiedad, usando la
notación corchetes. Por ej: [propiedad]
2. Las expresiones también viajan desde el modelo a la vista. La diferenciade las propiedades es que en
este caso las usamos como contenido de un elemento y además que se expresan con dobles llaves.
Por ej: { { expresión} }
3. El binding (ados sentidos, o doble binding) lo expresamos entre corchetes y paréntesis. En este
caso la información fluye en ambos sentidos, desde el modelo a la vista y desde lavista al modelo.
Por ej: [(ngBind)]
4. Los eventos no es que necesariamente hagan fluir un dato, pero sí se consideraun flujo de
Manual de Angular
aplicación, en este caso de la vista al modelo, ya que se originan en la vista y generalmente sirven
para ejecutar métodos que acabarán modificando cosas del modelo. Por ej: (evento)
N ota: Como ves, ahoraexisten diversas sintaxis paraexpresar cosas en las vistas. Quizás nos resulte
extraño, pero enseguidanos familiarizaremos. La notación más rara es laque usamos paraexpresar un
binding en dos direcciones [(ngBing)], pero unamanera sencillade acordarnos de ella es con su
denominación anglosajona "bananain abox". Los paréntesis parecen una banana, dentro de los
corchetes, que parecen una caja.
Ej emplos de sint axis ut ilizada en vist as de Angular 2
Realmente yahemos visto ejemplos de buenaparte de las piezas posibles adeclarar en una vista. Si te fijas
en el artículo anterior dedicado a la Introducción a los componentes en Angular 2. Ahora les podemos dar
nombres a cada uno de los elementos encontrados.
Propiedades:
Era el caso de la propiedad "hidden" que usamos paramostrar / ocultar determinados elementos. En este
caso, hidden no es una propiedad estándar del HTML, sino que estágenerada por Angular 2 y disponible
para aplicar tanto en etiquetas HTML comunes como en componentes personalizados.
Adiós
También podríamos aplicar valores a atributos del HTML con datos que están en propiedades del modelo,
aunque no soportatodos los atributos del HTML estándar. Por ejemplo, podríamos asignar una clase CSS
(class) con lo que tuviésemos en unapropiedad del modelo llamada "clase".
Una clase marcada por el modelo
O el enlace de un enlace podríamos también definirlo desde una variable del modelo con algo como esto:
Pulsa aquí
En el código anterior se supone que el componente tendrá una propiedad llamada "enlace", que servirá para
volcar su contenido en el href de laetiqueta A.
En general, el uso más corriente que haremos de las propiedades es personalizar el estado o
comportamiento del componente, mediante datos que tengamos en el modelo. Veremos este caso más
adelante cuando analicemos con mayor detalle los componentes.
Lo que de momento debe quedar claro es que las propiedades van desde el modelo a la vistay, por tanto, si
se modificael valor de una propiedad en el modelo, también se modificará la vista. Pero, si dentro de la
vista se modifica una propiedad no viajará al modelo automáticamente, pues el enlace es de una sola
Manual de Angular
dirección.
Obtendrás más detalles sobre el bindeo a propiedad en el artículo dedicado a Property binding de Angular.
Expresiones:
Es el caso de la propiedad del modelo "title" que se vuelca como contenido de la página en el
encabezamiento.
{{title}}
Simplemente existe esa sustitución del valor de la propiedad, colocándose en el texto de lapágina. El enlace
es de una única dirección, desde el modelo a la vista. En la vista tampoco habría posibilidad de modificar
nada, porque es un simple texto.
El caso de propiedades del HTML con valores que vienen del modelo también podríamos implementarlo
por medio de expresiones, tal como sigue.
Clic aquí
N ota: Las dos alternativas (usar expresiones con las llaves o los corchetes para propiedades, como
hemos visto para el ejemplo de un href de un enlace cuyo valor traes del modelo) funcionan
exactamente igual, no obstante para algunos casos será mejor usar lasintaxis de propiedades en vez de la
de expresiones, como es el caso del enlace. Algo que entenderemos mejor cuando lleguemos al sistema
de rutas.
Explicamos más sobre las expresiones en el artículo sobre String interpolation de Angular.
Event os:
Esto también lo vimos en el artículo anterior (introducción acomponentes), cuando asociamos un
comportamiento al botón. Indicamos entre paréntesis el tipo de evento y como valor el código que se debe
de ejecutar, o mejor, lafunción que se vaa ejecutar para procesar el evento.
Con respecto a Angular 1.x entenderás que ahoratodas las directivas como ng-click desaparecen, dado que
ahora los eventos solo los tienes que declarar con los paréntesis. Esto es interesante ya de entrada, porque
nos permite definir de unaúnica manera cualquier evento estándar del navegador, pero es más interesante
todavíacuando comencemos a usar componentes personalizados, creados por nosotros, que podrán
disparar también eventos personalizados. Capturar esos eventos personalizados serátan fácil como capturar
Manual de Angular
los eventos estándar del HTML.
Doble binding:
Para este último caso no hemos visto todavíauna implementación de ejemplo, pero lo vamos a conseguir
muy fácilmente. Como se dijo, usamos la notación "banana in a box" paraproducir este comportamiento de
binding en dos direcciones. Los datos viajan de la vistaal modelo y del modelo a la vista.
¿Cómo te llamas?
En este caso, desde el HTML estaríamos creando una propiedad dentro del modelo. Es decir, aunque no
declaremos la propiedad "quien" en el Javascript, por el simple hecho de usarla en la estructura de binding
va a producir que se declare automáticamente y se inicialice con lo que hayaescrito en el campo de texto. Si
la declaramos, o la inicializamos desde la clase que hace las veces de controlador, tanto mejor, pero no será
necesario.
ACTUALI ZADO: Ten muy en cuenta que para poder usar ngModel necesitas importar un módulo
adicional, disponible mediante el propio Angular, pero que no viene cargado por defecto. Esto ocurre
desde Angular 4. Ahora, cuando quieras usar la directiva ngModel tendrás que hacer el import de
FormsModule. En este momento del manual es un poco pronto para explicar todos los detalles de esta
importación. Lo tendrás todo más claro más adelante, cuando hablemos específicamente de los módulos y
sobre todo en el artículo en el que explicamos todas las posibilidades de ladirectiva ngModel.
N ota: La notación "bananain abox" tiene una explicación y es que usatanto el flujo de datos desde el
modelo ala vista, que conseguimos con los corchetes para las propiedades, como el flujo desde la vista
al modelo que conseguimos con los paréntesis paralos eventos.
Para quien conozca Angular 1.x, ngModel funciona exactamente igual que la antigua directiva. En resumen,
le asignamos el nombre de una propiedad en el modelo, en este caso "quien", con laque se va aconocer ese
dato. A partir de entonces lo que hayaescrito en el campo de texto viajará de la vista al modelo y si cambia
en el modelo también se actualizarála vista, produciendo el binding en las dos direcciones.
Si quisiéramos visualizar ese dato en algún otro de lavista, por ejemplo en un párrafo, usaríamos una
expresión. Por ejemplo:
Hola {{quien}}
Conclusión
Con lo que hemos aprendido hasta aquí tenemos una base inicial con laque comenzar a usar Angular y
Manual de Angular
realizar pequeños ejemplos sin perdernos demasiado. Podemos decir que hemos dado nuestro primer paso
en el aprendizaje. Te recomendamos parar un instante lalecturadel Manual de Angular para experimentar
un poco por tu cuenta, cambiando el código en lavista y en el componente raíz de la aplicación, para
afianzar este conocimiento
En los próximos artículos del manual vamos a abordar con mayor detalle el modelo de componentes,
construyendo nuevos componentes en nuestro proyecto y practicando con todo lo visto hasta ahora.
Nuestro siguiente paso es explicar con mayor detalle cómo es la arquitectura de componentes, ya que es un
concepto importante en el desarrollo con Angular.
Este artículo es obra de Miguel Angel Alvarez
Fue publicado por primeravez en 19/ 07/ 2016
Disponible online en http:/ / desarrolloweb.com/ articulos/ sintaxis-vistas-angular2.html
Manual de Angular
Los component es en Angular
Abordamos el desarrollo basado en componentes con todo detalle. Es la pieza más importante de Angular
que nos permitirá no solo estructurar una aplicación de una manera ordenada, sino encapsular funcionalidad
y facilitar una arquitectura avanzaday de fácil mantenimiento de los proyectos Javascript con la nueva
versión de este framework.
El concept o de los component es en Angular y su arquit ect ura
Qué es un componente para Angular y cómo usaremos los componentes para realizar la
arquitectura de una aplicación.
En este artículo del Manual de Angular 2 queremos abordar el concepto del componente desde un punto de
vista teórico, sin entrar aver cómo se construyen en Angular 2. Esaparte prácticala dejaremos para el
próximo artículo, aunque cabe recordar, para los que se impacientan por ver código, que ya dimos una
zambullida en el código de los componentes cuando comenzamos con el "holamundo".
El objetivo es entender mejor cuál es laarquitecturapromovida por Angular 2 para el desarrollo de
aplicaciones y qué papel específico desempeñan los componentes. Es importante porque toda aplicación
Angular 2 se desarrolla en base acomponentes y porque es algo relativamente nuevo en el framework.
Árbol de component es
Una aplicación Angular 2 se desarrollaa base de crear componentes. Generalmente tendrás un árbol de
componentes que forman tu aplicación y cada persona lo podrá organizar de su manerapreferida. Siempre
existirá un componente padre y apartir de ahí podrán colgar todas las ramas que sean necesarias para crear
tu aplicación.
Esto no resultará nada extraño, pues si pensamos en unapágina web tenemos un mismo árbol de etiquetas,
siendo BODY la raíz de la parte del contenido. La diferencia es que las etiquetas generalmente son para
mostrar un contenido, mientras que los componentes no solo encapsulan un contenido, sino también una
funcionalidad.
Manual de Angular
En nuestro árbol, como posible organización, podemos tener en un primer nivel los bloques principales de
la pantalla de nuestra aplicación.
Una barra de herramientas, con interfaces paraacciones principales (lo que podría ser unabarra de
navegación, menús, botonera, etc.).
Una parte principal, donde se desplegarán las diferentes "pantallas" de la aplicación.
Un área de logueo de usuarios.
Etc.
N ota: Obviamente, ese primer nivel de componentes principales lo dictaráel propio proyecto y podrá
cambiar, pero lo anterior nos sirve parahacernos una idea.
Luego, cada uno de los componentes principales se podrá subdividir, si se desea, en nuevos árboles de
componentes.
En labarrade herramientas principal podríamos tener un componente por cada herramienta.
En el área principal podríamos tener un componente para cada"pantalla" de la aplicación o "vista".
A su vez, dentro de cada "vista" o "pantalla" podíamos tener otraserie de componentes que
implementen diversas funcionalidades.
Etc.
Los niveles del árbol serán los que cada aplicación mande, atendiendo a su complejidad, y cada desarrollador
estime necesario, en función de su experiencia o preferencias de trabajo. A medida que componetizamos
conseguimos dividir el código de la aplicación en piezas menores, con menor complejidad, lo que
seguramente sea beneficioso.
Si llegamos a un extremo, y nos pasamos en nuestraansia de componetizar, quizás obtengamos el efecto
contrario. Es decir, acabemos agregando complejidad innecesaria a la aplicación, puesto que existe un coste
de tiempo de trabajo y recursos de procesamiento paraposibilitar el flujo de comunicación entre
componentes.
Component es Vs direct ivas
En Angular 2 perdura el concepto de directiva. Pero ahora tenemos componentes y la realidad es que
ambos artefactos se podrían aprovechar parausos similares. Laclave en este caso es que los componentes
son piezas de negocio, mientras que las directivas se suelen usar para presentación y problemas
estructurales.
Puedes pensar en un componente como un contenedor donde solucionas una necesidad de tu aplicación.
Una interfaz para interacción, un listado de datos, un formulario, etc.
Para ser exactos, en la documentación de Angular 2 nos indican que un componente es un tipo de directiva.
Existien tres tipos de directivas:
Componentes: Un componente es una directiva con un template. Habrá muchas en tu aplicación y
resuelven necesidades del negocio. Directivas de atributos: Cambian la aparienciao comportamiento de
Manual de Angular
un element. Por ejemplo tenemos ngClass, que nos permite colocar una o más clases de CSS(atributo class)
en un elemento. Directivas estructurales: Son las que realizan cambios en el DOM del documento,
añadiendo, manipulando o quitando elementos. Por ejemplo ngFor, que nos sirve para hacer una repetición
(similar al ngRepeat de Angular 1.x), o ngIf que añade o remueve elementos del DOM con respecto a una
expresión condicional.
Por tanto, adiferencia de otras librerías como Polymer, donde todo se resuelve mediante componentes, hay
que tener en cuenta qué casos de uso son los adecuados para resolver con un componente.
Las part es de un component e
Aunque también hemos analizado anteriormente, cuando repasamos la aplicación básica de Angular 2
generadacon Angular CLI, cuáles son las partes fundamentales de un componente, vamos a volver a este
punto para poder ver sus piezas de maneraglobal.
Un componente está compuesto por tres partes fundamentales:
Un template
Una clase
Una función decoradora
Las dos primeras partes corresponden con capas de lo que conocemos como MVC. El template será lo que
se conoce como vista y se escribe en HTML y lo que corresponderíacon el controlador se escribe en
Javascript por medio de unaclase (de programación orientada a objetos).
Por su parte, tenemos el decorador, que es una especie de registro del componente y que hace de
"pegamento" entre el Javascript y el HTML.
Todas estas partes son las que vamos a analizar en los próximos artículos con mayor detalle, comenzando
por los decoradores, que introduciremos en el próximo artículo.
Este artículo es obra de AlbertoBasalo
Fue publicado por primeravez en 01/ 08/ 2016
Disponible online en http:/ / desarrolloweb.com/ articulos/ concepto-teorico-componente-angular2.html
Decorador de component es 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, unade las funciones básicas que vas a tener que realizar en todo desarrollo con Angular es la
decoración de componentes. En sí, no es más que una declaración de cómo será un componente y las
diversas piezas de las que consiste.
En el artículo de introducción a los componentes explicamos solo una de las partes que tiene el archivo .ts
con el código Javascript / TypeScript principal de un componente. Lo que vimos hasta ahoraera la clase
Manual de Angular
que, decíamos, hacía las veces de controlador, que se exporta hacia afuera para que el flujo principal de
ejecución de una aplicación sea capaz de conocer al componente. Además, contiene lo que se llama una
función decoradora que conoceremos a continuación.
Qué es un decorador
Un decorador es una herramientaque tendremos a nuestra disposición en Javascript en un futuro próximo.
Es unade las propuestas para formar parte del estándar ECMAscript 2016, conocido también como ES7.
Sin embargo, ya están disponibles en TypeScript, por lo que podemos comenzar a usarlos ya en Angular.
Básicamente es una implementación de un patrón de diseño de software que en sí sirve para extender una
función mediante otra función, pero sin tocar aquellaoriginal, que se está extendiendo. El decorador recibe
una función como argumento (aquella que se quiere decorar) y devuelve esa función con alguna
funcionalidad adicional.
Las funciones decoradoras comienzan por una "@" y a continuación tienen un nombre. Ese nombre es el
de aquello que queramos decorar, que ya tiene que existir previamente. Podríamos decorar una función, una
propiedad de una clase, una clase, etc.
Miralaprimera línea del código del archivo .ts de tu componente principal.
import { Component } from '@angular/core';
Ese import nos está trayendo laclase Component. En la siguiente línea se decoraa continuación, con el
correspondiente "decorator". No es nuestro objetivo hablar sobre el patrón decorator en sí, ni ver las
posibilidades de estaconstrucción que seguramente tendremos en el futuro ES7, así que vamos a centrarnos
en lo que conseguimos hacer con Angular 2 mediante estos decoradores.
N ota: Uno de los motivos por los que Angular 2 ha tomado TypeScript como lenguaje es justamente
por permitir usar decoradores. Con TypeScript podemos realizar ladecoración de código de ES7 ya
mismo, lo que facilita la decoración del código.
Qué información se agrega por medio del decorador
Angular 2 usa los decoradores para registrar un componente, añadiendo información para que éste sea
reconocido por otras partes de la aplicación. Laformade un decorador es la siguiente:
Manual de Angular
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
Como apreciarás, en el decorador estamos agregando diversas propiedades específicas del componente. Esa
información en este caso concreto se conoce como "anotación" y lo que le entregamos son unos
"metadatos" (metadata) que no hace más que describir al componente que se estácreando. En este caso son
los siguentes:
selector: este es el nombre de laetiqueta nuevaque crearemos cuando se procese el componente. Es
la etiquetaque usarás cuando quieras colocar el componente en cualquier lugar del HTML.
templateUrl: es el nombre del archivo .html con el contenido del componente, en otras palabras, el
que tiene el código de la vista.
styleUrls: es un array con todas las hojas de estilos CSSque deben procesarse como estilo local para
este componente. Como ves, podríamos tener una única declaración de estilos, o varias si lo
consideramos necesario.
N ota: Ese código de anotación o decoración del componente es generado por Angular CLI. Además,
cuando creemos nuevos componentes usaremos el mismo Angular CLI para obtener el scaffolding
(esqueleto) del cual partiremos. Por tanto, no hace faltaque memorices lasintaxis para la decoración,
porque te ladarán hecha. En todo caso tendrás que modificarla si quieres cambiar el comportamiento
del componente, los nombres de archivos del template (vista), hojas de estilo, etc.
De momento no necesitamos dar mucha más información sobre los decoradores. Es algo que debemos
comenzar a usar para desarrollar componentes en Angular 2, pero no nos tiene que preocupar demasiado
todavía, porque de momento no necesitaremos tocar mucho sobre ellos.
Con esto creemos que hemos detallado perfectamente el componente inicial de nuestra aplicación, el
generado por Angular CLI al inicializar el proyecto. En el próximo artículo, por fin, podremos crear nuestro
primer componente propio.
Este artículo es obra de Miguel Angel Alvarez
Fue publicado por primeravez en 09/ 08/ 2016
Disponible online en http:/ / desarrolloweb.com/ articulos/ decorador-componentes-angular2.html
Crear un component e 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és de nuestro repaso teórico a lafigurade los componentes en Angular estamos en condiciones de
Manual de Angular
irnos al terreno de lo práctico y ver cómo se generan nuevos componentes en una aplicación.
Si abres el index.html que hay en la carpeta "src" verás como en el body existe un único componente, pero
sin embargo, unaaplicación de Angular tendrá decenas o cientos de ellos. Los componentes se pueden
organizar de diversas maneras y veremos más adelante cuando lleguemos a los módulos, que los podemos
crear en el módulo principal de la aplicación o en módulos específicos de una funcionalidad en concreto. De
momento vamos a crear un componente en el módulo principal, pues es lo más sencillo para comenzar.
N ota: Además de módulos, recuerdaque unos componentes usarán o se apoyarán en otros para
resolver sus necesidades, creando una estructurade árbol. Todos los componentes que desarrollemos en
adelante estarán de algunamanera dentro del componente raíz. Esto no es nuevo, puesto que ya se
comentó en el Manual de Angular, pero está bien recordarlo paraque quede claro. Partiremos de esta
situación agregando ahora nuevos componentes con los que podremos expandir laaplicación.
Pero, en realidad, nadie te obligaa tener un componente único como raíz. Podrías crear un componente
y usarlo directamente en el index.html de tu aplicación. Haciendo esto convenientemente (pues tendrías
que agregar ese componente al bootstrap del módulo principal para que funcione) no habría ningún
problema por ello. Aunque debido aque ese index.html es código generado y generalmente no lo
querremos tocar, será más recomendable crear los componentes debajo del componente raíz.
Creamos un component e a t ravés de Angular CLI
Yausamos Angular CLI para generar el código de inicio de nuestraaplicación Angular. Ahora vamos a usar
esta herramienta de línea de comandos para generar el esqueleto de un componente. Desde la raíz del
proyecto lanzamos el siguiente comando:
ng generate component nombre-del-componente
N ota: Existe un alias para laorden "generate" que puedes usar para escribir un poco menos. Sería
simplemente escribir "g". Sería algo como ng g component nombre-del-componente
Además de componentes, la orden generate te permite crear el esqueleto de otra serie de artefactos como
son directivas, servicios, clases, etc.
Reconociendo los archivos del component e
Manual de Angular
Si observas ahora la carpeta "src/ app" encontrarás que se ha creado un directorio nuevo con el mismo
nombre del componente que acabamos de crear. Dentro encuentras una serie de archivos que ya te deben
de sonar porque los hemos analizado ya parael componente inicial de las aplicaciones Angular.
Nos referimos a los archivos donde colocas el código (TypeScript) de registro del componente, el CSSpara
los estilos y el HTML para la vista, más el archivo spec.ts, que sirve para el testing. Tendrás en definitiva
algo como puedes ver en la imagen.
N ota: En versiones tempranas de Angular (en estaocasión nos referimos a Angular 2, al menos en sus
primeras releases), existíaun archivo llamado "index.ts", que hacía solo tiene un export y servía para
importar el componente de manera algo más resumida. En index.ts, se exportabael propio componente,
por su nombre. Servía paraque, cuando importas un componente desde otro lugar de tu aplicación, no
tengas que referirte al archivo "nombre-del-componente.component.ts" con todas sus letras, sino
simplemente a lacarpetadonde se encuentra. Ahora en Angular (4) ese archivo no existe.
Component e declarado en el módulo principal
Como hemos dicho, este componente que acabamos de crerar residirá en el módulo principal. En adelante
cuando veamos módulos explicaremos cómo hacer que el componente se cree dentro de un módulo, pero
por el momento estaes la situación. En dicho módulo principal, archivo app.module.ts, se tiene que
declarar el componente que acabamos de crear.
Realmente, al crear el componente mediante el terminal, con los comandos del Angular CLI, las
modificaciones en el módulo principal enfocadas ala declaración de este nuevo componente ya están
realizadas. No obstante es bueno que le echemos un vistazo para irnos familiarizando.
Si abres el archivo app.module.ts, tendrías que reconocer la declaración en estos bloques de código:
1. - El impor t del component e
Este import nos trae el código TypeScript del componente que acabas de crear. Fíjate laclase del
componente y laruta donde estáel código importado.
Manual de Angular
import { NombreDelComponenteComponent } from './nombre-del-componente/nombre-del-componente.component';
2. - La declaración "declarat ions"
En el decorador del módulo principal, en el array de declarations, encontrarás nombrado el componente
que acabas de crear.
@NgModule({
declarations: [
AppComponent,
NombreDelComponenteComponent
],
[...]
}
N ota: Anteriormente, versiones muy tempranas de Angular 2, se usaba SystemJSpara la declaración del
componente. Esto no aplica a las versiones actuales de Angular: En todos los lugares donde, en
adelante, deseabas usar ese componente, con SystemJSestabas obligado a importarlo paraque se
conozcasu código. Para ello hemos visto que solo se usaba el nombre del componente y no el archivo
donde se escribió su clase. Insistimos, eso era antes, cuando para realizar todo lo que es la carga de
módulos se utilizabaSystemJS. En aquella época existía un archivo llamado system-config.ts donde se
administran todas las librerías que se importaban con SystemJS. En ellas encontrarías ladeclaración del
nuevo componente que acabamos de generar.
Javascript de nuest ro component e
El archivo "nombre-del-componente.component.ts" contiene el código Javascript del componente.
N ota: Apreciarás que deberíamos decir que contiene el "código TypeScript del componente", dado que
en realidad adía de hoy Angular CLI solo tiene la opción de generar código TypeScript. No debe
representar un gran problema para ti, porque realmente todo código Javascript es también código
TypeScript, al que se le agregan ciertas cosas, sobre todo para el control de tipos.
Debes reconocer ya diversas partes:
Imports de todo aquello que necesitemos. En principio de la librería @angular/ core, pero luego
veremos que aquí iremos colocando muchos otros imports a medida que vayamos necesitando
código de más lugares.
Decorador del componente, parasu registro.
Clase que hace las veces del controlador, que tengo que exportar.
En estas partes ya conocidas no entraremos de momento con más detalles, pues ya los hemos abordado
Manual de Angular
anteriormente en el Manual de Angular. Ahora te pedimos simplemente echar un vistazo a la cabecera de la
clase, en concreto a su "implements":
export class NombreDelComponenteComponent implements OnInit {
Ese implements es unainterfaz, que no están disponibles todavía en Javascript, ni tan siquiera en ES6, pero
que ya son posibles de usar gracias a TypeScript. Es simplemente como un contrato que dice que dentro de
la clase del componente vamos a definir la funcion ngOnInit(). Sobre esafunción no hablaremos mucho
todavía, pero es un lugar donde podremos colocar código a ejecutar cuando se tenga la certeza que el
componente ha sido inicializado ya.
Solo a modo de prueba, vamos a crear una propiedad llamada "dato" dentro de nuestro componente recién
creado. El código nos quedará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 component e
El componente que acabamos de crear tiene un HTML de prueba, ya escrito en el archivo "nombre-delcomponente.component.html".
Podemos agregarle la expresión para que se vea en el componente la propiedad que hemos generado del
lado de Javascript, en la clase del componente. Tendrías algo como esto:
nombre-del-componente works!
{{ dato }}
Manual de Angular
Puedes abrir ese HTML y colocar cualquier cosa que consideres, simplemente a modo de prueba, para
comprobar que consigues ver ese texto ahora cuando usemos el componente.
N ota: No hemos entrado todavía, pero seguro que alguno ya se lo pregunta o quiere saberlo. El
componente tiene un archivo CSS(aunque se pueden definir varios en el decorador del componente) y
podemos editarlo paracolocar cualquier declaración de estilos. Veremos más adelante, o podrás
comprobar por ti mismo, que esos estilos CSSse aplican únicamente al componente donde estás
trabajando y no a otros componentes de la aplicación.
Con esto hemos terminado de explicar todo lo relativo a la creación de un componente. El componente
está ahí y estamos seguros que estarás ansioso por usarlo en tu proyecto. Es algo que veremos ya mismo, en
el próximo artículo del Manual de Angular 2.
Este artículo es obra de AlbertoBasalo
Fue publicado por primeravez en 26/ 08/ 2016
Disponible online en http:/ / desarrolloweb.com/ articulos/ crear-componente-nuevo-angular2.html
Usar un component e 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 realizamos todos los pasos para crear un componente en Angular 2. Realmente vimos
que la mayoría del código lo generas desde Angular CLI, lo que acelera mucho el desarrollo y facilita nuestra
labor.
Ahora, para terminar nuestra práctica, vamos a aprender a usar el componente que acabamos de crear. Es
una tarea sencilla, pero debido a la arquitectura de Angular y el modo de trabajo que nos marca, es algo que
tendremos que realizar en varios pasos:
1. Crear el HTML para usar el component e
En el lugar de la aplicación donde lo vayas a usar el componente, tienes que escribir el HTML necesario
para que se muestre. El HTML no es más que laetiqueta del componente, que se hadefinido en la función
Manual de Angular
decoradora, atributo "selector" (como vimos al explicar los decoradores).
Titular
En este caso, "claseTitular" es una variable del modelo, algo que me pasa el controlador que tendrás
asociado a un componente.
export class PruebaComponent implements OnInit {
claseTitular: string = "class1";
cambiaEstado() {
this.claseTitular = "class2"
}
ngOnInit() {
}
}
La class del H1 valdrá lo que hayaen la variable claseTitular. Cuando alguien llame al método
cambiaEstado() se modificaría el valor de esa variable y por tanto cambiaría la clase en el encabezamiento.
Si esto ya resuelve lamayoría de las necesidades que se nos ocurren ¿para qué sirve entonces ngClass?
Asignar clases CSS con ngClass
La directivangClass es necesaria para, de una manera cómoda asignar cualquier clase CSSentre un grupo de
posibilidades. Puedes usar varios valores para expresar los grupos de clases aplicables. Es parecido a como
funcionabaen Angular 1.x.
A esta directiva le indicamos como valor:
1. Un array con lalista de clases a aplicar. Ese array lo podemos especificar de maneraliteral en el HTML.
Pueden aplicarse varias clases
O por su puesto podría ser el nombre de una variable que tenemos en el modelo con el array de clases
creado mediante Javascript.
Pueden aplicarse varias clases
Ese array lo podrías haber definido del lado de Javascript.
clases = ['positivo', 'si'];
Manual de Angular
2. Un objeto con propiedades y valores (lo que sería un literal de objeto Javascript). Cada nombre de
propiedad es una posible clase CSSque se podría asignar al elemento y cada valor es unaexpresión que se
evaluará condicionalmente para aplicar o no esa clase.
La etiqueta button tiene un par de atributos que son los que hacen la magia. Entre corchetes se aplica la directiva"ngClass", con un valor de objeto. Entre paréntesis se aplica el evento "click", con la invocación de la función encargada de procesar la acción. Además, el texto del botón es algo que nos vendráde la variable "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, este código TypeScript es lamayoríagenerado por Angular CLI. Lo que hemos hecho nosotros es lo que está dnetro de la clase BotonSinoComponent. En ellacreamos las propiedades necesarias en lavista y el método que se encarga de procesar el cambio de estado. Nuestro CSS: Lógicamente, para que esto funcione necesitaremos declarar algunos estilos sencillos, al menos los de las clases que se usan 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 es todo! Es un ejemplo muy sencillo que quizás para los que vienen de Angular 1.x resulte demasiado básico, pero seguro que lo agradecerán quienes estén comenzando con Angular en estos momentos. Más adelante lo complicaremos algo. Realmente la dificultad mayor puede ser seguir los pasos para lacreación del componente y luego los pasos parasu utilización, pero eso ya lo hemos explicado anteriormente. Este artículo es obra de Miguel Angel Alvarez Fue publicado por primeravez en 13/ 09/ 2016 Disponible online en http:/ / desarrolloweb.com/ articulos/ directiva-nglass-angular2.html Manual de Angular Direct iva ngFor de Angular 2 Explicamos la directiva ngFor, o * ngFor, que nos permite repetir una serie de veces un bloque de H TML en aplicaciones Angular 2. En este artículo vamos aconocer y practicar con una directivade las más importantes en Angular 2, que es la directivangFor, capaz de hacer unarepetición de elementos dentro de la página. Esta repetición nos permite recorrer una estructura de array y paracadauno de sus elementos replicar unacantidad de elementos en el DOM. Para los que vengan de Angular 1 les sonará, puesto que es lo mismo que yase conoce de ngRepeat, aunque cambian algunas cosillas sobre la sintaxis para laexpresión del bucle, así como algunos mecanismos como la ordenación. Uso básico de ngFor Para ver un ejemplo de esta directivaen funcionamiento estamos obligados a crear de antemano un array con datos, que deben ser enviados a la vista, paraque yaen el HTML se pueda realizar esa repetición. Como todo en Angular 2 se organizamediante un componentes, vamos a crear un componente que contiene lo necesario para poder usar estael ngFor. Comenzamos con el código de la parte de TypeScript, que es donde tendremos que crear los datos que estarán disponibles en la vista. 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() { } } Este código nos debe de sonar, pues es el boilerplate de un componente (creado mediante Angular CLI) al que le hemos agregado la declaración de unapropiedad de tipo array de strings. N ota: Hemos asignado el valor de ese array de maneraliteral, pero lo normal sería que lo obtengas de algunafuente como un servicio web, API, etc. Luego, veamos el código HTML de este componente, que es donde colocamos la directiva ngFor.
{{pregunta}}
Es algo muy sencillo, simplemente tenemos un párrafo que se repetirá un número de veces, una por cada elemento del array de preguntas. En este caso es un párrafo simple, pero si dentro de él tuviéramos más elementos, también se repetirían. Lo que tenemos que analizar con detalle es el uso de la directiva, aunque creemos que se auto-explica perfectamente. *ngFor="let pregunta of preguntas" Lo primero que verás es un símbolo asterisco (*) que quizás parezca un poco extraño. No es más que "azúcar sintáctico" pararecordarnos que estas directivas (las comenzadas por el asterisco) afectan al DOM, produciendo la inserción, manipulación o borrado de elementos del mismo. N ota: En las explicaciones que encontrarás en la documentación de Angular 2 sobre el origen del asterisco en el nombre de la directiva nos mencionan detalles acerca de su implementación a bajo nivel, indicando que para ello se basan en el tag TEMPLATE, uno de las especificaciones nativas de Web Components. Como valor de la directivaverás que se declara de manera interna paraeste bucle unavariable "pregunta", que tomará como valor cada uno de los valores del array en cadauna de sus repeticiones. N ota: "let" es unaformade declarar variables en Javascript ES6. Quiere decir que aquellavariable sólo tendrá validez dentro del bloque donde se declara. En este caso "de manera interna" nos referimos aque "pregunta" solo tendrá validez en la etiquetaque tiene el ngFor y cualquiera de sus los elementos hijo. Manual de Angular Recorrido a arrays con obj et os con ngFor Generalmente ngFor lo usarás para recorrer arrays que seguramente tendrán como valor en cadauna de sus casillas un objeto. Esto no cambia mucho con respecto a lo que ya hemos visto en este artículo, pero sí es una bonita oportunidad de aprender algo nuevo con TypeScript. De momento veamos las cosas sin TypeScript para ir progresivamente. Así seríacómo quedaría la declaración de nuestro array, al que todavía no indicaremos el tipo para no 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 que antes era un array de strings simples ha pasado a ser un array de objetos. Cadauno de los objetos nos describen tanto la preguntaen sí como las respuestas positivas y negativas que se han recibido hasta el momento. Ahora, al usarlo en la vista, el HTML, podemos mostrar todos los datos de cada objeto, con un código que podría ser parecido a este:
{{objPregunta.pregunta}}:
Si {{objPregunta.si}} /
No {{objPregunta.no}}
Tamaño del lado {{lado}}
1 way binding
2 way binding:
Evento ngModelChange:
Otracosa que apreciarás en la vista es que el evento ngModelChange no tiene escrito el código del manejador en la propia vista, por considerarlo un antipatrón. Es más interesante que el código se coloque dentro de un método del componente. En este caso tendrás que enviarle al método el valor $event, para que lo puedas usar allí. Manual de Angular Código TypeScript del component e: El código del componente estaráen el archivo cuadrado.component.ts y no tiene ninguna complicació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 component e: Por último recuerdaque es esencial que importes en el módulo donde estés creando este componente el propio módulo del core de Angular donde se encuentra la directiva ngModule. Esto lo hemos descrito en un bloque anterior, pero volvemos a colocar 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, para poder usar este componente "CuadradoComponent" en otro módulo tendrás que hacer el correspondiente import, pero esto es algo que ya se trató en el artículo de los módulos en Angular. N ota: Además de la aplicación de ngModel que hemos conocido en este artículo, relacionada directamente con el sistema de binding de Angular, ngModel también sirve para definir qué campos de formulario deben ser tratados al generarse los objetos ngForm. Estos objetos se crean automáticamente y Angular los pone a disposición parapoder controlar el formulario de una manera muy precisa. Ese uso Manual de Angular lo veremos más adelante cuando hablemos en detalle de los formularios de Angular. Este artículo es obra de Miguel Angel Alvarez Fue publicado por primeravez en 26/ 10/ 2017 Disponible online en http:/ / desarrolloweb.com/ articulos/ directiva-ngmodel-angular.html Manual de Angular Binding en Angular al det alle En los siguientes artículos vamos aexplorar detenidamente el sistemade data-binding creado con Angular, tratando con profundidad algunos temas ya usados dentro de este manual, así como abordando nuevos temas importantes relacionados con el bindeo de datos. Int erpolación {{ }} en Angular al det alle 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 este artículo comenzamos una serie de entregas del Manual de Angular en las que vamos a abordar distintos aspectos del binding en este framework. Son importantes, porque a pesar de ser cosas básicas muchas veces las dejamos pasar y ese desconocimiento acabacreando confusiones más adelante. De todos modos, no vamos a explicar todo desde cero, ya que las bases del data-binding ya las hemos conocido en artículos anteriores del manual. Concretamente es interesante que hayas leído el artículo sobre la sintaxis para las vistas de componentes. En este artículo vamos atratar muchas cosas sobre la interpolación en Angular que quizás hemos dado por sentadas en artículos anteriores y que merece la pena tratar de manera detalladay clara. Qué es la int erpolación de st rings La interpolación de cadenas, también conocida en inglés como "string interpolation", o simplemente como interpolación, es un mecanismo de Angular de sustitución de una expresión por un valor de cadena en un template. Cuando Angular ve en un template algo escrito entre dobles llaves { { } } lo evalúa y lo tratade convertir en una cadena, para luego volcarlo en el template.Esto es un caso de interpolación de {{algunaCadena}}
Manual de Angular Eso quiere decir a Angular que debe sustituir una propiedad del componente llamada "algunaCadena" y colocar su valor tal cual en el template. Si "algunaCadena" es una cadena, simplemente se escribirá su valor en el template, pero si eso no era una cadena tratará de colocarlo de manera que lo fuera. Por ejemplo, si tuviera un valor numérico colocará el número tal cual en el template. Puedes usar también la interpolación como valor de propiedades de elementos HTML, como es el siguiente caso.
Manual de Angular
A esos atributos de las etiquetas les asignamos valores, que sirven para inicializar los elementos HTML.
Debes de saber de sobra cómo funcionan.
Tal como están, esa etiqueta IMG o ese botón tendrán siempre el mismo valor en sus propiedades "src" y
"disabled". Sin embargo, si quisieras asignar un valor dinámico a uno de esos atributos, tomando algo
definido mediante una propiedad del componente, tendrías que acudir al property binding. Se define el
bindeo a propiedad mediante unasintaxis especial de Angular, asunto de este artículo.
DIV con estilos definidos por Angular
En este caso, mediante lapropiedad "objEstilos" se estádefiniendo dinámicamente el style de esta división.
Si cambia el objeto cambiará la aplicación de los estilos al elemento.
Por último, tenemos asignación a propiedades personalizadas de nuestros propios componentes.
Esta posibilidad (la asignación de un literal) tendrá más sentido al usarlo en componentes personalizados.
Esto tiene class o clases dependiendo de la ejecución de un método
En este caso, cada vez que cambie cualquier cosa del estado del componente, se ejecutaráde nuevo obtenClases() pararecibir el nuevo valor de clases CSSque se deben aplicar al elemento. Manual de Angular N ota: El código de tu método obtenClases() deberíaser muy conciso y rápido de ejecutar, puesto que su invocación se realizará muy repetidas veces. En definitiva, debes usarlo con cuidado parano afectar al rendimiento de laaplicación. Evit ar efect os lat erales Del mismo modo que ocurríacon las expresiones en laInterpolación de strings, se debe evitar que al evaluar el valor de una propiedad se cambie el estado del componente. Por ejemplo, si en la expresión a evaluar paradefinir el valor de una propiedad colocas una asignación, verás un error de Angular advirtiendo este asunto.
- item 1
- item 2
{{texto}}
En el primer párrafo estamos colocando como contenido un texto por interpolación. Mientras que en el segundo párrafo se coloca el mismo texto, a través de la propiedad del componente innerHTML. Si estás confuso con ambas posibilidades sería más que normal. Intentaremos arrojar algo de luz sobre cuál de ellas te conviene usar en cada caso. Uso de la int erpolación con cadenas En todos los casos anteriores estamos en definitiva volcando cadenas en diversos puntos del template. Aunque esas cadenas a veces se coloquen en propiedades del componente, no dejan de ser cadenas. En todos los lugares donde se trate de colocar cadenas en una vista, puede que tenga más sentido usar interpolación, debido en mi opinión ala claridad del código de la vista. Pero ojo, porque esto es una opinión personal, que no atiende a ningún motivo relacionado con el propio framework. De hecho, lo cierto es que no existe una diferenciareal entre una u otra posibilidad, por lo que se pueden usar indistintamente. Lo importante sería establecer una norma a seguir por todos los desarrolladores en cuanto a cuál usar en los casos en los que no exista diferencia, de modo que todo el mundo tome las mismas decisiones y obtengamos un código más homogéneo. Uso de propert y binding con valores dist int os de cadenas El caso de valores que no sean cadenas de caracteres es ya distinto. Realmente lainterpolación de strings siempre debe devolver una cadena, por lo que no será adecuada si aquello que se tiene que usar en una propiedad no es directamente una cadena. Por ejemplo, la propiedad "disabled" de un botón debe igualarse por property binding aun valor boleano, luego no será adecuado usar interpolación. Por tanto, lo correcto sería esto: En este caso concreto, no deberíamos usar interpolación, ya que el resultado no será el deseado. Por ejemplo, esto no sería correcto. El motivo es que activo se interpolaría por la palabra"false". En este caso disabled="false" en HTML sería lo mismo que colocar el atributo "disabled" sin acompañarlo de ningún valor, lo que equivale al final a que el botón esté desactivado. En definitiva, cada vez que tengamos que usar un dato que no sea una cadena, es preferible colocar el Manual de Angular binding de propiedad. Por ejemplo, la directiva ngStyle espera un objeto como valor, por lo que estaríamos obligados a usar property binding.Test de estilo
Sanit ización de cadenas en t emplat es de Angular
En el caso que tanto property binding como string interpolation se usen para volcar cadenas en el template,
hay una diferenciadestacable en la manera como las cadenas se van a sanitizar antes de volcarse al template.
En vistade esta propiedad en el componente:
cadenaXSS = 'Esto es un con XSS';
La propiedad cadenaXSSpresentaun problema de seguridad, por una inyección de código de un script, lo
que se conoce por XSS.
Podríamos volcarla en un template de la siguiente manera:
{{ cadenaXSS }}
Angular en ambos casos hace un saneamiento de lacadena, desactivando laetiqueta SCRIPT, paraevitar
problemas de seguridad por inyección de código XSS. Pero el resultado de ese saneamiento es diferente en
cada caso.
En este caso concreto, lasalida que obtendremos es la siguiente:
Esto es un con XSS Esto es un alert("test") con XSS
Tienes que observar que, en el caso de la interpolación de strings, la etiquetascript te aparece como texto en
la página. Es decir, será un simple texto y no una apertura y cierre de una etiqueta para colocar un script
Javascript.
Esperamos que con estas indicaciones hayas resuelto algunas dudas típicas que pueden surgir cuando
empiezas a trabajar en el desarrollo con Angular. Ahora estás en condiciones de escoger la mejor opción en
cada caso, entre string interpolation y Property binding.
Este artículo es obra de Miguel Angel Alvarez
Fue publicado por primeravez en 23/ 11/ 2017
Disponible online en http:/ / desarrolloweb.com/ articulos/ binding-propiedad-vs-interpolacion-strings.html
Manual de Angular
Servicios en Angular
Comenzamos una serie de artículos que nos explicarán qué son los servicios, una de las piezas principales de
las aplicaciones en Angular. Estudiaremos cómo usar servicios dentro de aplicaciones, cómo crearlos, cómo
agregarlos amódulos o componentes, cómo instanciar servicios, etc. Veremos también qué papel juegan los
servicios dentro del marco de una aplicación, con ejemplos de uso que puedan ilustrar las buenas prácticas a
los programadores.
Servicios en Angular
Qué son los servicios en el framework Javascript Angular, cómo crear nuestros primeros services,
cómo usarlos desde los componentes.
Hasta ahora en el Manual de Angular hemos hablado mucho de componentes, y también de módulos. Pero
existen otros tipos de artefactos que podemos usar paraorganizar el código de nuestras aplicaciones de una
manera más lógicay fácil de mantener.
En importancia a componentes y módulos le siguen los servicios. Con este artículo iniciamos su
descripción. Los servicios, o "services" si lo prefieres en inglés, son una de las piezas fundamentales en el
desarrollo de aplicaciones Angular. Veremos qué es un servicio y cómo dar nuestros primeros pasos en su
creación y utilización en un proyecto.
Concept o de servicio en Angular
Si eres yaviejo conocido del desarrollo con Angular sabrás lo que es un servicio, pues es una parte
importante dentro de la arquitectura de las aplicaciones con este framework. Pero si eres nuevo seguro que
te vendrá bien tener unapequeña descripción de lo que es un servicio.
Básicamente hemos dicho anteriormente que el protagonistaen las aplicaciones de Angular es el
componente, que las aplicaciones se desarrollan en base a un árbol de componentes. Sin embargo, a medida
que nuestros objetivos sean más y más complejos, lo normal es que el código de los componentes también
vayaaumentando, implementando mucha lógica del modelo de negocio.
Manual de Angular
En principio esto no sería tan problemático, pero sabemos que la organización del código, manteniendo
piezas pequeñas de responsabilidad reducida, es siempre muy positiva. Además, siempre llegaráel momento
en el que dos o más componentes tengan que acceder a los mismos datos y hacer operaciones similares con
ellos, que podrían obligarnos a repetir código. Para solucionar estas situaciones tenemos alos servicios.
Básicamente un servicio es un proveedor de datos, que mantiene lógica de acceso a ellos y operativa
relacionada con el negocio y las cosas que se hacen con los datos dentro de una aplicación. Los servicios
serán consumidos por los componentes, que delegarán en ellos laresponsabilidad de acceder a la
información y la realización de operaciones con los datos.
Cómo crear un servicio
Tal como viene siendo costumbre en el desarrollo con Angular, nos apoyaremos en Angular CLI para la
creación del esqueleto, o scaffolding, de un servicio.
Para crear un servicio usamos el comando "generate service", indicando a continuación el nombre del
servicio que queremos generar.
ng generate service clientes
Esto nos generaría el servicio llamado "ClientesService". La coletilla "Service", al final del nombre, te la
agrega Angular CLI, así como también nombra al archivo generado con lafinalización "-service", para dejar
bien claro que es un servicio.
Es habitual que quieras colocar el servicio dentro de un módulo en concreto, para lo que puedes indicar el
nombre del módulo, una barra "/ " y el nombre del servicio. Pero atención: ahora lo detallaremos mejor,
pero queremos advertir yaque esto no agregará el servicio al código de un módulo concreto, sino que
colocará el archivo en el directorio de ese módulo. Enseguida veremos qué tienes que hacer paraque este
servicio se asigne realmente al módulo que desees.
ng generate service facturacion/clientes
N ota: como los servicios son algo que se suele usar desde varios componentes, muchos desarrolladores
optan por crearlos dentro de un módulo compartido, que puede llamarse "común", "shared" o algo
parecido.
Ahora, si quieres, puedes echarle un vistazo al código básico de un service, generado por el CLI. Enseguida
lo examinamos. No obstante, antes queremos explicar otro paso importante para que el servicio se pueda
usar dentro de la aplicación.
Agregar la declaración del servicio a un módulo
Para poder usar este servicio es necesario que lo agregues a un módulo. Inmediatamente lo podrás usar en
Manual de Angular
cualquiera de los componentes que pertenecen a este módulo. Este paso es importante que lo hagas, puesto
que, al contrario de lo que ocurría al crear un componente con el CLI, lacreación de un servicio no incluye
la modificación del módulo donde lo has creado.
Así pues, vamos a tener que declarar el servicio manualmente en el módulo. Lo haremos gracias al
decorador del módulo (@NgModule), en el array de "providers". El decorador de un módulo con el array
de providers podría quedar más o menos así.
@NgModule({
imports: [
CommonModule
],
declarations: [ListadoClientesComponent],
providers: [ClientesService]
})
Obviamente, tendrás que hacer el correspondiente import al módulo, para que se conozcala clase
ClientesService.
import { ClientesService } from './clientes.service';
Como decimos, ahoraeste módulo hadeclarado el servicio como "provider", por lo que sus componentes
podrán usar este servicio.
N ota: El provider que acabamos de declarar en el módulo es un array que también podremos declarar
en un componente, con lo que podríamos asignar un servicio a un componente en concreto y no aun
módulo completo. Más adelante explicaremos dónde puedes declarar el provider, dependiendo de cómo
quieres que tu servicio se gestione a nivel de aplicación.
Código básico de un service en Angular
Ahorapodemos examinar el código generado para nuestro servicio y aprender nuevas cosas de Angular.
Este sería nuestro recién creado servicio "ClientesService".
import { Injectable } from '@angular/core';
@Injectable()
export class ClientesService {
constructor() { }
}
Como verás, el servicio no tiene nadatodavía, solo su declaración, pero hay cosas interesantes que tenemos
Manual de Angular
que explicar, principalmente un nuevo decorador que no habíamos conocido hasta el momento:
"@injectable".
El decorador @injectable indica a Angular que la clase que se decora, en este caso laclase ClientesService,
puede necesitar dependencias que puedan ser entregadas por inyección de depdendencias. De momento
puedes quedarte que los servicios necesitan de este decorador, aunque realmente disponer de él no es
condición indispensable.
N ota: La inyección de dependencias es un patrón de desarrollo bastante habitual en el mundo de los
frameworks. Ya es familiar para los antiguos desarrolladores de Angular, pues estabaya implementada
en las versiones de AngularJS(1.x). Sin embargo, no es algo propio o específico de Angular, sino de la
programación en general. Tenemos un artículo que explica de manerateórica más cosas importantes
sobre este patrón de diseño de sofware: Inyección de dependencias.
El import, arriba del todo, { Injectable } from '@angular/ core', lo que hace es que nuestra clase conozcay
seacapaz de usar el decorador @injectable.
Por lo demás, el servicio está vacío, pero le podemos poner ya algo de código paraque nos sirvade algo. De
momento vamos a exponer mediante el servicio una simple propiedad con un dato, que luego vamos a
poder consumir desde algún componente. Para ello usamos las propiedades de la clase, tal como nos
permite TypeScript.
export class ClientesService {
accesoFacturacion = 'https://login.example.com';
constructor() { }
}
En nuestra clase ClientesService hemos creado una propiedad llamada"accesoFacturacion", en la que
hemos asignado un valor que sería común para todos los clientes. El dato es lo de menos, lo interesante es
ver que la declaración no dista de otras declaraciones en clases que hayamos visto ya.
Cómo inyect ar dependencias de servicios
Ahoranos toca ver la magia de Angular y su inyección de dependencias, que vamos ausar para poder
disponer del servicio en un componente.
Como en otros frameworks, en Angular la inyección de dependencias se realiza por medio del constructor.
En el constructor de un componente, que hastaahora habíamos dejado siempre vacío, podemos declarar
cualquierade los servicios que vamos ausar y el framework se encargará de proporcionarlo, sin que
tengamos que realizar nosotros ningún trabajo adicional.
Esto es tan sencillo como declarar como parámetro ladependencia en el constructor del componente.
constructor(private clientesService: ClientesService) { }
Manual de Angular
De esta manera estamos indicando a TypeScript y Angular que vamos a usar un objeto "clientesService" que
es de la clase "ClientesService". A partir de entonces, dentro del componente existirá ese objeto,
proporcionando todos los datos y funcionalidad definida en el servicio.
N ota: Es muy importante que al declarar la inyección de dependencias en el constructor no te olvides
de ladeclaración de visibilidad (yasea public o private), pues si no la colocas no se generará la propiedad
en el objeto construido. Si defines la propiedad de laclase como pública, afectaráa su visibilidad:
constructor(public clientesService: ClientesService) esto es algo que te proporcionaTypeScript. Público
o privado el efecto será el mismo, se creará la propiedad "clientesService", inyectando como valor un
objeto de laclase ClientesService.
Explicando con det alle la declaración de propiedades implícit a en el const ruct or
Aquí tenemos que detenernos para explicar algo de la magia, o azúcar sintáctico, que te ofrece TypeScript.
Porque el hecho que se declare una propiedad en un objeto solo porque se reciba un parámetro en el
constructor no es algo usual en Javascript.
Cuando TypeScript detecta el modificador de visibilidad "public" o "private" en el parámetro enviado al
constructor, inmediatamente declara una propiedad en la clase y le asignael valor recibido en el constructor.
Por tanto, esta declaración:
export class ListadoClientesComponent {
constructor(public clientesService: ClientesService) { }
}
Sería equivalente aescribir todo el código siguiente:
export class ListadoClientesComponent {
clientesService: ClientesService;
constructor(clientesService: ClientesService) {
this.clientesService = clientesService;
}
}
En resumen, TypeScript entiende que, si defines lavisibilidad de un parámetro en el constructor, o que
quieres hacer en realidad es crear una propiedad en el objeto recién construido, con el valor recibido por
parámetro.
Usando el servicio en el component e
Ahora, para acabar esta introducción a los servicios en Angular, tenemos que ver cómo usaríamos este
servicio en el componente. No nos vamos a detener demasido en hacer ejemplos elaborados, que podemos
abordar más adelante, solo veremos un par de muestras sobre cómo usar la propiedad declarada en el
servicio.
Manual de Angular
1. - Usando el servicio dent ro de la clase del component e
Dentro de la clase de nuestro componente, tendremos el servicio a partir de lapropiedad usadaen su
declaración. En el constructor dijimos que el servicio se llamaba "clientesService", con la primera en
minúsculapor ser un objeto.
Pues como cualquier otra propiedad, accederemos a ellamediante la variable "this".
export class ListadoClientesComponent implements OnInit {
constructor(public clientesService: ClientesService) { }
ngOnInit() {
console.log(this.clientesService);
}
}
El ejemplo no vale para mucho, solo para mostrar que, desde que esté creado el objeto podemos acceder al
servicio con "this.clientesService".
También nos sirve para recordar que, el primer sitio donde podríamos usar los servicios declarados es en el
método ngOnInit(). Dicho de otro modo, si necesitamos de estos servicios para inicializar propiedadades en
el componente, el lugar donde ponerlos en marcha sería el ngOnInit().
2. - Usando el servicio en el t emplat e de un component e
Por su parte, en el template de un componente, podrás también acceder al servicio, para mostrar sus
propiedades o incluso invocar sus métodos como respuesta aun evento, por ejemplo.
Como el servicio estáen unapropiedad del componente, podremos acceder a él meditante ese nombre de
propiedad.
URL De acceso: {{clientesService.accesoFacturacion}}
Conclusión a la int roducción a los servicios en Angular Eso es todo lo que tienes que saber paracomenzar aexperimentar con los servicios en Angular. Es momento que pongas las manos en el código y comiences a experimentar por tu cuenta, creando tus propios servicios y usándolos desde tus componentes. En artículos posteriores veremos servicios un poco más completos, que hagan más cosas que el que hemos visto en lapresente entrega. Manual de Angular Este artículo es obra de Miguel Angel Alvarez Fue publicado por primeravez en 04/ 12/ 2017 Disponible online en 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 I nterfaces para definir las estructuras de datos. Veremos cómo y por qué. Si algo caracterizaa TypeScript, el lenguaje con el que se desarrolla en Angular, es el uso de tipos. Podemos usar tipos primitivos en variables, lo que nos ayudará a recibir ayudas en el momento en el que desarrollamos el código, pero también podemos definir tipos más complejos por medio de clases e interfaces. A lo largo del Manual de Angular hemos declarado variables indicando sus tipos en muchas ocasiones, pero hasta ahora no hemos usado casi nunca las clases para tipar y mucho menos las interfaces. En los servicios es un buen lugar paraempezar aacostumbrarnos a ello, lo que nos reportará muchos beneficios ala hora de programar. Este artículo no avanzará tanto en lo que es ofrecer nuevos conocimientos de Angular, sino más bien en el uso de costumbres que nos ayudarán en el día a día y que por tanto son muy comunes a lahorade desarrollar aplicaciones profesionales. Para entenderlo es bueno que conozcas los fundamentos de TypeScript y también específicamente de las interfaces TypeScript. Obviamente, necesitarás también saber lo que es un servicio y cómo crearlos y usarlos en Angular. Ayudas en t iempo de desarrollo, no en t iempo de ej ecución Aunque puede resultar de cajón para muchas personas, queremos comenzar por señalar que las ayudas que te ofrece TypeScript serán siempre en tiempo de desarrollo. Parapoder aprovecharte de ellas lo ideal es disponer de un editor que entienda TypeScript, mostrando en el momento que desarrollas los problemas detectados en el código. A lahora de compilar la aplicación, para su ejecución en el navegador, también te ayudará TypeScript, especificando los errores que ha encontrado en el código, derivados por un uso incorrecto de las variables y sus tipos. Manual de Angular Sin embargo, una vez que el navegador ejecuta el código debes entender que todo lo que interpreta es Javascript, por lo que los tipos no interferirán en nada. No serámás pesado para el navegador, ni te alertará de problemas que se puedan producir, ya que éste solo ejecutarácódigo Javascript. Sin embargo, lo cierto es que si tipaste correctamente todo lo que estuvo en tu mano y el compilador no te alertó de ningún error, difícilmente se producirá un error por un tipo mal usado en tiempo de ejecución. Si ya tienes cierta experiencia con TypeScript habrás observado la cantidad de errores que se detectan prematuramente en el código y lo mucho que el compilador te ayuda amedida que estás escribiendo. Esto facilita ahorrar mucho tiempo y disfrutar de unaexperiencia de programación más agradable. Por todo ello, usar los tipos siempre que puedas es una idea estupenday en este artículo queremos explicarte cómo ir un poco más allá, en el marco de los servicios de Angular. Crear una clase para definir el t ipo de t us obj et os La manera más común de definir tipos, paralas personas acostumbradas a lenguajes de programación orientados a objetos, son las clases. Si tienes en tu aplicación que trabajar con cualquier tipo de entidad, es una buenaidea que crees unaclase que especifique qué datos contiene esa estructura. Si nuestra aplicación usa clientes, lo más normal es que definas la clase cliente, más o menos como esto: class Cliente { nombre: String; cif: String; direccion: String; creado: Date; } Luego, cuando quieras crear un cliente podrás declararlo usando el tipo de laclase Cliente. let cliente: Cliente; A partir de ahora, en el caso que uses un código que no respete esadeclaración se alertará convenientemente. Manual de Angular Crear una int erfaz para definir el t ipo de t us obj et os Más o menos lo mismo podemos conseguir con una interfaz de TypeScript. Es algo que ya hemos explicado en el artículo de Interfaces TypeScript. Pero en resumen, puedes definir unainterfaz de clientes de esta manera. interface Cliente { nombre: String; cif: String; direccion: String; creado: Date; } Luego podemos crear una variable asignando la interface como si fueraun tipo. let cliente: Cliente; A partir de aquí el editor nos avisará cuando el valor asignado no cumpla la interfaz. Manual de Angular ¿Clases o int erfaces? Si ambas construcciones te sirven para más o menos lo mismo ¿cuándo usar clases y cuándo usar interfaces? la respuesta depende un poco sobre cómo vayas a generar los datos. Es muy habitual usar simplemente interfaces, desprovistas de inicialización y funcionalidad, ya que esas partes es común que sean delegadas en los servicios. Pero en el caso de usar clases, tus nuevos objetos serán creados con 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 los objetos que debes crear presentan tareas de inicialización pesadas, usando clases, podrás apoyarte en los constructores pararesumir los pasos para su creación. En este caso podemos conseguir un código más compacto: let cliente1 = new Cliente('EscuelaIT S.L.', 'B123', 'C/ Del Desarrollo Web .com'); N ota: obviamente, para que esto funcione tienes que haber creado el correspondiente constructor en la implementación de la clase Cliente. Observa que en caso de tener un constructor podríamos ahorrarnos pasarle el objeto de laclase Date, para asignar en la propiedad "creado", puesto que podríamos delegar en el constructor la tarea de instanciar un objeto Date con la fecha con el instante actual. Sin embargo, los objetos que contienen datos para representar en tu aplicación no siempre se generan mediante tu propio código frontend, ya que es habitual que esos datos provengan de algún web service (API REST o similar) que te los proporcione por medio de llamadas "HTTP" (Ajax). En estos casos no harás "new", sino que usarás Angular para solicitar al servidor un dato, que será devuelto en forma de un objeto JSON habitualmente. En estos casos es especialmente idóneo definir una interfaz y declarar la el objeto que te devuelva el servidor con el tipo definido por esainterfaz. Más adelante veremos ejemplos de este caso en concreto. Uses o no servicios web paratraerte los datos, con interfaces también puedes crear objetos que correspondan con el tipo de datos definido en la interfaz. Simplemente los crearías en tus servicios por medio de literales de objeto. let cliente: Cliente; cliente = { nombre: 'EscuelaIT', cif: 'ESB123', direccion: 'C/ de arriba, 1', creado: new Date(Date.now()) }; Manual de Angular Como puedes ver, la decisión sobre usar clases o interfaces puede depender de las necesidades de tu aplicación, o incluso de tus preferencias o costumbres de codificación. Incluso, nadate impide tener ambas cosas, una interfaz y una clase implementando esa interfaz, para disponer también de la posibilidad de instanciar objetos ayudados por 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 dat os en un archivo ext erno Para ordenar el código de nuestraaplicación es también habitual que el modelo de datos se defina en un archivo TypeScript aparte. En ese archivo puedes guardar la declaración del tipo y luego importarlo en cualquier lugar donde quieras usar ese tipo de datos. Archivo "client es. modelo. t s" Por ejemplo, tendríamos el archivo "clientes.modelo.ts" y ese archivo tendría, por ejemplo ladeclaración de la interfaz: export interface Cliente { nombre: String; cif: String; direccion: String; creado: Date; } N ota: no te olvides de colocar la palabra "export" delante del nombre de lainterfaz, paraque esa declaración se pueda importar desde otros archivos. Archivo "client es. service.t s" Manual de Angular Por su parte, en el servicio tendríamos que hacer el import de este tipo, definido en clientes.modelo.ts, y usarlo al declarar objetos. import { Cliente } from './cliente.modelo'; Por supuesto, una vez definido este tipo de datos, gracias a la correspondiente interfaz importada, lo debes de usar en tu servicio, en el mayor número de lugares donde puedas, lo que te proporcionaráun código más robusto, capaz de advertirte de cualquier tipo de problemas en tiempo de desarrollo y ahorrarte muchas complicaciones. Este sería el código de nuestro servicio, donde hacemos uso del tipo Cliente importado. 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 debes fijarte en varias cosas sobre TypeScript: La declaración del array "clientes" indica que sus elementos son de tipo Cliente. En el parámetro del método "anadirCliente" hemos declarado el tipo de datos que recibimos, de tipo Cliente. El valor de retorno del método clienteNuevo() se ha declarado que será de tipo Cliente. Obviamente, si durante la escriturade tu código, no solo en este servicio sino también en cualquier otro lugar donde se use, no envías objetos de los tipos esperados, TypeScript se quejará y te lo hará saber. Fíjate en la siguiente imagen. Es el código de un componente llamado "AltaClienteComponent". Hemos cometido laimprudencia de declarar un cliente como de tipo String (flecha roja). Por ello, todos los métodos en los que trabajamos con ese cliente, apoyándonos en el servicio ClientesService, están marcados Manual de Angular como si fueran un error (flechas amarillas). N ota: La anterior imagen pertenece al editor Visual Studio Code, que ya incorporade casa todo lo necesario para ayudarte al programar con TypeScript, mostrando los correspondientes errores encontrados en tiempo de desarrollo. Conclusión Con esto hemos llegado a un ejemplo de un servicio un poco más complejo del que vimos en el artículo anterior, que también se comportará de un modo más robusto, alertando de posibles problemas ala hora de escribir el código, y cuando el compilador de TypeScript analice el código para convertirlo a Javascript. También nos ha dado pie ausar algunas de las cosas que nos aporta TypeScript, para seguir aprendiendo este superset de Javascript. Espero que a partir de ahora puedas esforzarte por sacar mayor partido a este lenguaje. Este artículo es obra de Miguel Angel Alvarez Manual de Angular Fue publicado por primeravez en 14/ 12/ 2017 Disponible online en http:/ / desarrolloweb.com/ articulos/ clases-interfaces-servicios-angular.html Práct ica Angular con Módulos, Component es 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. Somos conscientes de que lo que hemos visto hasta este punto del Manual de Angular 2 puede resultar complicado de asimilar si no realizamos un ejemplo completo, que nos ayude a ver de manera global el flujo de desarrollo con este framework. Por ello, vamos a pararnos aquí parapracticar un poco. Veremos cómo trabajar en el desarrollo de una aplicación Angular en la que participan todos los integrantes que hemos explicado hastaahora, es decir: módulos, componentes y servicios. En el presente ejercicio vamos a construir un sistemade alta de clientes y un listado de clientes que irá incrementando ítems, a medidaque los demos de alta. Será interesante para los lectores, pero no dejade ser un sencillo demo de cómo trabajar en Angular en estos primeros pasos, pues hay mucho más en el framework que no hemos tenido tiempo de aprender todavía. Así que vamos a poner manos ala obra. Procuraré ser muy específico, yendo paso apaso. Confío no olvidarme de mencionar ninguna parte del proceso. Ten en cuenta además que solamente resumiré algunos detalles del código, pues en artículos pasados del presente manual ha quedado ya explicado todo lo que vamos aver. Iremos presentando listados de cadauna de las partes del código que se irán realizando y al final de este artítulo encontrarás también el enlace al repositorio con el código completo. Creamos nuest ra aplicación El primer paso es, usando el CLI, crear nuestra aplicación nueva. Lo haces entrando en la carpeta de tus proyectos y ejecutando el comando. ng new clientes-app Luego puedes entrar en lacarpeta de laaplicación y lanzar el servidor web de desarrollo, para ver lo que se ha construido hasta el momento. Manual de Angular cd clientes app ng serve -o Creamos nuest ro módulo de client es La aplicación recién generadaya contiene un módulo principal, sin embargo, yo prefiero dejar ese módulo con pocas o ningunacosa más de las que nos entregan por defecto al generar la aplicación básica. Por ello crearemos como primer paso un módulo nuevo, llamado "ClientesModule". Encargamos a Angular CLI la creación del esqueleto de nuestro módulo con el siguiente comando: ng generate module clientes Definir el modelo de dat os Vamos a comenzar nuestro código por definir los tipos de datos que vamos a usar en esta aplicación. Vamos a trabajar con clientes y grupos. Crearemos el modelo de datos dentro de la carpetadel módulo "clientes". No existe en Angular un generador de este tipo de modelos, por lo que crearé el archivo amano con el editor. Lo voy a nombrar "cliente.model.ts". En este archivo coloco las interfaces de TypeScript que definen los datos de mi aplicación. export interface Cliente { id: number; nombre: string; cif: string; direccion: string; grupo: number; } export interface Grupo { id: number; nombre: string; } Como ves, he creado el tipo de datos Cliente y, por complicarlo un poquito más, el tipo de datos Grupo. Así, cada cliente generado pertenecerá a un grupo. N ota: Estaparte de la creación de interfaces es perfectamente opcional. Solo la hacemos para usar esos tipos en ladeclaración de variables. El compilador de TypeScript nos avisarási en algún momento no respetamos estos tipos de datos, ayudando en tiempo de desarrollo y ahorrando algún que otro error derivado por despistes. Manual de Angular Crear un ser vicio para los client es Lo ideal es crear un servicio (service de Angular) donde concentremos las tareas de trabajo con los datos de los clientes, descargando de código alos componentes de la aplicación y centralizando en un solo archivo la lógica de laaplicación. El servicio lo vamos acrear dentro de la carpeta del módulo clientes, por lo que especificamos la ruta completa. ng generate service clientes/clientes En el servicio tengo que hacer el import del modelo de datos, interfaces de Cliente y Grupo (creadas en el paso anterior). import { Cliente, Grupo } from './cliente.model'; Nuestro servicio no tiene nada del otro mundo. Vamos a ver su código y luego explicaremos algún que otro 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. Las dos propiedades del servicio contienen los datos que va a mantener. Sin embargo, las hemos definido como privadas, de modo que no se puedan tocar directamente y tengamos que usar los métodos del servicio creados parasu acceso. 2. Los grupos los construyes con un literal en el constructor. Generalmente los traerías de algún servicio REST o algo parecido, pero de momento está bien para empezar. 3. Agregar un cliente es un simple "push" al array de clientes, de un cliente recibido por parámetro. 4. Crear un nuevo cliente es simplemente devolver un nuevo objeto, que tiene que respetar lainterfaz, yaque en lafunción nuevoCliente() se está especificando que el valor de devolución será un objeto del tipo Cliente. 5. Fíjate que en general está todo tipado, tarea opcional pero siempre útil. Declarar el servicio para poder usarlo en los component es Una tarea fundamental parapoder usar los servicios es declararlos en el "module" donde se vayan ausar. Para añadir el servicio en el module "clientes.module.ts", el primer paso es importarlo. import { ClientesService } from './clientes.service'; Luego hay que declararlo en el array "providers". providers: [ ClientesService ] Manual de Angular Crear component e que da de alt a client es Vamos a continuar nuestra práctica creando un primer componente. Es el que se encargará de dar de alta los clientes. Generamos el esqueleto usando el Angular CLI. ng generate component clientes/altaCliente Comenzaremos editando el archivo del componente y luego iremos a trabajar con el template. Por tanto, vamos aabrir el fichero "alta-cliente.component.ts". Agregar el servicio al component e Muy importante. Para poder usar el servicio anterior, tengo que agregarlo al componente recién creado, realizando el correspondiente import. import { ClientesService } from './../clientes.service'; Y posteriormente yapodré inyectar el servicio en el constructor del componente. constructor(private clientesService: ClientesService) { } Agregar el modelo de dat os Para poder seguir usando los tipos de datos de mi modelo, vamos a agregar el archivo donde se generaron las interfaces. import { Cliente, Grupo } from './../cliente.model'; Código TypeScript complet o del component e El código completo de "alta-cliente.component.ts", para la definición de mi componente, quedaríamás o menos así 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(); } } Es importante mencionar estos puntos. 1. El componente declara un par de propiedades, el cliente y el array de grupos. 2. En el constructor, que se ejecutalo primero, conseguimos una instanciadel servicio de clientes, mediante la inyección de dependencias. 3. Posteriormente se ejecuta ngOnInit(). En este punto yase ha recibido el servicio de clientes, por lo que lo puedo usar para generar los valores que necesito en las propiedades del componente. 4. El método nuevoCliente() es el que se ejecutará cuando, desde el formulario de alta, se produzcael envío de datos. En este código usamos el servicio clientesService, para agregar el cliente y generar un cliente nuevo, para que el usuario pueda seguir dando de alta clientes sin machacar los clientes anteriormente creados. Templat e del component e, con el formulario de alt a de client e Vamos a ver ahoracuál es el HTML del componente de alta de clientes, que básicamente contiene un formulario. Pero antes de ponernos con el HTML, vamos ahacer unaimportante tarea. Consiste en declarar en el módulo de clientes que se vaa usar la directiva"ngModel". Para ello tenemos que hacer dos pasos: En el archivo "clientes.module.ts" comenzamos por importar "FormsModule". import { FormsModule } from '@angular/forms'; En el decorador, indicamos el imports del FormsModule. imports: [ CommonModule, FormsModule Manual de Angular ], Ahoraveamos el código del template, en el que reconocerás el uso de la propiedad "cliente" declarada en el constructor, así como el array de grupos.Alta cliente
Nombre:
CIF:
Dirección:
Grupo:
Usar el component e Alt a client e Este componente, de alta de clientes, lo quiero usar desde el componente raíz de mi aplicación. Como el componente raíz estádeclarado en otro módulo, necesito hacer que conozca al AltaClienteComponent. Esto lo consigo en dos pasos: 1. - Agregar al export s Alt aClient eComponent En el módulo de clientes "clientes.module.ts" agrego al exports el componente que quiero usar desde otros módulos. exports: [ AltaClienteComponent ] 2. - Import ar en el módulo raíz Ahora, en el módulo raíz, "app.module.ts", debes declarar que vas a usar componentes que vienen de clientes.module.ts. Para ello tienes que hacer el correspondiente import: Manual de Angular import { ClientesModule } from './clientes/clientes.module'; Y luego declaras el módulo en el array de imports: imports: [ BrowserModule, ClientesModule ], Hechos los dos pasos anteriores, yapuedes usar el componente en el template. Para ello simplemente tenemos que escribir su tag, en el archivo "app.component.html".
Listado clientes
No hay clientes por el momento
Manual de Angular
{{cliente.nombre}}
{{cliente.cif}}
{{cliente.direccion}}
{{cliente.grupo}}
No lo hemos comentado anteriormente, pero puedes darle un poco de estilo a los componentes editando el
archivo de CSS. Por ejemplo, este sería un poco de CSSque podrías colocar en el fichero "listadoclientes.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 component e del list ado
Para usar este componente de listado de clientes, ya que lo queremos invocar desde el módulo raíz, tienes
que ampliar el exports del module "clientes.module.ts".
exports: [
AltaClienteComponent,
ListadoClientesComponent
]
Como para el anterior componente, de alta de clientes, ya habíamos importado el módulo de clientes, no
necesitas hacer nada más. Ahora yapuedes usar el usar el componente directamente en el template del
componente raíz "app.component.html".
Source Exif Data:
File Type : PDF File Type Extension : pdf MIME Type : application/pdf PDF Version : 1.7 Linearized : No Warning : Info object (408 0 obj) not found at 2156028EXIF Metadata provided by EXIF.tools