ESTANDARES DE DESARROLLO FRONTEND ANGULAR 13+

ESTÁNDARES DE DESARROLLO DEL

FRONTEND
Versión 1.0

Arquitectura
Responsable de Revisión y/o
Item Versión Fecha Autor Descripción Estado Aprobación

1 1.0 20/12/2022 SR Versión 1.0 Revisado Michael Boza

 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 13+

Contenido
1. Estándar y Framework...........................................................................................................
2. Nombres de Componentes y Estructura de Proyecto Angular................................................
i. Estándar de Nomenclatura de los componentes:...............................................................
ii. Estándar de Estructura de los componentes:.....................................................................
3. Construcción..........................................................................................................................
i. Módulos.............................................................................................................................
ii. Componentes.....................................................................................................................
iii. Modelos.........................................................................................................................
iv. Servicios.............................................................................................................................
v. Interceptores...................................................................................................................
vi. Pipes................................................................................................................................
vii. Helpers.........................................................................................................................
viii. Directivas.....................................................................................................................
ix. Guards.............................................................................................................................
x. Utilitarios.........................................................................................................................
xi. Librerías...........................................................................................................................
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 13+

ESTANDARES DE FRONTEND ANGULAR

1. Estándar y Framework
Los componentes frontend en el Framework de WIN se implementarán con Angular 13+.

2. Nombres de Componentes y Estructura de Proyecto Angular

i. Estándar de Nomenclatura de los componentes:
 El nombre de los componentes frontend de aplicaciones web debe estar basado
en el macroproceso y proceso al cual pertenece la Aplicación Web:
<macroproceso>[-<proceso|sistema>]-frontend
Ejemplo:
Emision-comprobantes-ECOM-frontend
 El nombre de los componentes frontend de librerías compartidas debe estar
basado en el macroproceso y proceso al cual pertenecen las Aplicaciones Web en
las cuales será utilizado:
<macroproceso>[-<proceso|sistema>-<componente>]-frontendlib
Ejemplo:
Emision-comprobantes-ECOM-cabecera-frontendlib
 El nombre de Camelcase es una estructura que debe estar definida por el uso de
mayúsculas y minúsculas, se suele usar mucho en lenguajes como JavaScript, al
declarar nombres variables o funciones.

ii. Estándar de Estructura de los componentes:

 La siguiente es la estructura interna que debe tener el componente frontend de
una aplicación Web:
src
¦ browserslist
¦ favicon.ico
¦ index.html
¦ karma.conf.js
¦ main.ts
¦ polyfills.ts
¦ styles.css
¦ test.ts
¦ tsconfig.app.json
¦ tsconfig.spec.json
¦ tslint.json
¦
+---app
¦ ¦ app-routing.module.ts
¦ ¦ app.component.css
¦ ¦ app.component.html
¦ ¦ app.component.spec.ts
¦ ¦ app.component.ts
¦ ¦ app.module.ts
¦ ¦
¦ +---modules
¦ ¦ +---<nombreModulo>
¦ ¦ ¦ <nombreModulo>-routing.module.ts
¦ ¦ ¦ <nombreModulo>.component.css
¦ ¦ ¦ <nombreModulo>.component.html
¦ ¦ ¦ <nombreModulo>.component.spec.ts
¦ ¦ ¦ <nombreModulo>.component.ts
¦ ¦ ¦ <nombreModulo>.module.ts
¦ ¦ ¦ ¦ +---components
¦ ¦ ¦ ¦ ¦ +---<nombreComponente>
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 13+

¦ ¦ ¦ ¦ ¦ ¦ <nombreComponente>.component.css
¦ ¦ ¦ ¦ ¦ ¦ <nombreComponente>.component.html
¦ ¦ ¦ ¦ ¦ ¦ <nombreComponente>.component.ts
¦ ¦ ¦ ¦ ¦ ¦ +---<nombreSubComponente>
¦ ¦ ¦ ¦ ¦ ¦ ¦ <nombreSubComponente>.component.css
¦ ¦ ¦ ¦ ¦ ¦ ¦ <nombreSubComponente>.component.html
¦ ¦ ¦ ¦ ¦ ¦ ¦ <nombreSubComponente>.component.ts
¦ ¦ ¦ ¦ ¦
¦ ¦ ¦ ¦ +---guards
¦ ¦ ¦ ¦ ¦ <nombreGuard>.guard.ts
¦ ¦ ¦ ¦ +---directives
¦ ¦ ¦ ¦ ¦ <nombreDirectiva>.directive.ts
¦ ¦ ¦ ¦ +---pipes
¦ ¦ ¦ ¦ ¦ <nombrePipe>.pipe.ts
¦ ¦ ¦ ¦ +---helpers
¦ ¦ ¦ ¦ ¦ <nombreHelper>.helper.ts
¦ ¦ ¦ ¦ +---interceptors
¦ ¦ ¦ ¦ ¦ <nombreInterceptor>.interceptor.ts
¦ ¦ ¦ ¦ +---models
¦ ¦ ¦ ¦ ¦ <nombreModel>.ts
¦ ¦ ¦ ¦ +---services
¦ ¦ ¦ ¦ ¦ <nombreServicio>.service.ts
¦ ¦ ¦ ¦ +---utils
¦ ¦ ¦ ¦ ¦ <nombreUtil>.util.ts
¦ ¦ ¦ ¦ ¦
¦ +---guards
¦ ¦ <nombreGuard>.guard.ts
¦ +---directives
¦ ¦ <nombreDirectiva>.directive.ts
¦ +---pipes
¦ ¦ <nombrePipe>.pipe.ts
¦ +---helpers
¦ ¦ <nombreHelper>.helper.ts
¦ +---interceptors
¦ ¦ <nombreInterceptor>.interceptor.ts
¦ +---models
¦ ¦ <nombreModel>.ts
¦ +---services
¦ ¦ <nombreServicio>.service.ts
¦ +---utils
¦ ¦ <nombreUtil>.util.ts
¦
+---assets
¦ .gitkeep
¦
+---environments
environment.prod.ts
environment.ts
 La siguiente es la estructura interna que debe tener el componente frontend de
una librería compartida de aplicaciones web:
Projects
¦ +---<nombreLibreria>
¦ ¦ ¦ karma.conf.js
¦ ¦ ¦ ng-package.json
¦ ¦ ¦ package.json
¦ ¦ ¦ README.md
¦ ¦ ¦ tsconfig.lib.json
¦ ¦ ¦ tsconfig.spec.jso
¦ ¦ ¦ n tslint.json
¦ ¦ ¦
¦ ¦ +---src
¦ ¦ ¦ ¦ public-api.ts
¦ ¦ ¦ ¦ test.ts
¦ ¦ ¦ ¦
¦ ¦ ¦ +---lib
¦ ¦ ¦ ¦ ¦ <nombreLibreria>.component.css
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 13+

¦ ¦ ¦ ¦ ¦ <nombreLibreria>.component.html
¦ ¦ ¦ ¦ ¦ <nombreLibreria>.component.spec.ts
¦ ¦ ¦ ¦ ¦ <nombreLibreria>.component.ts
¦ ¦ ¦ ¦ ¦ <nombreLibreria>.module.ts
¦ ¦ ¦ ¦ ¦ <nombreLibreria>.service.spec
¦ ¦ ¦ ¦ ¦ <nombreLibreria>.service.ts
¦
src
¦ browserslist
¦ favicon.ico
¦ index.html
¦ karma.conf.js
¦ main.ts
¦ polyfills.ts
¦ styles.css
¦ test.ts
¦ tsconfig.app.json
¦ tsconfig.spec.json
¦ tslint.json
¦
+---app
¦ ¦ app-routing.module.ts
¦ ¦ app.component.css
¦ ¦ app.component.html
¦ ¦ app.component.spec.ts
¦ ¦ app.component.ts
¦ ¦ app.module.ts
¦
+---assets
¦ .gitkeep
¦
+---environments
environment.pro
d.ts
environment.ts

