https://docs.angularjs.org/tutorial/step_00
En este tiene un inicio que es Learn > Tutorial.
En el te comentan que aprenderás lo básico para:
(Además de tu propia web/app que consiste en un catálogo...)
- Ver ejemplos de como trabajar desde el lado del cliente enlazando la vista dinamica con las acciones del usuario.
- Ver como Angular guarda tu vista en sincronia con los datos sin modificar el DOM.
- Aprender el mejor y más rápido camino para testear tus webs app con karma y proactor.
- Aprende rcomo usar dependencias y servios para hacer tareas web como coger datos de tu app.
Cuando terminemos:
Crearemos aplicaciones dinamicas para los navegadores modernos.
Usaremos uniones entre nuestro modelo de datos y nuestra vista.
Crearemos unidades de test con Karma.
Crearemos un end to end test con Proactor.
Recogeremos datos desde nuestro servidor usando Angular.
Aplicaremos animaciones con ngAnimate.
"Aprenderemos a aprende" angular.
Empezamos:
Lo primero que tenemos que hacer es crearnos nuestro entorno de trabajo.
Angular trabaja en este tutorial con GIT, el controlador de versiones.
No nos pide un conocimiento alto de este, más o menos nos enseña un protocolo de trabajo por ramas de una forma superficial. (Sí quereis familiarizaros con GIT, os recomiendo ir a su web, https://git-scm.com/ ) Para lo que lo usaremos vale saber que es un control de versiones que hace el trabajo menos intrusivo copiando cambios y modificaciones por versiones, para poder recuperar alguna de estas en caso de que modifiquemos parte que no quisimos o simplemente para guardar un histórico de la evolución de nuestra web app.
En este caso las instrucciones para trabajar con git se resumen a :
Ir a la web del autor, descargar la última versión, instalarla.
Y el uso de git clone para clonar tu site
y el uso de git checkout para crear ramas de nuestra versión.
(Profundizaremos un poco en este campo más adelante).
Una vez instalado GIT (http://git-scm.com/download) Lee atentamente las instrucciones de instalación.
Correremos en nuestro terminal (CMD, en mi caso).
git clone --depth=14 https://github.com/angular/angular-phonecat.gitCon esto tendremos un un directorio angular-phonegrap en nuestro root c:
Lo que hemos hecho es conectar através de git con angular y hemos clonado una estructura básica dentro de nuestro PC.
El depth=14 le dice a git que recoja sólo los últimos 14 commits.
Sí entramos en angular-phonecat ahora correremos varias instrucciones node.js.
¿Qué es node? Es una plataforma contruida en Chrome`s Javascript runtime JS para los amigos, para crear aplicaciones rápidas y escalables online. Esta plataforma usan un comportamiento de eventos no bloqueante que hacen el modelo más rápido. Para instalarlo: https://nodejs.org/
Básicamente es install, next, next, next... pero recuerda que sí lo haces así puedes vender tu alma al diablo, recomiendo leer cuidadosamente.
Para saber sí tienes node instalado entra en tu terminal y node -v (CMD, en mi caso).
Node tiene muchos pluging de lo más variopinto.
Para lo que nos traemos entre manos va a ser bastante fácil.
Node se deja ayudar de archivitos JSON que fijan las dependencias de cada proyecto.
En este caso entramos en nuestra carpeta de angular-phonecat y tecleamos desde terminal:
npm install.
npm es el que se encarga de la instalación de estos pluging en node. Al decirle que instale, busca el JSON que ya está puesto que lo bajamos desde GIT y magia, se instala todo lo que necesitamos.
En este caso:
Bower (el pajarito) Este chico se encarga http://bower.io/ de algo parecido a npm. Mueve packs de pluggins pero en este caso más vista al cliente.
Http-Server crea un servidor web local estático donde correremos nuestros proyectos.
Karma Con el que correremos los test angular.
Protractor Idem, pero test end to end.
Todo esto se desarrollará más poco a poco.
Una vez hemos corrido el instalador, deberemos tener lo mencionado dentro de nuestra carpeta.
Y tendremos definidas las siguientes tareas para poder empezar a trabajar.
npm start : arranca el servidor localnpm test : testea con karmanpm run protractor : testea con protractornpm run update-webdriver : actualiza protractor.Va todo bien? lo he hecho bien? esto ha funcionado???
Vamos a ver sí vamos por buen camino.
Entra en tu terminal, npm start.
Allright, entra en tu navegador favorito. IE8 supongo.
y...
http://localhost:8000/app/index.htmlVale, lo que ves no es maravilloso, pero funciona no?
Sí no te gusta el puerto yo que sé pq lo usas para cualquier otra cosa, el 8000 no es tu número de la suerte... entra en el package.json y modificalo tú puedes usar -a para todas las direcciones y -p para seleccionar el puerto que estimes mejor.
Testeamos?
npm test jostia se me han abierto un par de ventanas y me dice algo del karma. Correcto, no maltrates gaticos, el karma está actuando.
( No, no me pagan por hacer el payaso) Por hacer tutos tpco. :) Lo que ha pasado es que Karma ha leido nuestro karma.conf.js por lo que:Abre una ventanica de chrome y lo conecta con Karma. Ejecuta todos los test en el navegador.Reporta los resultadoa de estos al terminal en el que lo lanzamos. Watchea todos los JS y los testea cuando se modifican. Como presientes, es bueno tenerlo abierto como tarea de fondo para ir depurando errores. Vamos con el end to end? Cuando lo ejecutemos nos aseguraremos de que la aplcación en su totalidad funciona desde el lado del cliente. Simula a un usuario real en interacción con nuestra app en el navegador. Los test se guardarán en test/e2e.
Vayamos pues...
npm run update-webdriver npm start
npm run protractor Qué ha ocurrido:Abre Chrome, conecta con la apptestea end to end. reporta los resultados en la terminal en la que lo ejecutamos. cierra el navegador y se finaliza. Es bueno testear end to end cando cambies parte de la vista html o quieras ver sí la app funciona correctamente. Lo típico es hacerlo antes de subir un nuevo commit con git al repositorio. Ok! hasta aquí hemos seteado nuestro servidor Local!!! Enhorabuena... NEXT STEP. 
No hay comentarios:
Publicar un comentario