Tenemos la respuesta a esta duda, o por lo menos eso deseamos. Si presentas preguntas deja tu comentario, para nosotros será un placer responderte
Solución:
Componente
Básicamente es una clase con un decorador @Component que le dice a angular que la clase es un componente.
Siempre van asociados a una plantilla HTML y algo de CSS.
Cuando una parte de html se repite con una funcionalidad similar, siempre es mejor ponerla en un componente. Este componente se puede llamar siempre que se requiera la misma funcionalidad.
Servicios
Son unidades centrales para algunas funciones comunes en toda la aplicación.
Son clases simples con funciones y miembros.
Se usa cuando: existe duplicación de código, accede/almacena datos.
No existe un decorador para Servicios a diferencia de @Component y @Directive. @Injectable se usa solo cuando un servicio necesita ser usado por un componente, directiva u otro servicio.
Soy bastante nuevo en Angular, pero aquí está mi entendimiento.
Componente
De los documentos:
Los componentes angulares son un subconjunto de directivas. A diferencia de las directivas, los componentes siempre tienen una plantilla y solo se puede crear una instancia de un componente por elemento en una plantilla.
Básicamente, un componente es una pequeña porción de HTML, CSS y Javascript que encapsula alguna parte de su aplicación que desea mostrar.
Servicio
Un servicio proporciona una funcionalidad que puede usar en varias partes de su aplicación. Supongamos que desea mostrar información específica sobre un usuario en varios componentes, pero no desea repetir el código, colocaría ese código en un servicio. Luego inyectaría el servicio en su componente y llamaría al usuario que muestra el código dentro del componente, desde el servicio.
El decorador @Injectable() se usa cuando desea inyectar otros servicios dentro del servicio que se está decorando, y no necesita incluirlo cuando está usando el servicio en su componente.
Diferencia principal principal
“Cuando queríamos acceder al método de un componente en otro, teníamos que crear el objeto y acceder a él. Pero,
@Inyectable nos dice o los métodos de Servicio a los que podemos acceder simplemente inyectando Servicio en Constructor () Debido a que el Servicio es Singleton, repito, el Servicio es Singleton. es decir, solo un objeto de cada servicio está disponible en toda la aplicación.
Ejemplo:
constructor (http privado: HttpClient, servicio de tostadas privado: ToastService)
aquí acabo de crear una variable para el tipo HttpClient y acceder a los métodos get/post/put. ToastService es mi servicio privado para acceder a mis propios servicios.
Componente
Espero que lo sepas, en AngularJS solíamos escribir un archivo script.js separado para manejar eventos, escribir métodos, llamar a API o validación y luego accedemos a ese archivo en html como este
nosotros usamos @Componente para Componente. Por lo tanto, el componente es como un archivo de secuencia de comandos con características adicionales adicionales. como, podemos exportar componentes y usarlos en cualquier lugar de la aplicación, Angular 2 proporcionó características orientadas a objetos y en lugar de importar secuencias de comandos externas, archivos css, tienen soporte para eso, etc.
@Component(
selector: 'app-unit',
templateUrl: './unit.component.html',
styleUrls: ['./unit.component.css']
)
export class MyComponent implements OnInit
constructor( private http: HttpClient , private toastService: ToastService)
ngOnInit()
this.fetchAllUnit();
Servicios
Nosotros usamos @Inyectable por servicios Los servicios se utilizan para métodos comunes para algunas funciones comunes en los diferentes componentes. Son clases simples con funciones y miembros, no contenido html. Se utiliza cuando se desea reducir la duplicación de código para acceder o almacenar datos.
import Injectable from '@angular/core';
@Injectable(
providedIn: 'root'
)
export class ToastService
constructor()
public error( msg )
M.toast( html: msg, classes: 'red darken-2 rounded' );
public success( msg )
M.toast( html: msg, classes: 'green lighten-1 rounded' );
public warning( msg )
M.toast( html: msg, classes: 'yellow darken-4 rounded' );
Tienes la opción de añadir valor a nuestra información asistiendo con tu experiencia en las aclaraciones.