Diapositivas de la ponencia para la WordCamp Santander 2016 en el Palacio de la Magdalena. Aplicación demo: https://www.angularseries.com Github: https://github.com/marcelotena/wcsantander16-demo Twitter: https://twitter.com/MarceloTena

1. Aplicaciones
web con AngularJS
y la WP REST API
@marcelotena
#WCSantander

2. #1
La aplicación

3. https://github.com/marcelotena/wcsantander16-demo
https://www.angularseries.com/

4. https://github.com/marcelotena/wcsantander16-demo
https://www.angularseries.com/

5. https://github.com/marcelotena/wcsantander16-demo
https://www.angularseries.com/
Aplicación de página única

6. https://github.com/marcelotena/wcsantander16-demo
https://www.angularseries.com/
Aplicación de página única
Enfoque por componentes

7. https://github.com/marcelotena/wcsantander16-demo
https://www.angularseries.com/
Aplicación de página única
Enfoque por componentes
Tema para WordPress

8. https://github.com/marcelotena/wcsantander16-demo
https://www.angularseries.com/
Aplicación de página única
Enfoque por componentes
Tema para WordPress
Datos desde dos APIs

9. #2
WordPress,
plugins y la
REST API

10. Primeros pasos
https://codex.wordpress.org/Theme_Development

11. Primeros pasos
1. Servidor local con Apache, MySQL y PHP:
Ejemplos: MAMP, WAMP, LAMP…
https://codex.wordpress.org/Theme_Development

12. Primeros pasos
1. Servidor local con Apache, MySQL y PHP:
Ejemplos: MAMP, WAMP, LAMP…
2. Instalación de WordPress
https://codex.wordpress.org/Theme_Development

13. Primeros pasos
1. Servidor local con Apache, MySQL y PHP:
Ejemplos: MAMP, WAMP, LAMP…
2. Instalación de WordPress
3. Creación de repositorio en Github
https://codex.wordpress.org/Theme_Development

14. Primeros pasos
1. Servidor local con Apache, MySQL y PHP:
Ejemplos: MAMP, WAMP, LAMP…
2. Instalación de WordPress
4. Base para nuestro tema:
- style.css
- index.php
- functions.php
3. Creación de repositorio en Github
https://codex.wordpress.org/Theme_Development

15. Plugins
1. WordPress REST API (Version 2)
https://es.wordpress.org/plugins/rest-api/

16. Plugins
2. ACF to WP REST API
https://es.wordpress.org/plugins/acf-to-wp-rest-api/

17. Custom Post Types

18. Custom Post Types

19. Custom Post Types

20. Custom Post Types
Ejemplo:
https://www.angularseries.com/wp-json/v2/series

21. Custom Post Types
Ejemplo:
https://www.angularseries.com/wp-json/v2/series
Consultas a la REST API

22. Custom Post Types
Ejemplo:
https://www.angularseries.com/wp-json/v2/series
Consultas a la REST API
1. Ruta base:
<tu-dominio>/wp-json/wp/v2/

23. Custom Post Types
Ejemplo:
https://www.angularseries.com/wp-json/v2/series
Consultas a la REST API
1. Ruta base:
<tu-dominio>/wp-json/wp/v2/
2. Posts:
<tu-dominio>/wp-json/wp/v2/posts

24. Custom Post Types
Ejemplo:
https://www.angularseries.com/wp-json/v2/series
Consultas a la REST API
1. Ruta base:
<tu-dominio>/wp-json/wp/v2/
2. Posts:
<tu-dominio>/wp-json/wp/v2/posts
3. Single-post con id=1:
<tu-dominio>/wp-json/wp/v2/posts/1

25. Custom Post Types
Ejemplo:
https://www.angularseries.com/wp-json/v2/series
Consultas a la REST API
1. Ruta base:
<tu-dominio>/wp-json/wp/v2/
2. Posts:
<tu-dominio>/wp-json/wp/v2/posts
3. Single-post con id=1:
<tu-dominio>/wp-json/wp/v2/posts/1
4. Filtros:
<tu-dominio>/wp-json/wp/v2/posts?page=2

26. Custom Post Types
Ejemplo:
https://www.angularseries.com/wp-json/v2/series
Consultas a la REST API
1. Ruta base:
<tu-dominio>/wp-json/wp/v2/
2. Posts:
<tu-dominio>/wp-json/wp/v2/posts
3. Single-post con id=1:
<tu-dominio>/wp-json/wp/v2/posts/1
4. Filtros:
<tu-dominio>/wp-json/wp/v2/posts?page=2
5. Filtros encadenados:
(…)/wp/v2/posts?
categories=2,3,6&before=2016-10-31T23:59:59

