Estándares de Construcción Aplicaciones Angular v1.0

FORMATO
Versión: 01
Estándares de Construcción Aplicaciones Fecha:
Rev.:
Angular v1.0 Aprob.:
Estándares de Construcción Aplicaciones

Angular v1.0
Fecha: 24/11/2020
Versión: [1.0]
Antamina Página 1
FORMATO
Versión: 01
Rev.:
HOJA DE CONTROL
Cliente STC Soporte DEV

Proyecto Proyecto de Estándares Angular 9.0
Entregable Estándares de Construcción Aplicaciones Angular v1.0
Autor Jhonatan Valdivia Ramos
Versión/Edición 0100 Fecha Versión 01/12/2020
Revisado por José A. Sánchez Fecha Revisión 02/12/2020
Aprobado por Avelardo Catacora Fecha Aprobación XX/XX/XXXX
REGISTRO DE CAMBIOS
Versión Causa del Cambio Responsable del Cambio Fecha del Cambio
Antamina Página 2
FORMATO
Versión: 01
Rev.:
1 INTRODUCCIÓN .............................................................................................................. 4
1.1 Alcance ........................................................................................................................ 4
1.2 Objetivo ....................................................................................................................... 4
2 Definición de elementos de programación Front-End........................................................ 5
2.1 Configuración .............................................................................................................. 6
2.2 Módulo ......................................................................................................................... 8
2.3 Componentes Web ....................................................................................................... 9
2.4 Routes ........................................................................................................................ 11
2.5 Core Guard ................................................................................................................. 13
2.6 Interceptores ............................................................................................................... 15
2.7 Services ...................................................................................................................... 17
3 Estándares de desarrollo de Front-End ............................................................................. 20
3.1 Anatomía de un módulo ............................................................................................. 20
3.2 Anatomía de un componente ..................................................................................... 21
3.3 Componentes públicos o privados ............................................................................. 24
4 Proyecto Demo ................................................................................................................. 25
4.1 Inicialización .............................................................................................................. 25
5 ANEXOS .......................................................................................................................... 30
5.1 Glosario de Acrónimos y Abreviaturas ...................................................................... 30
Antamina Página 3
FORMATO
Versión: 01
Rev.:
1 INTRODUCCIÓN
El presente documento se basa en la necesidad que existe por parte de los equipos de trabajo
de no contar con un lineamiento que permita construir aplicaciones Front-End basado en el
lenguaje TypeScript.
1.1 Alcance
Proporcionar un documento que permita iniciar con una línea base para la construcción de las
aplicaciones Front-End.
1.2 Objetivo
Proporcionar al equipo de desarrollo una convención de nomenclaturas para los diferentes
elementos que encontramos en la etapa de desarrollo, a continuación se presenta las reglas y
recomendaciones a considerar.
Antamina Página 4
FORMATO
Versión: 01
Rev.:
2 Definición de elementos de programación Front-End

A continuación el listado de los principales elementos de programación Front-End a tener en
consideración:
 Configuración
 Módulos
 Componentes Web
 Core Guard
 Routes
 Interceptores
 Services
Antamina Página 5
FORMATO
Versión: 01
Rev.:
2.1 Configuración
 package.json: contiene todas las librerías instaladas en el proyecto. También tiene un atributo
llamado script, el cual sirve para tener atajos de comandos personalizados.
Si nos fijamos en la instalación inicial, tenía estos scripts:
Luego de personalizar nuestro archivo se puede observar (la personalización del comando se
ajusta según la necesidad que tenga el proyecto)
En la sección de dependencies podemos observar algunas de las librerías instaladas:
Antamina Página 6
FORMATO
Versión: 01
Rev.:
 angular.json: contiene la configuración sobre el framework, se definen valores para las

herramientas de compilación y desarrollo.
Se puede observar en las siguientes secciones como se hace referencias a archivos que
encontramos alojados en el proyecto.
Antamina Página 7
FORMATO
Versión: 01
Rev.:
2.2 Módulo
Atributos Definición
Nombre Se debe declarar el nombre lo más sencillo, descriptivo y corto posible.
Definición Son contenedores para almacenar los componentes, servicios, Directi-
vas, Pipes. Desde un módulo o raíz se enlazan otros módulos en la pro-
piedad “Imports” y se externalizan hacía otros módulos con la propie-
dad “Exports” (ver Figura 1).
Idioma Ingles
Estilo Variable kebab-case
Nomenclatura <component-name>.module
Ejemplo:
 app.module.ts  module Padre
 detail-case.module.ts  module Hijo
