Desarrollar un Backend de servicios REST para una aplicación Angular 1.x

Artículo

Joel Espinoza · 8 jul, 2019 Lectura de 4 min

#Angular #CSP #HTML #JavaScript #API REST #Frontend #Caché

Comenzamos con la primera parte de esta serie de artículos que describe cómo desarrollar un Backend de servicios REST con Caché.

Parte 1 - Configuración

Para empezar desde cero, crearemos un Namespace para nuestra nueva aplicación: WIDGETDIRECT, y la configuraremos con bases de datos que incluyan Códigos, Datos y las funciones de Seguridad que sean apropiadas.

Nuestro siguiente paso es configurar 2 aplicaciones para que presenten el contenido en la web, una para el contenido de la web en Angular y otra que proporcione el contenido de la Transferencia de Estado Representacional (REST).

Nuestra aplicación de contenido web es una aplicación CSP estándar, con una ubicación en el almacenamiento local en el contenido de la web que es estático

Sin embargo, nuestra aplicación REST se configuró de una manera un poco diferente, y se especifica una clase en Dispatch en lugar de una Ruta física para los archivos CSP (CSP Files Physical Path). Esta aplicación se controla totalmente por las Clases

Nuestro último paso en la configuración es crear nuestra clase REST.Dispatch, para que nuestra aplicación pueda presentar algunos contenidos. Establezca una clase en Caché y haga que se extienda desde %CSP.REST.

Una clase REST vacía no hará nada útil, así que necesitamos añadir una ruta, la cual permita crear un mapa para la expresión URL (y un método HTTP, pero volveremos a esto más tarde) hacia un Método de clase. Cualquier expresión que comience con : indica un parámetro para el método de clase (classmethod), de acuerdo a su posición.

Esto ahora tomará cualquier solicitud que se haga hacia widgetsdirect/rest/<name> y devolverá un mensaje personalizado "Hello World" según el valor del nombre (Name) que se aprobó. Comprobaremos esto si ingresamos a la URL con la ayuda de un navegador (el cual utilizará un método HTTP Get para recuperar el contenido)

¡Felicidades, acaba de crear su primer Caché para los servicios REST!

Parte 2 - Creación del Front-end de nuestra web

Por lo general, no queremos que nuestros clientes interactúen directamente con un servicio REST, así que ahora necesitamos añadir una página a nuestra aplicación web. Es decir, desarrollar una página CSP estándar. Le daremos el título en Widgets Direct, y añadiremos algunos scripts como referencia. El primero es la rutina en Angular, la cual nos permite utilizar la estructura de Angular, y el segundo es nuestro propio Módulo y el código del Controlador. Por último, mostraremos el valor del "mensaje" en el campo de Angular, por lo que colocaremos el {{message}} en el cuerpo de la página y después lo guardaremos como "Welcome.csp".

Cuando lo visualizamos en HTML, obtenemos...

Esto claramente no es lo que queremos, así que necesitamos mejorar la configuración. Primero, necesitamos nuestro Módulo y el código del Controlador, entonces debemos crear el javascript que mencionamos en nuestra página de Bienvenida. Definiremos nuestro Módulo en Angular como "WidgetsDirect" y adjuntaremos nuestro primer Controlador "PageController" en el módulo. También aprobaremos algunas funciones útiles de Angular en el controlador, como los métodos $scope y $http, que nos permitirán enviar y recibir el contenido HTTP. Cuando se hace referencia a nuestro controlador, éste establecerá el valor del $scope.message (el que mostramos en la página) en la cadena "Hello Scope!"

Ahora necesitamos indicarle a nuestra página Welcome.csp que utilice tanto el Módulo como el Controlador, para permitir que en la página se visualice el $scope correcto. En este ejemplo, especificamos el ng-app en la parte superior del html, y también definimos el controlador en la categoría del cuerpo (body). Todo lo que se encuentre dentro de las etiquetas <body> ahora podrá hacer referencia a los datos y al código de nuestro Controlador.

Si ahora cargamos nuevamente nuestra página Welcome.csp en un navegador, deberíamos ver

¡Esto es genial! Ahora nuestra página interactúa con nuestro campo de Angular. Sin embargo, aún no interactuamos con el Caché. Completemos la cadena, y hagamos que el controlador busque a nuestro servicio REST, y asigne los datos que devuelva a la variable del mensaje (message). Para hacer esto, utilizaremos el servicio $http, el cual nos proporciona una forma sencilla para enviar y usar los resultados del método HTTP Get. Aprobaremos nuestro propio nombre para el parámetro en la solicitud URL. Después de devolver la solicitud tendremos 2 funciones, la primera se ocupa de los códigos de devolución que se realizaron con Éxito (Success), donde esperamos datos válidos, y la segunda se ocupa de cualquier condición en la que haya un error.

Examinaremos más detalladamente la respuesta de los objetos en los próximos artículos, pero por ahora solo copiaremos el valor de los elementos de datos en el almacenamiento para los mensajes. Si forzamos la actualización de nuestro navegador para obtener la última versión de Javascript, ahora deberíamos ver:

¡ÉXITO! Ahora implementó una página que incorpora un conjunto de subsistemas completo de Angular en el Caché. ¡En medio de una avalancha de emociones, envía el enlace a su jefe para que revise esta maravillosa página! (siguiente lección)

Ir a la publicación original, escrita por @Chris Stewart

Desarrollar un Backend de servicios REST para una aplicación Angular 1.x con Caché - Parte 1 de varias