Lineamientos de Angular

Lista de Lineamientos

Lineamientos para nombrar un Proyecto (Presione aquí para Ir)
Lineamientos del uso de Enum (Presione aquí para Ir)
Lineamientos del uso de Interfaces (Presione aquí para Ir)
Lineamientos del uso de Types (Presione aquí para Ir)
Lineamientos del uso de Environments (Presione aquí para Ir)
Lineamientos de Nombre de Estilos (Scss, Css u Otros) (Presione aquí para Ir)
Lineamientos del uso de TypeScript (Componentes, Clases, Modelos u Otros)(Presione aquí para Ir)

Lineamiento para nombrar proyecto en angular

# Paso 1. Tabla de Lineamiento

Lineamientos de Nombre de Repositorios

Framework	Tipo	Versión	Nombre del Proyecto	Tipo	Año	Mes	Nombre del Repositorio
ANGULAR	PROY	VX	XXXXXXX	S	YY	MM	ANGULAR-PROY-VX-XXXXXXX-SYYMM
ANGULAR	PROY	V1	EJEMPLO	S	22	01	ANGULAR-PROY-V1-EJEMPLO-S2201

# Paso 2. Descripción de la Tabla de Lineamiento

Columna #04 (Framework): Nombre del Framework del desarrollo.
Columna #01 (Tipo): Tipo de proyecto que hace referencia al proyecto - (Ejemplo: PROY -> Proyecto).
Columna #02 (Versión - VX): Versión del proyecto - (Ejemplo: V1).
Columna #03 (Nombre): Nombre que se le asignará al proyecto.
Columna #05 (Tipo): Indica que S de Starter - Inicio del Proyecto y continua la Fecha - (Ejemplo: S).
Columna #06 (Año - YY): Año en la que se creo el proyecto - (Ejemplo: 22).
Columna #07 (Mes - MM): Mesa en la que se creo el proyecto - (Ejemplo: 01).
Columna #08 (Nombre del Repositorio): Nombre final que resulta al unir todos los campos anteriores - (Ejemplo: PROY-V1-EJEMPLO-ANGULAR-S2201).

Lineamientos del uso de Enum en Proyecto Angular

# Paso 1. Tablas de Lineamientos del uso de Enum

Tabla de Lineamiento de Archivos Enum

Convención de Nombre	Descripción	Resultado
Lower Kebab Case	Cada palabra en minuscula se separa con un guión y se concatena con (.enum.ts.)	lower-kebab-case.enum.ts

Tabla de Lineamiento de Nombre de Clases Enum

Convención de Nombre	Descripción	Resultado
Upper Camel Case o Camel Case	La primera letra de cada palabra concatenada se pone en mayúsculas y se concatena con (Enum) al ultimo.	UpperCamelCaseEnum

Tabla de Lineamiento de Clave - Valor de un Enum

Convención de Nombre	Descripción	Resultado
Upper Snake Case	Cada letra en mayuscula separada por un guión bajo.	UPPER_SNAKE_CASE

# Paso 2. Ejemplo de Lineamiento de Archivos Enum

Ejemplo: Archivo Enum que contiene los errores de un registro

document-type.enum.ts

export enum ErrorMessageRegisterEnum {
  ERROR_COMPLETE_FIELD = 'Debes completar este campo.'
}

document-type.enum.ts: Revisar la Tabla de Lineamiento de Archivos Enum
ErrorMessageRegisterEnum: Revisar la Tabla de Lineamiento de Nombre de Clases Enum
ERROR_COMPLETE_FIELD: Revisar la Tabla de Lineamiento de Clave - Valor de un Enum

Lineamientos del uso de Interfaces en Proyecto Angular

# Paso 1. Tablas de Lineamientos del uso de Interfaces

Tabla de Lineamiento de Archivos Interface

Convención de Nombre	Descripción	Resultado
Lower Kebab Case	Cada palabra en minuscula se separa con un guión y se concatena con (.interface.ts.)	lower-kebab-case.interface.ts