Longitud
Consideraciones  No usar espacios, tildes, caracteres especiales, ni la letra ñ.
 Evitar el uso de abreviaturas o acrónimo.
Figura 1.
Antamina Página 8
FORMATO
Versión: 01
Rev.:
2.3 Componentes Web

Definición Un componente en angular es un elemento que está compuesto por:
 Un archivo que será nuestro template, <component-
name>.component.html
 Un archivo de lógica, la cual es la que pondremos en un ar-
chivo, <component-name>.component.ts
 Un archivo para el CSS, <component-name>.component.css
 Un archivo de especificación de prueba, <component-
name>.component.spec.ts (ver Figura 2).
Idioma Ingles
Nomenclatura <component-name>.component
Ejemplo:
 app.component.html
 my-meeting.component.ts
Antamina Página 9
FORMATO
Versión: 01
Rev.:
Figura 2.
Una aplicación angular está compuesta por muchos componentes.
Figura 3.
Antamina Página 10
FORMATO
Versión: 01
Rev.:
2.4 Routes
Definición Es una matriz que se usa para definir rutas, podemos encontrar las
siguientes propiedades:
 path: define la ruta de un componente
 component: se coloca el nombre del componente de salida.
 loadChildren: referencia a rutas secundarias cargadas de forma
diferida.
 redirectTo: se hace referencia a una URL para redirigir la URL
coincidente. (ver Figura 4)
 canActivate: es un guardia para dar acceso o no a la ruta.
Idioma Ingles
Nomenclatura <name>-routing.module.ts
Ejemplo:
 principal-routing.module.ts
 app-routing.module.ts
Antamina Página 11
FORMATO
Versión: 01
Rev.:
Figura 4.
Gráficamente podríamos entenderlo como un diagrama que sigue una secuencia según el PATH que se
defina o declare.
Figura 5.
Antamina Página 12
FORMATO
Versión: 01
Rev.:
2.5 Core Guard

Definición Tiene como tarea ser un guardia de accesos a las rutas solicitadas
 Se crea el archivo auth.guard.ts, se validará con los localstorage del
token y del menú, como en la siguiente imagen:
Antamina Página 13
FORMATO
Versión: 01
Rev.:
 Una vez hecho todo eso implementaremos la parte en que nuestra

seguridad lo lea la ruta a que queremos acceder.
 También se declara en el app.module.ts, en el atributo providers
Idioma Ingles
Nomenclatura <nombre>.guard.ts
Ejemplo:
 auth.guard.ts
Antamina Página 14
FORMATO
Versión: 01
Rev.:
2.6 Interceptores
Definición Tiene como tarea inspeccionar/modificar las peticiones que va de la aplicación
al servidor así como también la que va del servidor a la aplicación.
 Una vez creado el archivo se implementa la interfaz HttpInterceptor.
 Una vez hecho todo eso implementaremos la parte en que nuestro

interceptor agrega la cabecera “Authorization” con el token que
vayamos a usar, para ello haremos uso de la función “getJsonValue” y
lo asignamos a una variable.
Antamina Página 15
FORMATO
Versión: 01
Rev.:
 El token puede o no existir en nuestro localStorage y para no estar

enviando la cabecera “Authorization” vacia, condicionamos si existe
algún token, posteriormente si existe un token modificamos el request
agregándole la cabecera, utilizando el método clone que viene en
nuestro en request de tipo HttpRequest y pasándole la cabecera con el
token.
 Hay que recordar que los interceptores es ejecutan en cada llamada al
servidor siempre y cuando estén registrados en el providers del módulo
raíz, en este caso el app.module.ts como se muestra en la imagen.
Idioma Ingles
Nomenclatura <nombre>.service.ts
Ejemplo:
 interceptor.service.ts
Antamina Página 16
FORMATO
Versión: 01
Rev.:
2.7 Services
Definición Es una parte fundamental en el desarrollo de un componente ya que será la
que comunique la parte front-end con la parte back-end.
 Al generar un archivo del tipo service por defecto se instanciara de
esta forma.
 En el constructor instanciaremos la clase HttpClient que nos permitirá

lograr la comunicación con los servicios expuestos en el back-end.
 Luego se creara la función (post o get) que será invocada en el

componente, como toda función puede recibir o no parámetros de
entrada.
Antamina Página 17
FORMATO
Versión: 01
Rev.:
 Definimos algunas sentencias de código mostradas en la figura

