INSTALACIONES
Estefani Guadalupe Monje Zavala
GDS0352
Visual Studio Code
Postman
Programa que sirve para hacer pruebas y documentación con los end points, así como con la
grabación del repositorio.
Nodemon
MapBox
MongoDB Compass
Nos va ayudar con nuestra base de datos.
Git
Mantener nuestro repositorio y subirlo.
Teclear en la consola git –version
Crear cuenta en GitHub
Registrarse en git.
Ayudará a clonar desplegar mantener un backup de los repositorios.
git config --global [Link] “Tu nombre”
git config --global [Link] “Tu correo”
Node js
Instalación de las extensiones recomendadas para Visual Studio Code:
● Bracket Pair Colorizer 2
Ingresa a menú Code -> Preferencias-> Seetings -> opción Edit in [Link]
en cualquier parte del json agregar lo siguiente:
● Monokai Night
Tema para Visual Studio Code
● Material Icon Theme
Pulsar opción Set File Icon Theme.
● Instalaciones recomendadas de Visual Studio Code propias para Angular:
Angular Snippets.
Angular Language Service.
Angular2-inline.
Auto Close Tag.
Type Script Importer.
Instalación de Angular CLI
-g significa que quiero estar angular de forma global.
1. Abrir la consola en modo administrador.
2. En Linux poner la siguiente línea de comando:
Solicitará contraseña del equipo al momento de ingresarla comenzará la instalación.
CLI nos ayudará a generar la aplicación, generar componentes, directivas, servicios, pipes, etc.
3. Una vez que termine la instalación en la línea de comando teclear el comando ng –version.
4. Deberá de aparecer la siguiente pantalla:
TypeScript
Es un super set de javascript se conoce como superset debido a que es el mismo javascript pero le
extiende características pero también tiene propiedades propias de typescript mejorando o
expandiendo más el lenguaje de programación, Microsoft mantiene typescript, un archivo se
identifica por su extensión si es .ts se trata de un archivo typescript.
- Es un superset de javascript.
- Ofrece tipado estricto y flexible.
- Mejora enormemente la legibilidad del código.
- Permite usar características modernas.
Caracteristicas
Tipado estricto .- Nos ayuda a saber como funcionan las cosas
Ayuda instantánea de funciones y métodos.
Mejora enormemente el intellisene
Introducción a Typescript
1. Descargar el archivo de proyecto.
2. Abrirlo con VS Code
3. En la ventana de consola ejecutar npm install
a. Esta opción instalará los componentes necesarios para ejecutar como
servidor.
4. En la carpeta NPM SCRIPT pulsar el botón play de la opción START.
a. Si no se encuentra solo dar click derecho en el explorador y agregar.
b. Aparecerá la siguiente ventana:
Y al inspeccionar elementos aparecerá lo siguiente:
a. Tipos básicos
let nombre: string = 'fany';
let pila: number | string = 95;
const
b. Objetos, arreglos e interfaces
let habilidades = [];
any – no es buena practica usar, se puede almacenar lo que sea.
let habilidades = [1, ‘hola’, [] ]; //erroneo
let habilidades = [‘Bash’,’Counter’,’Healing’];
[Link](valor);
let habilidades = [‘Bash’,’Counter’,’Healing’, 100]; Typescript lo acepta y muestra
ambos tipos de datos
Si no se especifica el tipo de dato typescript lo infiere.
let habilidades: (boolean | string | number) [] = [‘Bash’,’counter’,’healing’,100];
OBJETOS
const personaje = {
nombre = ‘fany’,
pila= 100,
habilidades: [‘Bash’,’Counter’,’Healing’, 100];
}
[Link]= ‘San felipe’;
Esta propiedad es parte del objeto personaje es necesaria pero no esta definida
desde el principio.
const personaje: any = {
nombre = ‘fany’,
pila= 100,
habilidades: [‘Bash’,’Counter’,’Healing’, 100];
} //el usar any es erroneo
Para trabajar con objetos podemos definir una interface, es una seri de llaves es
para asegurar que un objeto luzca como nosotros queramos.
Interface Personaje {
nombre = string;
pila= number;
habilidades: string[];
puebloNatal?= string;
}
const personaje: = {
nombre = ‘fany’,
pila= 100,
habilidades: [‘Bash’,’Counter’,’Healing’, 100];
} //el usar any es erroneo
[Link]= 'San felipe’;
c. Funciones básicas
function sumar(a, b){
return a + b;
}
const resultado = sumar(‘fany’.’zavala’);
[Link](resultado);
Se le puede asignar el tipo de dato a los argumentos
function sumar(a:number, b:number){
return a+b;
return (a+b).toString();
}
Obligar el tipo de retorno
function sumar(a:number, b:number) : number{
return (a+b);
}
Transformar a función de flecha
const sumarFlecha = (a:number,b:number):number =>{
Return a+b;
}
Otros argumentos a enviar y que sean obligatorios
Primero van los argumentos obligatorios, luego los opcionales y después los
valores por default
function multiplicar( numero:number, otronumero?:number, base:number =
2):number{
return numero * base;
}
const resultado = multiplicar(10,20);
//const resultado = multiplicar(10,0,10);
ANGULAR
Marco de trabajo estandarizado
Viene con todo lo que se necesita para trabajar, con una aplicación viene completo
Es modular, estos módulos tienen objetivos específicos
Google le da mantenimiento
Componentes
Segmento de código que tiene una parte de HMTL y su segmento de typescript que
usualmente es una clase.
Servicios
Pueden utilizarse de tal manera que no se pueden usar con REDOX son singleton que
permiten trabajar con la información centralizada.
Directivas
Hay 3 tipos de directivas:
● De componentes
Muy parecido a un componente Cuenta con un pedazo de código html reutilizable.
● Estructurales
Modificar el dom o el html añadiendo o remiviendo elementos
● Atributos
Cambia la apariencia de un elemento
Rutas
Mostrar diferentes componentes basados en el URL del navegador web
Modulos
Permiten agrupar todos los conceptos que se han hablado inclusive otros módulos.
Ya se encuentra componente creados para generar por ejemplo calendarios se descargan
módulos y se cuenta con la funcionalidad lista.
1. Crear proyectos de Angular
1. Escritorio crear una carpeta que contenga los proyectos.
2. ng new bases
a. primero se pregunta si se desea el chequeo de tipos Y
b. incorporar el angular routing (archivo de configuración de rutas – N
c. Que tipo de estilo – CSS
d. Renombrar como 01-bases y abrir con VS Code.
e. Ejecutar el siguiente comando cd 01-bases
f. ng serve -o
2. Explicar cada archivo y directorio de un proyecto
a. [Link]
reglas para el typescript
[Link]
como quiere que funcione typescript en el proyecto.
[Link]
relacionado con la pruebas unitarias o de integración
[Link]
[Link]
tipo de código que se puede ver como html
[Link]
es un archivo delicado y no se debe de modificar usualmente se puede utilizar mediante
comandos, habla sobre dependencias.
[Link]
habla sobre como se construyo los modulos de node
[Link]
configuración para las pruebas unitarias
[Link]
archivo importante configuraciones importantes
assets – recursos estáticos
gitignore
archivos que no se quiere que git le de seguimiento
[Link]
reglas para archivos de configuración
[Link]
por si necesita incrementar a navegadores viejos
Archivos del src
Abre la carpeta app
[Link]
Lo que el usuario está viendo
[Link]
estilos
[Link]
archivo de pruebas
[Link]
archivo de typescript
[Link]
módulo de clientes
assets
utilizado para usar recursos
environments
angular de manera automática nos permite tener un lugar para variables de entorno de
desarrollo o producción
[Link]
este archivo usualmente nunca se toca
[Link]
archivo que ayuda a tener compatibilidad con otro navegador web
[Link]
archivo de estilos global
[Link]
configuración de ambiente de pruebas
3. Componentes
@component({
select: ‘app-root’,
templateUrl: ‘[Link]’
})
export class AppComponent{
titulo : string = ‘App’
}
[Link] -> <h1> {{ title }} </h1>