Esta aplicación lleva al desarrollador a través del proceso de construir una aplicación-web utilizando angular. La aplicación está inspirada en Google Phone Gallery, la cual ya no existes. Aquí está una referencia histórica: Google Phone Gallery on WayBack.
Cada commit etiquetado es una lección separada que enseña un solo aspecto de angular.
El tutorial completo lo puedes encontrar en http://docs.angularjs.org/tutorial.
- Un buen lugar para aprender como instalar y configurar git es aquí
- Git inicio (descarga, documentación)
- Obten Node.js.
- Instala la herramienta de dependencias (
npm install
)
- La estructura de archivos de la aplicación está basada en el proyecto angular-seed.
- No hay un backend dinámico (no hay un servidor de applicación) para esta ap. En lugar de ello fingimos
un servidor de applicación al obtener archivos json estáticos. - Lee la sección de Desarrollo al final para familiarizarte con el funcionamient y desarrollo de una aplicación de angular.
Puedes hacer check out cualquier punto del tutorila usando git checkout paso-?
Para ver los cambios entre dos lecciones cualquiera usa el comando git diff. git diff paso-?..paso-?
- Agrega directiva ngApp para arrancar la ap
- Agrega una plantilla simple con una expresión
- Agrega una lista html estática con dos teléfonos en index.html. Convertiremos esta página estática en una dinámica con alluda de angular.
- Convierte la lista html estática en una dinámica al:
- crear controlador
ListaTelefonosCtrl
para la aplicación - extraer los datos del HTML y moverlos dentro del controlador como en un set de datos en-memoria.
- convertir el documento HTML estático en una plantilla de Angular con el uso de la directiva
ngRepeat
la cual itera el set de datos de teléfonos.ngRepeat
clona su contenido por cada instancia in el set de datos y and y los representa en la vista.
- crear controlador
- Agrega una prueba unitaria simple para exhibir como escribir tests y correrlos con Karma
- Agrega una caja de búsqueda para demostrar como:
- el enlace de datos (data-binding) funciona en cajas de texto.
- usar el filtro
filter
. ngRepeat
automáticamente encoge y crece el número de teléfonos en la vista.
- Y una prueba de end-to-end para:
- mostrar como se escriben las pruebas de end-to-end y como correrlas con Protractor.
- provear que la caja de búsqueda y el repetidor están conectados entre si correctamente.
- Agrega la propiedad
age
a cada teléfono en el modelo de datos. - Agrega una combo
<select>
para cambiar el orden de la lista de teléfonos. - Sobreescribe el valor del orden por defecto en el controlador.
- Agrega pruebas unitarias y e2e tests para esta funcionalidad.
- Reemplaza los datos en memoria por datos cargados desde el servidor (en
forma de archivo estático
phones.json
).- El archivo
phones.json
se carga utilizando el servicio$http
.
- El archivo
- Demuestra el uso de [servicios][service] e inyección de dependencias.
- El servicio [$http] se inyecta en el controlador a través la inyección de dependencias.
- Agrega imágenes de teléfono y links a nuevas páginas que muestran el detalle del teléfono.
- Agrega pruebas de end2end que verifican que los links a las páginas del detalle.
- Agrega CSS solo un poco de estilo a la página.
-
Introduce el servicio $route el cual permite enlazar URLs para un deep-linking con las vistas:
- Crea
PhoneCatCtrl
el cual govierna la aplicación entera y contiene la configuración de $route. - Instala
angular-route
usando bower y carga el módulongRoute
. (Asegúrate de correr npm install otra vez.) - Copia los parámetros de ruta a la propiedad
params
en el scope raiz para accesarlo en sub controladores. - Reemplaza el contenido de
index.html
por la directivangView
, la cual desplegará la plantilla parcial template de la ruta actual.
- Crea
-
Crea la ruta de lista de teléfonos:
- Mapea la ruta
/telefonos
aListaTelefonosCtrl
ypartails/lista-telefonos.html
. - Preserva el controlador existente
ListaTelefonosCtrl
. - Mueve html existente de
index.html
apartials/lista-telefonos.html
.
- Mapea la ruta
-
Crea la ruta del detalle de teléfono:
- Mapea la ruta
/telefonos/<id-telefono>
aDetalleTelefonoCtrl
ypartails/detalle-telefono.html
. - Crea un controlador vacio
DetallesTelefonoCtrl
.
- Mapea la ruta
- Implementa el controlador
DetalleTelefonoCtrl
para traer los detalles de un teléfono específico de un archivo JSON utilizando el servicio$http
. - Actualiza la plantilla de la vista del detalle de un teléfono.
- Agrega CSS para hacer que la vista de los detalles de un teléfono se vea "bonita".
- Agrega un filtro personalizado
checkmark
. - Actualiza la plantilla del detalle del teléfono para utilizar el filtro
checkmark
. - Agrega prueba unitaria para el filtro.
En la vista del detalle de teléfono, al darle click a una imagen miniatura, cambia la imagen principal por una imagen más grande la imagen mineatura.
- Define el modelo variable
urlImagenPrincipal
enDetalleTelefonoCtrl
y setea su valor por defecto. - Crea el método de controlador
setImagen()
para cambiarurlImagenPrincipal
. - Registra una exprecion con la directiva
ngClick
en las imágenes mineatura para setear la imagen principal, usandosetImagen()
. - Agrega pruebas de e2e para es funcionalidad.
- Agrega CSS para cambiar el cursor del mouse cuando el usuari apunta a una imagen miniatura.
- Reemplaza [$http] por $resource.
- Crea un servicio personalizado
Telefono
que representa el cliente$resource
.
- Agrega animaciones a la aplicación:
- Anima cambios a la lista de teléfonos, agregando, removiendo y reordenando teléfonos.
- Anima cambios a la imagen principal en la vista del detalle de teléfono.
La siguiente doc describe como puedes probar y desarrollar esta aplicación.
La aplicación depende de varias herramientas de node.js, tales como Bower, Karma y Protractor. Puedes instalarlas corriendo:
npm install
Esto también correrá bower, el cual descargará los archivos de angular necesarios para el paso actual del tutorial.
La mayoría de los scripts descritos a continuación will correrán esto automáticamente pero no hace ningún daño correrlos Cuando gustes.
- Corre
npm start
- navega tu browser a
http://localhost:8000/app/index.html
para ver la ap corriendo en tu navegador.
Te recomendamos usar Jasmine y Karma para tus pruebas/specs unitarias, pero eres libre de usar lo que funcione para ti.
- Inicia Karma con
npm test
- Un navegador se iniciará y conectará al servidor de Karma. Chrome is navegador por defecto, otros pueden
ser capturados cargando la misma url de Chrome o cambiando el archivo
test/karma.conf.js
.
- Un navegador se iniciará y conectará al servidor de Karma. Chrome is navegador por defecto, otros pueden
ser capturados cargando la misma url de Chrome o cambiando el archivo
- Karma se sentará y observará tu aplicación y los archivos JavaScript de pruebas. Para correr o reiniciar las pruebas solo cambia cualquiera de tus archivos.
Te recomendamos usar Jasmine y Protractor para pruebas de end-to-end.
Require un servidor web que sirva la aplicación. Vee Correr la aplicación durante desarrollo, arriba.
- Servidor de aplicación: corre
npm start
. - En una consola a parte corre las pruebas de end2end:
npm run protractor
. Protractor ejecutará los scripts de
pruebas de end2end conta la aplicación web misma.- La configuración está diseñada ára correr las pruebas directamente en Chrome. Si quieres correrlas contra
otro navegador entonces tienes que instalar el webDriver,
npm run update-webdriver
, y modificar la configuración entest/protractor-conf.js
.
- La configuración está diseñada ára correr las pruebas directamente en Chrome. Si quieres correrlas contra
otro navegador entonces tienes que instalar el webDriver,
app/ --> todos los archivos que serán usados en producción
css/ --> archivos css
app.css --> hoja de estilo por defecto
img/ --> archivos de imágenes
index.html --> archivo layout de la ap (la plantilla html principal de la ap)
js/ --> archivos javascript
ap.js --> módulo principal de la aplicación
controladores.js --> controlladores de la aplicación
directivas.js --> directivas de la aplicación
filtros.js --> filtros de la aplicación
servicios.js --> services personalizados de la aplicación
animations.js --> ganchos para correr animaciones de JQuery con ngAnimate
partials/ --> vistas parciales de angular (plantillas html parciales) utilizadas por ngRoute
partial1.html
partial2.html
bower_components --> librerías js, incluyendo angular y jquery
scripts/ --> scripts prácticos
update-repo.sh --> descarga la última versión de este repo
(TEN CUIDADO ESTO ELIMINARA TODOS LOS CAMBIOS QUE HAYAS HECHO)
test/ --> archivos fuentes de las pruebas y librerías
karma.conf.js --> archivo de configuración para correr las pruebas unitarias con Karma
protractor-conf.js --> archivo de configuración para correr las pruebas de e2e con Protractor
e2e/
scenarios.js --> end-to-end specs
unit/ --> specs/pruebas por nivel de unidad
controladoresSpec.js --> specs para controladores
directivasSpec.js --> specs para directivas
filtrosSpec.js --> specs para filtros
serviciosSpec.js --> specs para servicios
Para más información acerca de AngularJS por favor visite http://angularjs.org/