Angular

Sesión 1

Martha Avella
2020 - I
Concepto
• Angular es una plataforma que
permite desarrollar aplicaciones
web en la sección cliente usando
HTML y JavaScript (TypeScript)
– Aplicaciones en web mas rápidas
– Mantenido por Google
– Aplicaciones SPA( Single- page –
application)
– Rendimiento optimizado para
aplicaciones móviles- hibridas con
Ionic
Características
Componentes

Maneja el Orientado a
Bootstrap Objetos

No requiere
refrescar la
página
Para crear
aplicaciones Patrón MVC
web

TypeScript
Características
Inyección de dependencias
• Es un patrón de diseño en el que una clase requiere
instancias de una o más clases y en vez de generarlas
dentro de su propio constructor, las recibe ya
instanciadas por un mecanismo externo
• => Reduce el acoplamiento
Lazy SPA
• Es una técnica usada en Angular que nos permite
cargar sólo, el o los componentes que necesitemos al
inicio de nuestra aplicación, estos componentes no
cargan cada vez que entres, sino que solo cargan una
sola vez
• https://www.campusmvp.es/recursos/post/las-10-principales-diferencias-entre-angularjs-y-angular.aspx
Ver detalle en foro del campus
 Enrutador

Componentes Servicios
MVC
SPA
• Que es una aplicación web?
• Toda aplicación proporcionada por un servidor
web y usada por sus clientes a través de un
navegador
Arquitectura Página web
Tipos Aplicaciones Web
• Cliente y servidor estáticos
Tipos Aplicaciones Web
• Cliente estático y servidor dinámico
Tipos Aplicaciones Web
• Cliente y servidor dinámico: Pagina web
incluye Javascript
Patrones de Diseño
• MPA Multi page web applications
• SPA
Patrones de Diseño

• Funcional • Evolución de MPA + Ajax

• Lentitud • Se carga una página
• Ajax - Asíncrona • Se modifica desde el cliente
FrameWorks
FrameWorks
Instalación
• Node.js
https://nodejs.org/es/download/
• TypeScript
• npm install –g typescript
• Angular-Cli
• npm install –g @angular/cli
• Google Chrome
• Atom / Visual Studio Code
• https://www.campusmvp.es/recursos/post/visual-studio-
code-angular-como-montar-un-entorno-de-desarrollo-
productivo-para-este-framework.aspx
Instalación
Instalación
Versión Nodejs
TypeScript Que es ?
• Es un lenguaje de programación de código abierto
desarrollado por Microsoft, el cual cuenta con
herramientas de programación orientada a objetos,
muy favorable si se tienen proyectos grandes.
• TypeScript convierte su código en Javascript común. Es
llamado también Superset de Javascript, lo que
significa que si el navegador está basado en Javascript,
este nunca llegará a saber que el código original fue
realizado con TypeScript y ejecutará el Javascript como
lenguaje original.
Hola Mundo
HolaMundo.ts
var texto:string=“Hola Mundo”
console.log(texto)

Comandos
> tsc HolaMundo.ts //compila
> node HolaMundo
«No se puede cargar el archivo XXXX.ps1 porque en el sistema está deshabilitada la ejecución de scripts.
Vea «get-help about_signing» para obtener más información

• Por tanto, el error es que en el sistema esta

deshabilitada la ejecución de scripts. Si
abrimos el Windows
PowerShell como administrador y ejecutamos
el comando «Get-ExecutionPolicy» nos
tendría que devolver «Unrestricted» o lo que
es lo mismo «Restringido». Para cambiar esta
configuración basta con ejecutar «Set-
ExecutionPolicy Unrestricted».