ESTANDARES DE DESARROLLO FRONTEND ANGULAR 7+

ESTANDARES DE DISEÑO FRONTEND CON ANGULAR

7+

1
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 7+

Historial de Revisiones

Fecha Versión Descripción del cambio Autor

03/09/2019 1.0 Creación Miguel Oliveros

2
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 7+

Contenido
1. Estándar y Framework...........................................................................................................4
2. Nombres de Componentes y Estructura de Proyecto Angular................................................4
i. Estándar de Nomenclatura de los componentes:...............................................................4
ii. Estándar de Estructura de los componentes:.....................................................................4
3. Construcción..........................................................................................................................6
i. Módulos.............................................................................................................................6
ii. Componentes.....................................................................................................................8
iii. Modelos.........................................................................................................................9
iv. Servicios.............................................................................................................................9
v. Interceptores...................................................................................................................10
vi. Pipes................................................................................................................................11
vii. Helpers.........................................................................................................................11
viii. Directivas.....................................................................................................................12
ix. Guards.............................................................................................................................12
x. Utilitarios.........................................................................................................................13
xi. Librerías...........................................................................................................................13

3
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 7+

ESTANDARES DE FRONTEND ANGULAR

1. Estándar y Framework
Los componentes frontend en el Framework ms de SUNAT se implementan con Angular 7.

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
megaproceso, macroproceso y proceso al cual pertenece la Aplicación Web:
<megaproceso>-<macroproceso>[-<proceso|sistema>]-frontend
Ejemplo:
recaudacion-tributaria-declapago-rentappnn-frontend
 El nombre de los componentes frontend de librerías compartidas debe estar basado en
el megaproceso, macroproceso y proceso al cual pertenecen las Aplicaciones Web en las
cuales será utilizado:
<megaproceso>-<macroproceso>[-<proceso|sistema>-<componente>]-frontendlib
Ejemplo:
recaudacion-tributaria-declapago-renta-cabecera-frontendlib
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

4
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 7+

¦ ¦ ¦ <nombreModulo>.module.ts
¦ ¦ ¦ ¦ +---components
¦ ¦ ¦ ¦ ¦ +---<nombreComponente>
¦ ¦ ¦ ¦ ¦ ¦ <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

5
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 7+

¦ ¦ ¦ tsconfig.spec.json
¦ ¦ ¦ tslint.json
¦ ¦ ¦
¦ ¦ +---src
¦ ¦ ¦ ¦ public-api.ts
¦ ¦ ¦ ¦ test.ts
¦ ¦ ¦ ¦
¦ ¦ ¦ +---lib
¦ ¦ ¦ ¦ ¦ <nombreLibreria>.component.css
¦ ¦ ¦ ¦ ¦ <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.prod.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

6
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 7+

 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';

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'
}
];

7
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 7+

@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({
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 }
'./modules/secdeterminativa/secdeterminativa.module';

@NgModule({ decla
rations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule.forRoot(),
SecdeterminativaModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }

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:

8
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 7+

 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.
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
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 class CatEmpleado {
codPers: string;
apPate: string;
apMate: string;
nombres: string;
codUniOrg: string;
codUniOrgDestaque: string;
seleccion: boolean;
constructor() { }
}

iv. Services
Son clases que contienen lógica del negocio y 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:

9
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 7+

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({ provid
edIn: 'root'
})
export class CatEmpleadoService {
constructor(private http: HttpClient) { }
obtenerCatalogoFuncionarios() : Observable<any> {
return
this.http.get<HttpResponse<Object>>("https://api.sunat.gob.pe/v1/controladuanero/i
ngreso/asignacion/e/catempleado/"
, "", { observe: 'response' })).pipe(
catchError(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): 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;
}

1
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 7+

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) {
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;
};
}

1
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 7+

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) { }

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

return true;
}
}

1
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 7+

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.");
}
}

xi. Librerías
Contiene un componente y/o servicios reutilizables, los cuales pueden ser instalados como
módulos en cualquier proyecto angular.

1
 ESTANDARES DE DESARROLLO FRONTEND ANGULAR 7+

Cada librería debe implementar un solo módulo.