anterior con el verbo get.
1. Login: nombre de la función a invocar por el componente.
2. (loginModel: LoginRequest): es un objeto del LoginRequest (este
hace referencia a un modelo que se crea en una clase interface).
3. this.http.get: es el verbo que se encuentra expuesto en el
gatewey del backend.
4. this.urlWebApi: es una variable que se encuentra definida en el
enviroment el cual apunta al end point del gatewey.
5. Rutas.Authentication +Authentication.Login: son variables que se

encuentran definidas en el archivo constant.ts
6. params { loginRequest }: loginRequest hace referencia al

parámetro que espera recibir el back-end el cual lleva el mismo
tipado en el servicio.
Antamina Página 18
FORMATO
Versión: 01
Rev.:
Idioma Ingles
Nomenclatura <name>.service.ts
Ejemplo:
 general.service.ts
 case.service.ts
Antamina Página 19
FORMATO
Versión: 01
Rev.:
3 Estándares de desarrollo de Front-End

Se tiene como objetivo construir código estándar de calidad que será desarrollado por el equipo, este
deberá mostrar claridad, orden y legibilidad; a continuación se describe las reglas y recomendaciones
a usar en el formateo (indentaciones, tabulaciones, espaciados y saltos de línea) de los diversos códigos
en TypeScript.
Tipados por todas partes:
Tipo Definición
number Los datos de tipo number, almacenan valores numéricos. Estos pueden
ir expresados como números sin más.
string Son datos que almacenan cadenas, se declaran como string.
Date Permite trabajar con fechs y horas.
let Declara una variable de alcance local con ámbito de bloque.
const Cumple con la misma función que una variable “let”, con la diferencia
que su valor no es reasignable.
Datos Enum, class, interface.
3.1 Anatomía de un módulo

Definición Son como clases de typeScript, que inicialmente se crean vacías teniendo
como un decorador o palabra clave @NgModule.
Consideraciones  Al crear un proyecto en angular se genera por defecto un archivo
app.module.ts (ver Figura 6)
 Se pueden manejar multiples modulos para el uso de los
componentes privados o públicos (ver Figura 7)
Ejemplo
Figura 6.
Antamina Página 20
FORMATO
Versión: 01
Rev.:
Figura 7.
3.2 Anatomía de un componente

Definición Son clases TypeScript decoradas con funciones específicas, palabra clave
@Component
Consideracione  Se tiene que especificar un nombre único y descriptivo en la propiedad
s selector (Ver Figura 8).
 Definir el html a ser usado en la propiedad templateUrl (Ver Figura 8).
 Llamar a los estilos del componente (css,scss,etc.) en la propiedad
stylesUrls (Ver Figura 8).
 Funciones con parámetros de entrada y sin parámetros de entrada (Ver
Figura 9).
 Instanciar objetos referentes a distintas clases en el constructor (Ver
Figura 10).
 Toda declaración de variables tipadas se deben declarar antes del
constructor (Ver Figura 11).
Antamina Página 21
FORMATO
Versión: 01
Rev.:
Ejemplo
Figura 8.
Figura 9.
Figura 10.
Antamina Página 22
FORMATO
Versión: 01
Rev.:
Figura 11.
Antamina Página 23
FORMATO
Versión: 01
Rev.:
3.3 Componentes públicos o privados

Definición Cuando se crea un componente, se debe declarar en su module en la propiedad
“declarations” para ser usado por otro componente del mismo modulo. Pero si se
quiere usar desde otro componente que no esté en el mismo modulo, se debe de
declarar en la propiedad “exports” (Ver figura 12).
Consideracio  Pueden existir componentes en un solo modulo y ese modulo ser llamado
nes en otro.
 Para un mejor manejo de código, es usar multiples modulos.
Ejemplo
Figura 12.
Antamina Página 24
FORMATO
Versión: 01
Rev.:
4 Proyecto Demo
4.1 Inicialización
Comenzaremos con la creación de un proyecto haciendo uso de algunos comandos.
 Abrimos la consola de nuestra interfaz de desarrollo, en este caso haremos uso del IDE Visual
Studio Code. Se puede usar el cmd (Windows), git (bash y cmd)
 Procedemos instalando el angular cli con el comando “npm install –g @angular/cli”

 Una vez instalado nos ubicamos sobre la carpeta a trabajar y creamos el proyecto con el