Tabla de Lineamiento de Nombre de Clase Interface

Convención de Nombre	Descripción	Resultado
Upper Camel Case o Camel Case	La primera letra de cada palabra concatenada se pone en mayúsculas y se concatena con (I) al inicio.	IUpperCamelCase

Tabla de Lineamiento de métodos y propiedades de una Interface

Tipo	Convención de Nombre	Descripción	Resultado
Propiedad o Método	Upper Camel Case o Camel Case	La primera letra de cada palabra concatenada se pone en mayúsculas e inicia con minúscula.	upperCamelCase
Interface	Upper Camel Case o Camel Case	La primera letra de cada palabra concatenada se pone en mayúsculas y se concatena con (I) al inicio.	IUpperCamelCase
Enum	Upper Camel Case o Camel Case	La primera letra de cada palabra concatenada se pone en mayúsculas y se concatena con (Enum) al ultimo.	UpperCamelCaseEnum
Type	Upper Camel Case o Camel Case	La primera letra de cada palabra concatenada se pone en mayúsculas y se concatena con (T) al inicio.	TUpperCamelCase

# Paso 2. Ejemplo de Lineamiento de Archivos Interface

Ejemplo: Archivo Interface que contiene las propiedades de un perfil de usuario

user.interface.ts

export interface IUser {
  name: string;
  lastName: string;
  birthDate: Date;
  age: void;
}

user.interface.ts: Revisar la Tabla de Lineamiento de Archivos Interface
IUser: Revisar la Tabla de Lineamiento de Nombre de Clase Interface
name || lastName || birthDate || age: Revisar la Tabla de Lineamiento de métodos y propiedades de una Interface

Lineamientos del uso de Types en Proyecto Angular

# Paso 1. Tablas de Lineamientos del uso de Types

Tabla de Lineamiento de Archivos Types

Convención de Nombre	Descripción	Resultado
Lower Kebab Case	Cada palabra en minuscula se separa con un guión y se concatena con (.type.ts.)	lower-kebab-case.type.ts

Tabla de Lineamiento de Nombre de Clase Type

Convención de Nombre	Descripción	Resultado
Upper Camel Case o Camel Case	La primera letra de cada palabra concatenada se pone en mayúsculas y se concatena con (T) al inicio.	TUpperCamelCase

Tabla de Lineamiento de métodos y propiedades de Clase Type

Tipo	Convención de Nombre	Descripción	Resultado
Propiedad o Método	Upper Camel Case o Camel Case	La primera letra de cada palabra concatenada se pone en mayúsculas e inicia con minúscula.	upperCamelCase
Interface	Upper Camel Case o Camel Case	La primera letra de cada palabra concatenada se pone en mayúsculas y se concatena con (I) al inicio.	IUpperCamelCase
Enum	Upper Camel Case o Camel Case	La primera letra de cada palabra concatenada se pone en mayúsculas y se concatena con (Enum) al ultimo.	UpperCamelCaseEnum
Type	Upper Camel Case o Camel Case	La primera letra de cada palabra concatenada se pone en mayúsculas y se concatena con (T) al inicio.	TUpperCamelCase

# Paso 2. Ejemplo de Lineamiento de Archivos Types

Ejemplo: Archivo Type que contiene las propiedades de un perfil de usuario

user.type.ts

export type TUser = {
  name: string;
  lastName: string;
  birthDate: Date;
  age: void;
}

Ejemplo: Archivo Type que contiene las propiedades de una interfaz de perfil de usuario

user.type.ts

export type TUser = IUser;

user.type.ts: Revisar la Tabla de Lineamiento de Archivos Types
TUser: Revisar la Tabla de Lineamiento de Nombre de Clase Type
name || lastName || birthDate || age || IUser: Revisar la Tabla de Lineamiento de métodos y propiedades de Clase Type

Lineamientos del uso de Environments en Proyecto Angular

# Paso 1. Tablas de Lineamientos del uso de Environments

Tabla de Lineamiento de Archivos Environment

