¿Cuál es la diferencia entre service, directive y module?

He estado leyendo muchos documentos y me estoy confundiendo cada vez más. Básicamente no puedo entender la diferencia entre un

• Servicio
• directiva
• módulo

Veo muchos componentes personalizados. A veces usan directivas, a veces servicios. Siempre comienza con un módulo. ¿Alguien puede explicar con un ejemplo cuál es la diferencia entre estos tres tipos?

Piense en un módulo como un lugar para conectar una serie de otras cosas, como directivas, servicios, constantes, etc. Los módulos se pueden inyectar en otros módulos, lo que le brinda un alto nivel de reutilización.

Al escribir una aplicación angular, tendría un módulo de nivel superior que es el código de su aplicación (sin plantillas).

Los servicios son principalmente una forma de comunicarse entre los controladores, pero puede inyectar un servicio en otro. Los servicios se utilizan a menudo como una forma de llegar a sus almacenes de datos y las personas ajustarán las API angulares, como ngResource. Esta técnica es útil, ya que hace que las pruebas (especialmente las burlas) sean bastante fáciles. Puede tener servicios para hacer otras cosas como autenticación, registro, etc.

Las directivas se utilizan para crear widgets o envolver cosas existentes como complementos jquery. Ajustar los complementos existentes puede ser un desafío y la razón por la que lo haría es establecer un enlace de datos bidireccional entre los complementos y angular. Si no necesita un enlace de datos bidireccional, no necesita ajustarlos.

Una directiva también es un lugar para manipular DOM, capturar eventos DOM, etc. No debe hacer cosas relacionadas con DOM en controladores o servicios. Crear directivas puede volverse bastante complejo. En mi humilde opinión, recomiendo primero buscar en la API algo que pueda hacer lo que estás buscando O pedirle consejo al Grupo de Google de Angular.

De mis propias notas personales (principalmente fragmentos de documentos, publicaciones de grupos de Google y publicaciones SO):

Módulos

• Proporcionar una forma de espacio de nombres / servicios de grupo, directivas, filtros, información de configuración y código de inicialización
• ayudar a evitar variables globales
• se usan para configurar el inyector $, permitiendo que las cosas definidas por el módulo (o el módulo completo en sí) se inyecten en otro lugar (material de inyección de dependencia)
• Los módulos angulares no están relacionados con CommonJS o Require.js. A diferencia de los módulos AMD o Require.js, los módulos angulares no intentan resolver el problema del ordenamiento de carga de scripts o la recuperación lenta de scripts. Estos objetivos son ortogonales y ambos sistemas de módulos pueden convivir y cumplir sus objetivos (según afirman los documentos).

Servicios

• son singletons, por lo que solo hay una instancia de cada servicio que defina. Como singletons, no se ven afectados por los ámbitos y, por lo tanto, se puede acceder a ellos (compartidos con) múltiples vistas / controladores / directivas / otros servicios
• Puede (y probablemente debería) crear servicios personalizados cuando
  • dos o más cosas necesitan acceso a los mismos datos (no use el alcance raíz) o simplemente desea encapsular perfectamente sus datos
  • desea encapsular interacciones con, por ejemplo, un servidor web (extienda $ resource o $ http en su servicio)
• Los servicios integrados comienzan con '$'.
• Para usar un servicio, se requiere la inyección de dependencia en el dependiente (por ejemplo, en el controlador u otro servicio o una directiva).

Directivas (algunos de los elementos a continuación dicen esencialmente lo mismo, pero he descubierto que a veces una redacción ligeramente diferente ayuda mucho)

• son responsables de actualizar el DOM cuando cambia el estado del modelo
• ampliar vocabulario HTML = enseñar HTML nuevos trucos.
  Angular viene con un conjunto integrado de directivas (p. Ej., Ng- * stuff) que son útiles para crear aplicaciones web, pero puede agregar las suyas de tal manera que HTML se pueda convertir en un lenguaje declarativo de dominio específico (DSL). Por ejemplo, los elementos <tabs> y <pane> en la demostración de la página de inicio angular "Creación de componentes".
  • Directivas incorporadas no obvias (porque no comienzan con "ng"): a, form, input, script, select, textarea. ¡Bajo Angular, todos estos hacen más de lo normal!
• Las directivas le permiten "componente HTML". Las directivas son a menudo mejores que ng-include. Por ejemplo, cuando comienza a escribir mucho HTML con principalmente enlace de datos, refactorice ese HTML en directivas (reutilizables).
• El compilador Angular le permite adjuntar comportamiento a cualquier elemento o atributo HTML e incluso crear nuevos elementos o atributos HTML con un comportamiento personalizado. Angular llama a estas directivas de extensiones de comportamiento .
  • Cuando lo reduce todo, una directiva es solo una función que se ejecuta cuando el compilador Angular lo encuentra en el DOM.
• Una directiva es un comportamiento o transformación DOM que se desencadena por la presencia de un atributo, un nombre de elemento, un nombre de clase o un nombre en un comentario. La directiva es un comportamiento que debe activarse cuando se encuentran construcciones HTML específicas en el proceso de compilación (HTML). Las directivas se pueden colocar en nombres de elementos, atributos, nombres de clase, así como comentarios.
  • La mayoría de las directivas están restringidas a atributos solamente. Por ejemplo, DoubleClick solo usa directivas de atributos personalizados.
• ver también ¿Qué es una directiva angularjs?

Definir y agrupar cosas angulares (material de inyección de dependencia) en módulos.
Comparta datos y ajuste la interacción del servidor web en los servicios.
Extienda HTML y haga manipulación DOM en directivas.
Y haga que los Controladores sean lo más "delgados" posible.