PDF de programación - Desarrollo de una aplicación web con AngularJS para compartir transporte

UNIVERSIDAD POLITÉCNICA DE

CARTAGENA

Escuela Técnica Superior de Ingeniería Industrial























Desarrollo de una aplicación web
para compartir medio de transporte

con AngularJS

TRABAJO FIN DE GRADO

GRADO EN INGENIERÍA ELECTRÓNICA INDUSTRIAL Y

AUTOMÁTICA










Autor: Fco Javier Avilés López

Directores: Diego Alonso Cáceres

Francisco Sánchez Ledesma



Cartagena, 8 de Octubre de 2014





DESARROLLO DE UNA APLICACIÓN WEB CON ANGULARJS PARA COMPARTIR TRANSPORTE -

CONTENIDO

CONTENIDO

2.1

3.3

3.4

2.2

3.1
3.2

Introducción ............................................................................................................................. 4
1.1 Motivaciones ................................................................................................................... 4
Objetivos .......................................................................................................................... 5
1.2
1.3
Estructura del documento ............................................................................................... 5
Estado de la técnica ................................................................................................................. 6
LADO SERVIDOR ............................................................................................................... 6
2.1.1 PHP .............................................................................................................................. 6
JAVA JSF ....................................................................................................................... 8
2.1.2
LADO CLIENTE ................................................................................................................ 10
2.2.1 EmbedJS ..................................................................................................................... 10
2.2.2 BackboneJS ................................................................................................................ 10
2.2.3
jQuery Mobile ............................................................................................................ 11
Tecnologías utilizadas ............................................................................................................ 12
HTML ............................................................................................................................. 12
CSS ................................................................................................................................. 14
3.2.1 Bootstrap ................................................................................................................... 17
Javacript ......................................................................................................................... 18
3.3.1 Uso en páginas web ................................................................................................... 18
3.3.2 ¿Dónde puedo ver funcionando Javascript? ............................................................. 20
AngularJS ....................................................................................................................... 21
3.4.1 Data Binding en AngularJS ......................................................................................... 22
3.4.2 Modulos ..................................................................................................................... 22
3.4.3 Scopes ........................................................................................................................ 23
3.4.4 Controladores ............................................................................................................ 23
3.4.5 Directivas ................................................................................................................... 24
3.4.6 Directivas y Scopes .................................................................................................... 26
3.4.7 Filtros ......................................................................................................................... 26
3.4.8 Services ...................................................................................................................... 28
3.4.9 Eventos ...................................................................................................................... 31
Promesas ............................................................................................................... 32
3.4.10

1

1

2

3



DESARROLLO DE UNA APLICACIÓN WEB CON ANGULARJS PARA COMPARTIR TRANSPORTE -

CONTENIDO

3.5

3.4.11 Multiple Views and Routing .................................................................................. 33
FireBase ......................................................................................................................... 35
3.5.1 Bases de datos NoSQL ............................................................................................... 35
3.5.2 Crear una cuenta ....................................................................................................... 37
Instalar Firebase ........................................................................................................ 38
3.5.3
3.5.4
Leer y escribir desde Firebase ................................................................................... 38
3.5.5 Añadiendo autenticación .......................................................................................... 39
3.5.6 Seguridad en Firebase ............................................................................................... 39
3.5.7 Bindings ..................................................................................................................... 40
3.5.8 FirebaseSimpleLogin .................................................................................................. 40
3.5.9 FireBase y AngularJS: AngularFire ............................................................................. 41
Casos de Uso .......................................................................................................................... 46
4.1
Registro .......................................................................................................................... 47
4.2
Login .............................................................................................................................. 48
4.3 Mis coches ..................................................................................................................... 49
4.4
Nuevo coche .................................................................................................................. 50
Buscar coche .................................................................................................................. 51
4.5
Administrar coches seleccionados ................................................................................ 52
4.6
4.7
Perfil del usuario ............................................................................................................ 53
Logout ............................................................................................................................ 54
4.8
Implementación de la aplicación ........................................................................................... 55
Index.html ...................................................................................................................... 55
app.js ............................................................................................................................. 59
controllers.js .................................................................................................................. 61
'profileController' ...................................................................................................... 61
'loginController' ......................................................................................................... 63
'myCarsController' ..................................................................................................... 64
'chosenCarsController' .............................................................................................. 66
'carController' ............................................................................................................ 68
'lookingController' ..................................................................................................... 70
services.js ....................................................................................................................... 73
rootScope ...................................................................................................................... 77
Directivas más utilizadas ............................................................................................... 79
2

5.3.1
5.3.2
5.3.3
5.3.4
5.3.5
5.3.6

5.1
5.2
5.3

5.4
5.5
5.6

4

5



DESARROLLO DE UNA APLICACIÓN WEB CON ANGULARJS PARA COMPARTIR TRANSPORTE -

CONTENIDO

5.7
5.8

5.6.1 Ng-view ...................................................................................................................... 79
5.6.2 Ng-controller ............................................................................................................. 79
5.6.3 ng-show/ng-hide ....................................................................................................... 79
5.6.4 ng-if ............................................................................................................................ 80
5.6.5 ng-repeat ................................................................................................................... 80
5.6.6 n