Providers, factories and services.

Uno de los aspectos , probablemente más confusos de Angular.js repasado con cuidado, para el meetup #3 de Angular.js México.

Transcript

1. HOLA! ¡
2. Amet Alvirde @Alevardi
3. Providers, factories and services.
4. [3] SERVICES [1] PROVIDERS [2] FACTORIES [0] INTRO F [4] CONCLUSIONES
5. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES PROPÓSITO: ACLARAR CUÁLES SON LAS SIMILITUDES, Y SOBRE TODO LAS DIFERENCIAS ENTRE UN SERVICE, UNA FACTORY, Y UN PROVIDER. Y, POR SUPUESTO, BOSQUEJAR ALGUNAS "REGLAS" SOBRE CUÁL UTILIZAR EN QUÉ MOMENTO.
6. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES SIMILITUD #1
7. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES TODOS SON SERVICIOS! ¡
8. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES EL PROVIDER… EN REALIDAD ES UN SERVICE PROVIDER. LA FACTORY… EN REALIDAD ES UNA SERVICE FACTORY. Y EL SERVICE… EN REALIDAD ES UN SERVICE QUE LAMENTABLEMENTE SE LLAMA 'SERVICE'.
9. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES EN PALABRAS DE LOS PROPIOS DESARROLLADORES DE ANGULAR: “NOTE: YES, WE HAVE CALLED ONE OF OUR SERVICE RECIPES 'SERVICE'. WE REGRET THIS AND KNOW THAT WE'LL BE SOMEHOW PUNISHED FOR OUR MISDEED. IT'S LIKE WE NAMED ONE OF OUR OFFSPRING 'CHILD'. BOY, THAT WOULD MESS WITH THE TEACHERS.” “NOTA: SÍ, HEMOS LLAMADO UNO DE NUESTROS SERVICIOS 'SERVICIO'. LO LAMENTAMOS Y SABEMOS QUE SEREMOS CASTIGADOS DE ALGUNA MANERA POR NUESTRO DELITO. ES COMO SI HUBIÉRAMOS LLAMADO A UNO DE NUESTROS HIJOS 'NIÑO'. NIÑO, ESO SERÍA UN PROBLEMA CON LOS PROFESORES.” HTTPS://DOCS.ANGULARJS.ORG/GUIDE/PROVIDERS#SERVICE-RECIPE
10. Service providers, service factories and services services. :(
11. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES SO... ¿QUÉ ES UN SERVICIO?
12. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES UN SERVICIO DE ANGULAR ES UN SINGLETON CREADO POR UNA SERVICE FACTORY. ESTAS SERVICE FACTORIES SON FUNCIONES, QUE, EN SU MOMENTO, FUERON CREADAS POR UN SERVICE PROVIDER. LOS SERVICE PROVIDERS SON FUNCIONES CONSTRUCTORAS. CUANDO SON INICIADAS, DEBEN CONTENER UNA PROPIEDAD LLAMADA $GET. QUE CONTIENE A LA FUNCIÓN SERVICE FACTORY. CUANDO SE SOLICITA UN SERVICIO, EL $INJECTOR ES EL REPONSABLE DE ENCONTRAR EL SERVICE PROVIDER CORRECTO. INICIARLO Y LLAMAR SU MÉTODO $GET, EJECUTANDO LA FUNCIÓN SERVICE FACTORY PARA OBTENER LA INSTANCIA DEL SERVICIO.
13. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES PROPÓSITO: ENTENDER LA SLIDE ANTERIOR.
14. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES $PROVIDE
15. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES TIENE VARIOS MÉTODOS PARA REGISTRAR COMPONENTES CON EL $INJECTOR. MUCHAS DE ESTAS FUNCIONES ESTÁN EXPUESTAS TAMBIÉN EN ANGULAR. MODULE. HOY NOS INTERESAN: - provider(nombre, provider) - factory(nombre, $get) - service(nombre, constructor)
16. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES SERVICE PROVIDER provider(nombre, provider)
17. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES LOS SERVICE PROVIDERS SON FUNCIONES CONSTRUCTORAS. CUANDO SON INICIADAS, DEBEN CONTENER UNA PROPIEDAD LLAMADA $GET. QUE CONTIENE A LA FUNCIÓN SERVICE FACTORY. //$provide.provider(name, provider); app.provider(name, provider); Registra un service provider con el $injector. DEFINICIÓN:
18. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES CARACTERÍSTICAS: SUS NOMBRES COMIENZAN CON EL NOMBRE DEL SERVICIO QUE PROVEEN SEGUIDO DE PROVIDER, POR EJEMPLO. EL PROVIDER DEL SERVICIO $ROUTE SE LLAMA $ROUTEPROVIDER. LOS OBJETOS SERVICE PROVIDER PUEDEN TENER MÉTODOS ADICIONALES QUE PERMITAN LA CONFIGURACIÓN DEL PROVIDER Y SU SERVICIO. PUEDES CONFIGURAR QUÉ TIPO DE SERVICIO ES CREADO POR EL MÉTODO $GET O CÓMO ESTE SERVICIO ACTUARÁ. CUANDO REGISTRAS UN PROVIDER, AUTOMÁTICAMENTE SE LE AGREGA LA PALABRA PROVIDER AL FINAL, SI CREAS, EL PROVIDER 'CENTRAAL' ESTARÁ DISPONIBLE COMO CENTRAALPROVIDER. NO PUEDE TENER DEPENDENCIAS, SE USA UN INYECTOR DE DEPENDENCIAS ESPECIAL. QUE INSTANCIA SÓLO PROVIDERS PARA SU CREACIÓN. REGRESA EL VALOR QUE RESULTA DEL RETURN AL INVOCAR LA PROPIEDAD $GET DE LA FUNCIÓN.
19. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES DEFINICIÓN EN CÓDIGO: HTTPS://GITHUB.COM/ANGULAR/ANGULAR.JS/BLOB/MASTER/SRC/AUTO/INJECTOR.JS#L654
20. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES ¿CUÁNDO LO USO? "DEBES USAR EL SERVICE PROVIDER SÓLO CUANDO NECESITAS EXPONER UNA API PARA ALGUNA CONFIGURACIÓN A LO LARGO DEL SISTEMA, QUE DEBA HACERSE ANTES DE QUE LA APLICACIÓN COMIENCE. ESTO ES USUALMENTE INTERESANTE SÓLO PARA SERVICIOS REUSABLES CUYO COMPORTAMIENTO QUIZÁ DEBA VARIAR LIGERAMENTE ENTRE DIFERENTES APLICACIONES."
21. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES TOMEMOS COMO EJEMPLO EL $LOGPROVIDER: HTTPS://GITHUB.COM/ANGULAR/ANGULAR.JS/BLOB/MASTER/SRC/NG/LOG.JS#L46
22. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES ¿Y CÓMO LO HAGO? CÓDIGO DE EJEMPLO. NO FORMA PARTE DEL CODEBASE DE ANGULAR.JS
23. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES CONFIGURACIONES INTERNAS: CÓDIGO DE EJEMPLO. NO FORMA PARTE DEL CODEBASE DE ANGULAR.JS
24. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES DESDE LA FASE DE CONFIGURACIÓN DEL CICLO DE VIDA DE ANGULAR: CÓDIGO DE EJEMPLO. NO FORMA PARTE DEL CODEBASE DE ANGULAR.JS
25. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES SERVICE FACTORY factory(nombre, $getFn)
26. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES ES UN ATAJO PARA REGISTRAR UN SERVICIO DONDE EL PROVIDER CONSISTE ÚNICAMENTE EN UNA PROPIEDAD $GET, QUE ES, REALMENTE, LA FUNCIÓN DADA. //$provide.factory(name, $getFn); app.factory(name, $getFn); Registra una service factory. Que debajo del agua, registra un provider con la propiedad $get DEFINICIÓN:
27. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES CARACTERÍSTICAS: CUANDO REGISTRAS UNA SERVICE FACTORY, AUTOMÁTICAMENTE SE CREA SU SERVICE PROVIDER CORRESPONDIENTE: NOMBREDETUFACTORY + 'PROVIDER'; PUEDE TENER DEPENDENCIAS (USAR OTROS SERVICIOS) REGRESA EL VALOR DE RETURN QUE RESULTE DE INVOCAR LA FUNCIÓN.
28. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES DEFINICIÓN EN CÓDIGO: HTTPS://GITHUB.COM/ANGULAR/ANGULAR.JS/BLOB/MASTER/SRC/AUTO/INJECTOR.JS#L675
29. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES ¿CUÁNDO LO USO? SE USAN LAS SERVICE FACTORIES SI TU SERVICIO NO ES CONFIGURABLE DE FORMA EXTERNA A LA FUNCIÓN QUE LA DEFINE.
30. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES CÓDIGO DE EJEMPLO. NO FORMA PARTE DEL CODEBASE DE ANGULAR.JS VOLVAMOS AL $LOGPROVIDER:
31. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES CÓDIGO DE EJEMPLO. NO FORMA PARTE DEL CODEBASE DE ANGULAR.JS
32. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES SERVICE SERVICE :( factory(nombre, constructor)
33. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES ES UN ATAJO PARA REGISTRAR UN SERVICIO DONDE LA PROPIEDAD $GET DE SU PROVIDER ES LA FUNCIÓN CONSTRUCTORA QUE SERÁ USADA PARA INSTANCIA DEL SERVICIO. //$provide.service(name, constructor); app.service(name, constructor); Registra un servicio, que será invocado con new, para crear la instancia del servicio. DEFINICIÓN:
34. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES CARACTERÍSTICAS: ES EL MÁS SIMPLE DE TODOS. RECIBE UN CONSTRUCTOR. PRODUCE UN SERVICIO COMO EL DE UNA SERVICE FACTORY, PERO LO HACE INVOCANDO AL CONSTRUCTOR CON EL OPERADOR NEW.
35. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES DEFINICIÓN EN CÓDIGO: HTTPS://GITHUB.COM/ANGULAR/ANGULAR.JS/BLOB/MASTER/SRC/AUTO/INJECTOR.JS#L681
36. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES ¿CUÁNDO LO USO? SE USA CUANDO TIENES UNA FUNCIÓN LISTA PARA UTILIZARSE SIN NINGÚN TIPO DE CONFIGURACIÓN O INFLUENCIA EXTERNA.
37. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES FUNCIÓN LISTA PARA USARSE:
38. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES PROBLEMA RESUELTO CON FACTORY, APROXIMADA A SERVICE:
39. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES PROBLEMA RESUELTO CON SERVICE:
40. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES [4] CONCLUSIONES
41. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES UN SERVICIO DE ANGULAR ES UN SINGLETON CREADO POR UNA SERVICE FACTORY. ESTAS SERVICE FACTORIES SON FUNCIONES, QUE, EN SU MOMENTO, FUERON CREADAS POR UN SERVICE PROVIDER. LOS SERVICE PROVIDERS SON FUNCIONES CONSTRUCTORAS. CUANDO SON INICIADAS, DEBEN CONTENER UNA PROPIEDAD LLAMADA $GET. QUE CONTIENE A LA FUNCIÓN SERVICE FACTORY. CUANDO SE SOLICITA UN SERVICIO, EL $INJECTOR ES EL REPONSABLE DE ENCONTRAR EL SERVICE PROVIDER CORRECTO. INICIARLO Y LLAMAR SU MÉTODO $GET, EJECUTANDO LA FUNCIÓN SERVICE FACTORY PARA OBTENER LA INSTANCIA DEL SERVICIO.
42. [0] INTRO [3] SERVICES [2] FACTORIES [1] PROVIDERS [4] CONCLUSIONES GRACIAS! ¡ yo soy @Alevardi