Convención de Nombre	Descripción	Resultado
Lower Case	Cada palabra en minuscula y se concatena con un tipo (.xx.ts)	environment.ts

Tabla de Lineamiento de Tipos de Environment

Convención de Nombre	Tipos	Resultado
Lower Kebab Case	.ts o .local o .dev.ts o .cert.ts o .prod.ts	environment.dev.ts

Tabla de Lineamiento de métodos y propiedades de la constante Environment

Tipo	Convención de Nombre	Descripción	Resultado
Propiedad o Método	Upper Camel Case o Camel Case	La primera letra de cada palabra concatenada se pone en mayúsculas e inicia con minúscula.	upperCamelCase

# Paso 2. Ejemplo de Lineamiento de Environment

Ejemplo: Archivo Environment que contiene las propiedades de un ambiente de desarrollo

environment.dev.ts

export const environment = {
  production: false,
  apiUrl: 'https://www.xxx.com/api/',
  baseUrl: 'https://www.xxx.com/',
  type: 'dev'
};

environment.dev.ts: Revisar la Tabla de Lineamiento de Archivos Environment
.dev.ts: Revisar la Tabla de Lineamiento de Tipos de Environment
production || apiUrl || baseUrl || type: Revisar la Tabla de Lineamiento de métodos y propiedades de la constante Environment

Lineamientos de Nombre de Estilos (Scss, Css u Otros) en Proyecto Angular

# Paso 1. Tablas de Lineamientos de Nombre de Estilos (Scss, Css u Otros)

Tabla de Lineamiento de Nombre de Clase en Div Padre en Componente html

Convención de Nombre	Descripción	Resultado
Lower kebab Case	Cada palabra en minuscula se separa con un guióny.	lower-kebab-case

Tabla de Lineamiento de Nombre de Clase en Divs Hijos en Componente html

Convención de Nombre	Tipos	Resultado
Lower kebab Case	Cada palabra en minuscula se separa con un guión y se concatena al inicio con la clase padre (lower-kebab-case___)	lower-kebab-case___lower-kebab-case-component

# Paso 2. Ejemplo de Lineamiento de Nombre de Estilos (Scss, Css u Otros)

Ejemplo: Archivo example-styles.component.html

example-styles.component.html

<div class="example-styles">
    <div class="example-styles___border-left">
    </div>
    <div class="example-styles___border-right">
    </div>
</div>

example-styles: Revisar la Tabla de Lineamiento de Nombre de Clase en Div Padre en Componente html
example-styles___border-left || example-styles___border-right: Revisar la Tabla de Lineamiento de Nombre de Clase en Divs Hijos en Componente html

Ejemplo: Componente de Estilos Scss y su practica con nombres estandarizados

example-styles.component.scss

$wrap: 'example-styles';
.#{$wrap} {
    display: inline-block;
    & .#{$wrap}___border-left {
        width: 60%;
    }

    & .#{$wrap}___border-right {
        margin: 0px;
        width: 40%;
    }
}

Ejemplo: Componente de Estilos Css y su practica con nombres estandarizados

example-styles.component.css

.example-styles {
    display: inline-block;
}

.example-styles___border-left {
    width: 60%;
}

.example-styles___border-right {
    margin: 0px;
    width: 40%;
}

Lineamientos del uso de TypeScript (Componentes, Clases, Modelos u Otros)

# Paso 1. Tablas de Lineamientos en TypeScript

Tabla de Lineamiento de Nombre de Variables y Métodos en TypeScript

Convención de Nombre	Descripción	Resultado
Upper Camel Case o Camel Case	La primera letra de cada palabra concatenada se pone en mayúsculas e inicia con minúscula.	upperCamelCase

# Paso 2. Ejemplo de Lineamiento de Nombre de Variables y Métodos en TypeScript

Ejemplo: Archivo example.component.ts

example.component.ts

isEnable: boolean = false;

validateFormControl() { }

isEnable || validateFormControl() { }: Revisar la Tabla de Lineamiento de Nombre de Variables y Métodos en TypeScript

Angular

Spring Boot