PDF de programación - Angular + TypeScript

Angular

+

TypeScript

Temario
Temario

Introducción a Angular
Entorno de desarrollo
Javascript moderno
Introducción a TypeScript
Primeros pasos en Angular
Modelos, componentes y vistas
Servicios
Formularios
Acceso al servidor
Enrutamiento y navegación
Despliegue a producción

Introducción a
Introducción a

Angular
Angular

¿Qué es Angular?

¿Qué es Angular?

Framework JS

¿Qué es Angular?

Framework JS
SPA: Single Page Applications

¿Qué es Angular?

Framework JS
SPA: Single Page Applications
TypeScript

¿Qué es Angular?

Framework JS
SPA: Single Page Applications
TypeScript
Código fuente y código compilado

¿Qué es Angular?

Framework JS
SPA: Single Page Applications
TypeScript
Código fuente y código compilado
¿Angular 2? ¿6? ¿AngularJS?

Entorno de
Entorno de
desarrollo
desarrollo

Entorno de desarrollo

Entorno de desarrollo

IDE: Visual Studio Code

Entorno de desarrollo

IDE: Visual Studio Code
Git

Entorno de desarrollo

Visual Studio Code

IDE:
Git
NodeJS

y npm

GitGit

Comandos básicos

Comandos básicos

Clonar un repositorio:

    git clone URL
 

Comandos básicos

Clonar un repositorio:

    git clone URL
 
Descargar última versión del repositorio:

    git pull origin master

Configuración proxy

git config --global http.proxy http://username:password@host:port

git config --global https.proxy http://username:password@host:port

Node.js y npm
Node.js y npm

npm

npm

Instalar última versión después de instalar Node.js
(configurar proxy si es necesario)

npm

Instalar última versión después de instalar Node.js
(configurar proxy si es necesario)
Repositorio de módulos distribuibles

npm

Instalar última versión después de instalar Node.js
(configurar proxy si es necesario)
Repositorio de módulos distribuibles
Módulos globales y módulos locales

npm

Instalar última versión después de instalar Node.js
(configurar proxy si es necesario)
Repositorio de módulos distribuibles
Módulos globales y módulos locales
La carpeta node_modules

npm

Instalar última versión después de instalar Node.js
(configurar proxy si es necesario)
Repositorio de módulos distribuibles
Módulos globales y módulos locales
La carpeta node_modules
El archivo package.json:

npm

Instalar última versión después de instalar Node.js
(configurar proxy si es necesario)
Repositorio de módulos distribuibles
Módulos globales y módulos locales
La carpeta node_modules
El archivo package.json:

Registro de dependencias

npm

Instalar última versión después de instalar Node.js
(configurar proxy si es necesario)
Repositorio de módulos distribuibles
Módulos globales y módulos locales
La carpeta node_modules
El archivo package.json:

Registro de dependencias
Dependencias de desarrollo y de producción

npm

Instalar última versión después de instalar Node.js
(configurar proxy si es necesario)
Repositorio de módulos distribuibles
Módulos globales y módulos locales
La carpeta node_modules
El archivo package.json:

Registro de dependencias
Dependencias de desarrollo y de producción
Versiones (SEMVER)

Comandos npm

Comandos npm

Instalar un paquete globalmente:
    npm install -g paquete

Comandos npm

Instalar un paquete globalmente:
    npm install -g paquete
Instalar un paquete de producción:
    npm install paquete

Comandos npm

Instalar un paquete globalmente:
    npm install -g paquete
Instalar un paquete de producción:
    npm install paquete
Instalar un paquete de desarrollo:
    npm install paquete --save-dev

Comandos npm

Instalar un paquete globalmente:
    npm install -g paquete
Instalar un paquete de producción:
    npm install paquete
Instalar un paquete de desarrollo:
    npm install paquete --save-dev
Instalar todas las dependencias:
    npm install

Comandos npm

Instalar un paquete globalmente:
    npm install -g paquete
Instalar un paquete de producción:
    npm install paquete
Instalar un paquete de desarrollo:
    npm install paquete --save-dev
Instalar todas las dependencias:
    npm install
Instalar las dependencias de producción:
    npm install --production

Comandos npm

Instalar un paquete globalmente:
    npm install -g paquete
Instalar un paquete de producción:
    npm install paquete
Instalar un paquete de desarrollo:
    npm install paquete --save-dev
Instalar todas las dependencias:
    npm install
Instalar las dependencias de producción:
    npm install --production
Listar paquetes instalados:
    npm list --depth=0        (locales)
    npm list -g --depth=0   (globales)

Configuración proxy

npm config set proxy http://username:password@host:port