3. Construcción
Los componentes frontend deben de ser diseñados y construidos tomando en cuenta el
concepto Lazy Loading, por lo tanto es necesario que tengan al menos un módulo.

i. Modules
Cada módulo deberá tener la configuración del enrutado de sus componentes y la
importación de los módulos necesarios, de tal forma que en el enrutado y
configuración del módulo principal sólo se deberá de hacer referencia a estos.
Se recomienda definir los módulos tomando en cuenta el bundle Budget. La
nomenclatura de las clases es la siguiente:
 Clase module: <nombreModulo>Module
 Clase routing module: <nombreModulo>RoutingModule

Ejemplo:
Se tiene el módulo Sección Determinativa, el cual tendrá un componente Capital
Primera Categoría
La clase enrutadora del módulo Sección Determinativa:
secdeterminativa-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 13+

import { CapPriCategoriaComponent } from "./cappricategoria.component"; const

routes: Routes = [
{path: '', component: CapPriCategoriaComponent}
];

@NgModule({
imports:
[RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SecdeterminativaRoutingModule { }

La clase module del módulo Sección Determinativa:

secdeterminativa.module.ts

import { NgModule } from '@angular/core';

import { CapPriCategoriaComponent } from "./cappricategoria.component";
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { SecdeterminativaRoutingModule } from './secdeterminativa-
routing.module';

@NgModule({
declarations:
[CapPriCategoriaComponent],
imports: [
BrowserModule,
NgbModule.forRoot()
],
exports: [CapPriCategoriaComponent]
})
export class SecdeterminativaModule { }

La clase enrutadora de la aplicación.

Caso de carga de cada módulo al acceder a alguna de sus rutas:
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [

{
path: '',
loadChildren:
'./secdeterminativa/secdeterminativa.module#SecdeterminativaModule'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Caso de carga de cada módulos como precarga, inmediatamente después de cargar

el primer módulo:
app-routing.module.ts
import { RouterModule, NoPreloading, PreloadAllModules } from

'@angular/router'; @NgModule({
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 13+

imports: [
RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules,
}),]
})
export class AppRoutingModule { }

La clase module de la aplicación:

app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule
} from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { SecdeterminativaModule} from
'./modules/secdeterminativa/secdeterminativa.module';

@NgModule({ declaration
s: [
AppComponent
],
imports: [
BrowserModule
,
AppRoutingMod
ule,
NgbModule.for
Root(),
Secdeterminat
ivaModule
],
providers: [ ],
bootstrap:
[AppComponent]
})
export class AppModule { }

Reutilización de componentes
Un Componente se puede reutilizar en los demás componentes para ya no replicar el
código en las demás vistas y eso es muy buena práctica para no saturar el proyecto
asumiendo la práctica de responsabilidad única.

ii. Components
Los componentes de cada módulo deberán de tener como mínimo un archivo html y
un ts, puede tener subcomponentes los cuales deberán seguir la misma lógica.
En el caso de los componentes de las librerías, se deberán definir y documentar
correctamente los Inputs y Output de estos para su correcta reutilización.
La nomenclatura de las clases es la siguiente:
Clase component: <nombreComponente>Component
La nomenclatura del selector es la siguiente: <nombreModulo>-<nombreComponente>

Ejemplo:
Se tiene el módulo Sección Determinativa, el cual tendrá un componente Capital
Primera Categoría.
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 13+

cappricategoria.component.ts

import { Component, OnInit } from '@angular/core'; import { Router } from

"@angular/router";

@Component({
selector: 'secdeterminativa-cappricategoria',
templateUrl:
'./cappricategoria.component.html',
styleUrls:
['./cappricategoria.component.css']
})
export class CapPriCategoriaComponent implements

OnInit { constructor(private router: Router){}

ngOnInit() {
}
}

iii. Models
 Interfaces: Especifican el tipo de nuestra variable.
• Services: Los servicios usarán las interfaces.
 Clases: Crean instancias y se hacen uso de métodos.
• Components: Usaran las clases para inicializar o realizar método en
base a las clases creadas.

Son clases de representación del modelo conceptual de la solución del componente

frontend, también se incluyen los objetos de valor o beans que se requieran.
La nomenclatura de las clases es la siguiente:
 Clase model: <nombreModelo>

Ejemplo:
Se tiene el model catálogo empleado:
catempleado.ts
export interface CatEmpleado {
name:’’,
age:’’,
}

export class
CatEmpleado
{ codPers:
string;
apPate:
string;
apMate:
string;
nombres:
string;
codUniOrg:
string;
codUniOrgDestaque
: string;
seleccion:
boolean;
constructor() { }
}
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 13+

iv. Services
Son clases a través de las cuales se realiza el consumo de los servicios web que
sean necesarios.
La nomenclatura de las clases es la siguiente:
 Clase service: <nombreServicio>Service

Ejemplo:
Se tiene el servicio que obtiene datos de catálogo empleado:
catempleado.service.ts
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { ConstantesRest } from 'src/app/utils/constantesrest';

@Injectable({
providedIn: 'root'
})
export class CatEmpleadoService {
private URL_END_POINT: String =
`${environment.URL_BACKEND}/fiscalizacion/expediente`;

constructor(
private http: HttpClient
) { }

obtenerCatalogoFuncionarios() :
Observable<any> {
return this.http.get<HttpResponse<Object>>(URL_END_POINT
, "", { observe:
'response' })).pipe( catchEr
ror(e => {
return throwError(e.error);
})
);
}
}

v. Interceptors
Son clases que modifican y/o inspeccionan el contenido de una petición
siguiendo alguna lógica definida, por lo general es en estas clases en las cuales
se insertan los datos del JWT. La nomenclatura de las clases es la siguiente:
 Clase interceptor: <nombreInterceptor>Interceptor

Ejemplo:
Se tiene el interceptor que coloca los datos del JWT para las peticiones POST y PUT:
Interceptorservice.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent
from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { ConstantesCadenas } from
'src/app/utils/constantescadenas'; @Injectable()
export class InterceptorService implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler):
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 13+

Observable<HttpEvent<any>>
{
const proxyReq = req.clone({
headers: (req.method == 'POST' || req.method == 'PUT' ?
req.headers.set("Authorization", "Bearer:
" +
sessionStorage.getItem("token")) :
req.headers)
});
return next.handle(proxyReq);
}
replacer(key,value){
if (key=="visibilidad") return
undefined; else return value;
}

vi. Pipes
Son clases que sirven para modificar la presentación de la información
al usuario. La nomenclatura de las clases es la siguiente:
 Clase pipe: <nombrePipe>Pipe

Ejemplo:
Se tiene el pipe invierte las letras de una palabra:
Interceptorservice.interceptor.ts
import { Pipe, PipeTransform } from

'@angular/core'; @Pipe({name:

'invertirPalabra'})
export class InvertirPalabraPipe implements
PipeTransform { transform(value: string): string
{
let cadenaInvertida: string = "";
for (var i = value.length - 1; i >=
0; i--) { cadenaInvertida +=
value.charAt(i);
}
return cadenaInvertida;
}
}

vii. Helpers
Son clases de apoyo para modificar o añadir alguna propiedad específica de un
componente o parte de este.
La nomenclatura de las clases es la siguiente:
 Clase helper: <nombreHelper>Helper

Ejemplo:
Se tiene el helper para traducir y formatear los textos del paginador de un data table:
Interceptorservice.interceptor.ts
import { MatPaginatorIntl } from "@angular/material";
export class PaginadorHelper extends MatPaginatorIntl {
itemsPerPageLabel = 'Número de página';
nextPageLabel = 'Siguiente';
previousPageLabel = 'Atras';
firstPageLabel = 'Primera página';
lastPageLabel = 'Última página';
getRangeLabel = function (page, pageSize, length) {
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 13+

if (length === 0 || pageSize === 0) {

return '0 de ' + length;
}
length = Math.max(length, 0);
const startIndex = page * pageSize;
// If the start index exceeds the list length, do not try and fix the
end index to the end.
const endIndex = startIndex < length ?
Math.min(startIndex + pageSize,
length) : startIndex + pageSize;
return startIndex + 1 + ' - ' + endIndex + ' / ' + length;
};
}