27. Postman
https://www.getpostman.com/

28. #3
Entorno
front-end:
NPM y Gulp

29. Gestor de dependencias
1. NPM (incluido en NodeJS)

30. Automatización con Gulp

31. Automatización con Gulp
1. Hojas de estilo: SASS

32. Automatización con Gulp
1. Hojas de estilo: SASS
2. Prefijos de compatibilidad

33. Automatización con Gulp
1. Hojas de estilo: SASS
3. JavaScript: Dependencias y app
2. Prefijos de compatibilidad

34. Automatización con Gulp
1. Hojas de estilo: SASS
3. JavaScript: Dependencias y app
4. BrowserSync
2. Prefijos de compatibilidad

35. Automatización con Gulp
gulp-autoprefixer
gulp-concat
gulp-sass
gulp-sourcemaps
gulp-uglify
browser-sync
1. Hojas de estilo: SASS
3. JavaScript: Dependencias y app
4. BrowserSync
2. Prefijos de compatibilidad

36. #4
AngularJS

37. #4
AngularJS

38. versión < 9

39. versión < 9

40. versión < 9

41. Estructura de la aplicación

42. Estructura de la aplicación

43. Estructura de la aplicación

46. Módulo principal y enlace de
la aplicación (bootstrapping)

47. Módulo principal y enlace de
la aplicación (bootstrapping)
1. app.js

48. Módulo principal y enlace de
la aplicación (bootstrapping)
1. app.js
2. header.php

49. Módulos secundarios

50. Módulos secundarios
1. components/home/home.js

51. Módulos secundarios
1. components/home/home.js
2. components/about/about.js

52. Servicios: Acceso a los datos
1. services/series.service.js

53. Servicios: Acceso a los datos
1. services/series.service.js

54. Servicios: Acceso a los datos
1. services/series.service.js

55. Servicios: Acceso a los datos
1. services/series.service.js

56. Servicios: Acceso a los datos
1. services/series.service.js

57. Servicios: Acceso a los datos
1. services/series.service.js

58. Servicios: Personalizar la respuesta

59. Servicios: Personalizar la respuesta

60. Servicios: Personalizar la respuesta

61. Servicios: Personalizar la respuesta

62. Servicios: Personalizar la respuesta

63. Servicios: Personalizar la respuesta

64. Vistas según la URL: UI-Router

65. Vistas según la URL: UI-Router
1. index.php

66. Vistas según la URL: UI-Router
1. index.php

67. Vistas según la URL: UI-Router

68. Vistas según la URL: UI-Router
1. home.component.js

69. Vistas según la URL: UI-Router
1. home.component.js

70. Vistas según la URL: UI-Router
1. home.component.js

71. Vistas según la URL: UI-Router
1. home.component.js

72. Vistas según la URL: UI-Router
1. home.component.js

73. https://github.com/marcelotena/wcsantander16-demo
https://www.angularseries.com/
Estructura de la vista “Home”

74. https://github.com/marcelotena/wcsantander16-demo
https://www.angularseries.com/
Estructura de la vista “Home”
home (/)

75. https://github.com/marcelotena/wcsantander16-demo
https://www.angularseries.com/
Estructura de la vista “Home”
list-item
home (/)

76. https://github.com/marcelotena/wcsantander16-demo
https://www.angularseries.com/
Estructura de la vista “Home”
list-item
home (/)
thumbnail

77. https://github.com/marcelotena/wcsantander16-demo
https://www.angularseries.com/
Estructura de la vista “Home”
list-item
home (/)
thumbnail
actors

78. https://github.com/marcelotena/wcsantander16-demo
https://www.angularseries.com/
Estructura de la vista “Home”
list-item
home (/)
thumbnail
actors
rating

79. Componentes

80. Componentes
1. home.component.html (template)

81. Componentes
1. home.component.html (template)

82. Componentes

83. Componentes
1. home/list-item/list-item.component.html

84. Componentes
1. home/list-item/list-item.component.html

85. Componentes
1. home/list-item/list-item.component.html

86. Componentes
1. home/list-item/list-item.component.html

87. Componentes
1. home/list-item/list-item.component.html

88. Componentes

89. Componentes
1. home/list-item/actors/actors.component.js

90. Componentes
1. home/list-item/actors/actors.component.js

91. Componentes
1. home/list-item/actors/actors.component.js

92. Componentes
1. home/list-item/actors/actors.component.js

93. Componentes
1. home/list-item/actors/actors.component.js

94. ¿Preguntas?
@marcelotena
#WCSantander