PDF de programación - Angular + TypeScript

Imágen de pdf Angular + TypeScript

Angular + TypeScriptgráfica de visualizaciones

Publicado el 24 de Mayo del 2021
553 visualizaciones desde el 24 de Mayo del 2021
787,4 KB
250 paginas
Creado hace 3a (25/06/2018)
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:[email protected]:port

git config --global https.proxy http://username:[email protected]: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:[email protected]:port

npm config set https-proxy http://username:[email protected]: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 = [];
  • Links de descarga
http://lwp-l.com/pdf19228

Comentarios de: Angular + TypeScript (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad