Extendiendo la applicacion de Angular con UI5 Web components

En el blog de ayer UI5 Web Components by SG mostré una aplicación de Angular components, hize navegación entre los components y enseñé un button y una tabla de UI5 que populé mediante un modelo local. En una situación real, habrá mas de dos components (or views); habrá también que consumir datos de servicios externos (como OData). En este blog, quisiera mostrar una extension del mismo poyecto con algunos trucos y tips en Angular. El mismo blog se puede leer en inglés aqui

• Simplificar el import en el app.module.ts y en el router
• Crear servicios que se puedan re-usar
• Llamar un REST API externo
• el como usar ng CLI

Iniciemos creando un component nuevo (via CLI ng g c v3)  g=generate  c= component

Luego, voy a crear un folder para los servicios y mediante el CLI create un servicio (ng g s myservice) g=generate s=service

*Vamos a usar el servicio dentro del component v3 mas abajo.

Cuando desarrollé el component y el servicio, mi app.module se actualize con las referencias necesarias para mi modulo nuevo y como ven, ahora tengo el V1Component, V2Component, V3Component, NotFoundComponent todos vienen desde el mismo folder. Entre mas creo components, mas lineas de código abrá en el app.module. A mi me gusta tener mis archivos pequeños, asi que dejeme darles un tip par ahorrarnos unas lineas aqui.

El app.module se ve asi …

Vamos a crear un archivo index.js dentro del folder components y vamos a exportar los módulos (siempre y cundo quieras servirlos todos desde el mismo folder) en el app.module.ts los vamos a importar todos juntos

Voilá! en la linea 10, puedes ver como se sirven los components desde un mismo folder.

Igualmente, podemos simplificar el router

A una linea referenciando todos los components también

Lo siguiente es crear un servicio. Los servicios en Angular (y en otros frameworks) te permiten modularizar tu Código y hacer funciones que se pueden reusar para evitar repetir el mismo código en varios módulos, for ejemplo: navegar de un component hacia el v1 (home) component, o en una situación mas real como llamar un servicio web externo.

El siguiente paso es abrir el component v3 e incluir la referencia al servicio que creamos anteriormente. Copia el nombre del servicio y cuando empiezes a escribir el path del servicio VS Code tiene intellisense (gracias #VSCode). Esta función se llama dependency injection (DI) cuando importamos dependencias que se ocupan en el component.

Ahora deja testear rápidamente en el browser. Abri el app, y navegé al v3.

Router funciona! El botón nuevo se despliega! Y el UI5 Text Area también sale con el placeholder que le di por default.

Intenté crear un modelo local json para ver como se ve el TextArea, pero, recibí un error porque estoy tratando de servir mi app desde el localhost y el browser piensa que mi archivo json no existe debido a que el url no esta correcto; me muestra – not found –

Antes de tartar de arreglar el archivo json local, dejame intentar ver si puedo consumir un servicio real externo (y gratis) OData para mi prueba. En este ODdata, puedes encontrar diferentes URLs que te ayudarán a testear/simular llamadas a servicios REST API. https://www.odata.org/odata-services/ Estoy usando el People EntitySet.

Una vez que le doy click al butto, llamé una función en mi component, luego de ahi se llamó al servicio y del servicio se llamó al OData. Todo el código fuente esta en mi git repo 

Espero que hayas visto los tipos de cómo minimizar tu código al exponer los components desde un mismo folder. También, espero que hayan entendido el uso y el gran valor de los servicios y como llamar los servicios desde un component y finalmente como llamar servicios web desde una aplicación angular. Hay muchisimas mas cosas que se pueden hacer en los servicios (POST requests, async requests, mucho más). No les voy a arruinar su aprendizaje, inténtenlo y compartan su feedback. Gracias por leer este blog.