¿Cuál es la diferencia entre servicio, directiva y módulo?

He estado leyendo muchos documentos y cada vez me siento más confundido. 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. ¿Puede alguien 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, tales como directivas, servicios, constantes, etc. Los módulos pueden ser inyectados en otros módulos, dándole un alto nivel de reutilización.

Al escribir una aplicación angular, tendría un módulo de nivel superior que es su código de 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 (particularmente las burlas) sean bastante fáciles. Puede tener servicios para hacer otras cosas como autenticación, registro, etc.

Las directivas se usan para crear widgets o para envolver elementos existentes como los complementos de jquery. Envolver 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 el enlace de datos bidireccional, entonces no necesita envolverlos.

Una directiva también es un lugar para manipular DOM, capturar eventos DOM, etc. No deberías estar haciendo cosas relacionadas con DOM en controladores o servicios. Crear directivas puede ser bastante complejo. En mi humilde opinión, recomiendo mirar primero la API para encontrar algo que pueda hacer lo que está buscando O pídale consejo al Grupo de Google de Angular.

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

Módulos

  • proporcionar una forma de servicios de espacios / grupos de nombres, directivas, filtros, información de configuración y código de inicialización
  • ayudar a evitar variables globales
  • se usan para configurar $ inyector, permitiendo que las cosas definidas por el módulo (o el módulo completo en sí) se inyecten en otro lugar (cosas de Inyección de Dependencia)
  • Los módulos angulares no están relacionados con CommonJS o Require.js. A diferencia de los módulos de AMD o Require.js, los módulos angulares no intentan resolver el problema del orden de carga de scripts o la recuperación de scripts vagos. Estos objectives son ortogonales y ambos sistemas de módulos pueden vivir uno al lado del otro y cumplir sus objectives (por lo que los doctores afirman).

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 mediante (compartido 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 la misma información (no use el scope de la raíz) o simplemente quiere encapsular sus datos cuidadosamente
    • desea encapsular interacciones con, por ejemplo, un servidor web (extienda $ recurso o $ http en su servicio)
  • Los servicios integrados comienzan con ‘$’.
  • Para usar un servicio, se requiere dependency injection 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 el vocabulario HTML = enseñar HTML nuevos trucos.
    Angular viene con un conjunto de directivas integradas (p. Ej., Ng- * cosas) que son útiles para crear aplicaciones web, pero puede agregar las suyas propias para que el HTML se convierta en un Lenguaje Específico de Dominio (DSL) declarativo. Por ejemplo, los elementos y en la demostración de la página de inicio angular “Crear componentes”.
    • Directivas no obvias incorporadas (porque no comienzan con “ng”): a, form, input, script, select, textarea. En Angular, ¡todos hacen más de lo normal!
  • Las directivas le permiten “componentes de HTML”. Las directivas a menudo son mejores que ng-include. Por ejemplo, cuando empiezas a escribir un montón de HTML con principalmente vinculantes de datos, refactoriza ese HTML en directivas (reutilizables).
  • El comstackdor 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 comstackdor angular la encuentra en el DOM.
  • Una directiva es una transformación de comportamiento o 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 comstackción (HTML). Las directivas se pueden colocar en nombres de elementos, atributos, nombres de clase, así como en comentarios.
    • La mayoría de las directivas están restringidas solo a los atributos. Por ejemplo, DoubleClick solo usa directivas de atributos personalizados.
  • ver también ¿Qué es una directiva angularjs?

Defina y agrupe elementos angulares (cosas de dependency injection) en módulos.
Comparta datos y ajuste la interacción del servidor web en los servicios.
Extiende HTML y realiza la manipulación de DOM en directivas.
Y haga que los controladores sean lo más “delgados” posible.