comando ng new “nombre de la aplicación”
 Se trabajara con la siguiente distribución de carpetas, las cuales pasamos a detallar.
1. Authentication: esta carpeta se encargara de almacenar diferentes archivos que tendrán la

función de controlar y validar las credenciales con el fin de permitir el acceso a la
aplicación.
Antamina Página 25
FORMATO
Versión: 01
Rev.:
2. Component: esta carpeta contendrá todos los componentes dinámicos que serán
reutilizados por diferentes vistas de la aplicación.
3. Core: esta carpeta tendrá la función de controlar la existencia y validación del token.
4. Home: esta carpeta contendrá las diferentes vistas que tendrá la aplicación después de
pasar por la pantalla del login.
5. Shared: esta carpeta contendrá las carpetas directivas, modelos, servicios y los archivos
constant.ts, shared.module.ts, útil.ts
Antamina Página 26
FORMATO
Versión: 01
Rev.:
Directive: en esta carpeta almacenaremos funciones que sean generales y utilizables por
toda la aplicación, por ejemplo la creación de funciones que validen caracteres, números,
letras, correo, etc.
Models: esta carpeta almacenara los modelos que serán utilizados por diferentes vistas en
la aplicación, podemos entender como modelos a las entidades que se trabajan a nivel del
back-end.
Services: esta carpeta almacenara los archivos del tipo services que tendrán las llamas al
back-end, podemos observar un servicio para la autenticación del login.
6. Enviroments: son archivos que tendrán almacenados en variables de tipo constante

información de datos que se utilizaran en toda la aplicación, podemos tener más de un
Antamina Página 27
FORMATO
Versión: 01
Rev.:
enviroment para diferente ambiente (dev, qa, prod) con la finalidad que al ser probado en
cada ambiente estas variables podrían tener diferente valor (Ver Figura 13).
Figura 13.
7. Assets: en esta carpeta podemos almacenar todo lo referente a archivos del tipo css,
imágenes, plugins (que no se instalen como una dependencia a través de un comando
npm).
Además se trabajara con un archivo de tipo .json, en este se definirán todos los labels que
se mostraran en la aplicación con el fin de tener todo organizado en un solo archivo y evitar
duplicidad de labels que hagan mención a un mismo texto en diferentes vistas (Ver figura
14).
Antamina Página 28
FORMATO
Versión: 01
Rev.:
Figura 14.
Antamina Página 29
FORMATO
Versión: 01
Rev.:
5 ANEXOS
5.1 Glosario de Acrónimos y Abreviaturas
S
Antamina Página 30
FORMATO
Versión: 01
Rev.:
Antamina Página 31

Estándares de Construcción Aplicaciones Angular v1.0

Cargado por

Copyright:

Formatos disponibles

Estándares de Construcción Aplicaciones Angular v1.0

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Estándares de Construcción Aplicaciones Angular v1.0

Cargado por

Copyright:

Formatos disponibles

FORMATO

Estándares de Construcción Aplicaciones

Cliente STC Soporte DEV

2 Definición de elementos de programación Front-End

En la sección de dependencies podemos observar algunas de las librerías instaladas:

 angular.json: contiene la configuración sobre el framework, se definen valores para las

2.3 Componentes Web

Una aplicación angular está compuesta por muchos componentes.

2.5 Core Guard

 Una vez hecho todo eso implementaremos la parte en que nuestra

 También se declara en el app.module.ts, en el atributo providers

 Una vez hecho todo eso implementaremos la parte en que nuestro

 El token puede o no existir en nuestro localStorage y para no estar

 En el constructor instanciaremos la clase HttpClient que nos permitirá

 Luego se creara la función (post o get) que será invocada en el

 Definimos algunas sentencias de código mostradas en la figura

5. Rutas.Authentication +Authentication.Login: son variables que se

6. params { loginRequest }: loginRequest hace referencia al

3 Estándares de desarrollo de Front-End

Date Permite trabajar con fechs y horas.

let Declara una variable de alcance local con ámbito de bloque.

3.1 Anatomía de un módulo

3.2 Anatomía de un componente

3.3 Componentes públicos o privados

 Procedemos instalando el angular cli con el comando “npm install –g @angular/cli”

1. Authentication: esta carpeta se encargara de almacenar diferentes archivos que tendrán la

6. Enviroments: son archivos que tendrán almacenados en variables de tipo constante

5.1 Glosario de Acrónimos y Abreviaturas

También podría gustarte