viii. Directives
Son clases que permiten definir e incorporar comportamientos específicos para
cualquier elemento que forme parte de un componente.
La nomenclatura de las clases es la siguiente:
 Clase directive: <nombreDirectiva>Directive

Ejemplo:
Se tiene una directiva que le da estilo a los textbox de casillas calculadas:
casillacalculada.directive.ts
import { Directive, ElementRef } from '@angular/core';

@Directive({
selector: '[casillaCalculada]'
})
export class CasillaCalculadaDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'green';
}
}

ix. Guards
Son clases que permiten controlar y/o restringir el acceso a determinadas rutas de
la aplicación, ya sea al ingresar a alguna ruta, algún componente hijo de una ruta, la
salida de una ruta o para el lazy loading de un módulo al cual no se deba tener
acceso.
La nomenclatura de las clases es la siguiente:
 Clase guard: <nombreGuard>Guard

Ejemplo:
Se tiene un guard que restringe el acceso a usuarios logueados:
permitiracceso.guard.ts
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { CanActivate } from '@angular/router';
import { LoginService } from '../login/login.service';

@Injectable()
export class PermitirAccesoAuthGuard implements CanActivate {

constructor(private authService: LoginService, private router: Router) {

}
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 13+

canActivate() {
if(!this.authService.isLogged()) {
this.router.navigate(['/']);
return false;
}

return true;
}
}

x. Utils
Son clases de ayuda que contienen métodos o constantes comunes y
reutilizables. La nomenclatura de las clases es la siguiente:
 Clase util: <nombreUtil>Util

Ejemplo:
Se tiene un utilitario con una función que permite clonar objetos:
clonadorutil.ts
export class FuncionesGenerales {

static getInstance() : FuncionesGenerales {

if (!this.funcionesGenerales) {
this.funcionesGenerales = new FuncionesGenerales();
}
return this.funcionesGenerales;
}

clonarObjeto(obj, ...atributosExcluir: string[]) {

var copy;
// Handle the 3 simple types, and null or undefined
if (null == obj || "object" != typeof obj) return obj;
// Handle Date
if (obj instanceof Date) {
copy = new Date();
copy.setTime(obj.getTime());
return copy;
}
// Handle Array
if (obj instanceof Array) {
copy = [];
for (var i = 0, len = obj.length; i < len; i++) {
//console.log(" index => " + i);
//console.log(" obj => " + obj);
copy[i] = this.clonarObjeto(obj[i], ...atributosExcluir);
}
return copy;
}
// Handle Object
if (obj instanceof Object) {
copy = {};
for (var attr in obj) {
if (!this.existeElementoEnLista(attr, atributosExcluir) &&
obj.hasOwnProperty(attr)) copy[attr] = this.clonarObjeto(obj[attr],
...atributosExcluir);
}
return copy;
}
throw new Error("¡No se puede copiar el objeto! Este tipo no es
soportado.");
}
}
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 13+

xi. Librerías
Contiene un componente y/o servicios reutilizables, los cuales pueden ser instalados
como módulos en cualquier proyecto angular.
Cada librería debe implementar un solo módulo.