npm config set https-proxy http://username:password@host:port

JavaScript
JavaScript

JavaScript

JavaScript

Interpretado, compilado y ejecutado en el navegador

JavaScript

Interpretado, compilado y ejecutado en el navegador
Cada navegador programa su propio motor de JS

JavaScript

Interpretado, compilado y ejecutado en el navegador
Cada navegador programa su propio motor de JS
Estandarización: ECMAScript

JavaScript

Interpretado, compilado y ejecutado en el navegador
Cada navegador programa su propio motor de JS
Estandarización: ECMAScript
La versión ES6 o ES2015

JavaScript

Interpretado, compilado y ejecutado en el navegador
Cada navegador programa su propio motor de JS
Estandarización: ECMAScript
La versión ES6 o ES2015
Transpiladores: Babel, TypeScript

JavaScript

Interpretado, compilado y ejecutado en el navegador
Cada navegador programa su propio motor de JS
Estandarización: ECMAScript
La versión ES6 o ES2015
Transpiladores: Babel, TypeScript

Organización del código JavaScript

Organización del código JavaScript

Ejemplo de uso clásico de JS: utilizar un plugin de
jQuery en nuestra web, o implementar alguna
interacción con el usuario

Organización del código JavaScript

Ejemplo de uso clásico de JS: utilizar un plugin de
jQuery en nuestra web, o implementar alguna
interacción con el usuario
Pocas líneas de código, todas en un mismo archivo

Organización del código JavaScript

Organización del código JavaScript

<head>
<meta charset="UTF-8">
<title>Mi web</title>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="js/tabs.js"></script>
</head>

24 líneas

Organización del código JavaScript

<head>
(function($) {
<meta charset="UTF-8">

<title>Mi web</title>
$(document).ready(function() {
<script src="vendor/jquery/jquery.min.js"></script>

<script src="js/tabs.js"></script>
// Al hacer clic en una pestaña
</head>
$(".tab a").on("click", function(e) {
// Anulamos el link
e.preventDefault();

// Ocultamos todos los bloques de contenido
// y mostramos sólo el que se ha elegido
var content_id = $(this).attr("href");
$(".tab-content").hide();
$(content_id).show();

// Desmarcamos la pestaña que estuviera activa
// y marcamos la clicada como activa
$(".tab.active").removeClass("active");
$(this).closest(".tab").addClass("active");
})

})

})(jQuery);

Organización del código JavaScript

Organización del código JavaScript

<head>
<meta charset="UTF-8">
<title>Mi web</title>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="js/ui.js"></script>
</head>

Organización del código JavaScript

75 líneas

<head>
(function($) {
<meta charset="UTF-8">

<title>Mi web</title>
$(document).ready(function() {
<script src="vendor/jquery/jquery.min.js"></script>
$(document).on('click', '.tab_new', offerGroupSwitchTabs);
<script src="js/ui.js"></script>
$(document).on('click', '.navigationServices-li', jumpTo);
</head>
$('.load-more_new').on('click', loadMore).each(function() {
$(this).data('main', $(this).text());
});
})

var loadMore = function(e) {
e.preventDefault();
var $list = $(this).prev('.promos-list_new');
var button_text = $(this).data('main');
var button_alt_text = $(this).data('alt');
if ($(window).width() > 992) {
var hidden_classes = ".hidden";
var $hidden = $list.find(hidden_classes);
var n_show = 3;
} else if ($(window).width() > 768) {
var hidden_classes = ".hidden, .hidden-sm";
var $hidden = $list.find(hidden_classes);
var n_show = 2;
} else {
var hidden_classes = ".hidden, .hidden-sm, .hidden-xs";
var $hidden = $list.find(hidden_classes);
var n_show = 1;

Organización del código JavaScript

Organización del código JavaScript

Programar toda la UI de una página

Organización del código JavaScript

Programar toda la UI de una página

(function() {
var width = window.innerWidth;
var height = window.innerHeight;
var timerID = 0;
var c = document.getElementById('canvas')
var ctx = c.getContext('2d');
c.width = width;
c.height = height;


var speed = 10;
var size = 8;
var boids = [];
var totalBoids = 150;

var init = function(){

for (var i = 0; i < totalBoids; i++) {

boids.push({
x: Math.random() * width,
y: Math.random() * height,
v: {

Organización del código JavaScript

Programar toda la UI de una página

(function() {
var width = window.innerWidth;
var height = window.innerHeight;
var timerID = 0;
var c = document.getElementById('canvas')
var ctx = c.getContext('2d');
c.width = width;
c.height = height;


var speed = 10;
var size = 8;
var boids = [];