Scribd
Cargar
180 vistas

Tutorial Angular

Este documento proporciona instrucciones para instalar varias herramientas y tecnologías necesarias para desarrollar aplicaciones web modernas, como Visual Studio Code, Node.js, Angular CLI, MongoDB Compass y Git. También explica conceptos básicos de TypeScript como tipos de datos, objetos, funciones y Angular como un marco de trabajo modular que utiliza componentes, servicios, directivas y rutas.

Cargado por

estefani zavala
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
180 vistas

Tutorial Angular

Este documento proporciona instrucciones para instalar varias herramientas y tecnologías necesarias para desarrollar aplicaciones web modernas, como Visual Studio Code, Node.js, Angular CLI, MongoDB Compass y Git. También explica conceptos básicos de TypeScript como tipos de datos, objetos, funciones y Angular como un marco de trabajo modular que utiliza componentes, servicios, directivas y rutas.

Cargado por

estefani zavala
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 17

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 user.name “Tu nombre”

git config --global user.email “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 settings.json
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’];
habilidades.push(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];
}
Personaje.puebloNatal= ‘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

personaje.puebloNatal= 'San felipe’;

c. Funciones básicas
function sumar(a, b){
return a + b;
}

const resultado = sumar(‘fany’.’zavala’);


console.log(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. tslint.json
reglas para el typescript
tsconfig.json
como quiere que funcione typescript en el proyecto.
tsconfig.espec.json
relacionado con la pruebas unitarias o de integración
tsconfig.app.json
readme.md
tipo de código que se puede ver como html
package.json
es un archivo delicado y no se debe de modificar usualmente se puede utilizar mediante
comandos, habla sobre dependencias.
package-lock.json
habla sobre como se construyo los modulos de node
karma.config
configuración para las pruebas unitarias
angular.json
archivo importante configuraciones importantes
assets – recursos estáticos
gitignore
archivos que no se quiere que git le de seguimiento
editor.config
reglas para archivos de configuración
browserlist.trc
por si necesita incrementar a navegadores viejos
Archivos del src
Abre la carpeta app
app.component.html
Lo que el usuario está viendo
app.component.css
estilos
app.component.spect.ts
archivo de pruebas
app.component.ts
archivo de typescript
app.module.ts
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
main.ts
este archivo usualmente nunca se toca
polyfill.ts
archivo que ayuda a tener compatibilidad con otro navegador web
styles.css
archivo de estilos global
test.ts
configuración de ambiente de pruebas

3. Componentes
@component({
select: ‘app-root’,
templateUrl: ‘app.component.html’
})
export class AppComponent{
titulo : string = ‘App’
}
app.component.html -> <h1> {{ title }} </h1>

También podría gustarte