Los servicios en Angular se utilizan para definir datos y lógica que no están asociados con una vista particular que se puede compartir entre componentes. En este tutorial, aprenderemos cómo crear un servicio y luego hacer uso de la inyección de dependencia para usar ese servicio en un componente o clase determinados. Si ha trabajado con la inyección de dependencias en cualquier otro lenguaje de programación orientado a objetos, se sentirá como en casa.
Crear la clase de servicio
Un servicio es solo clase con un propósito específico. Puede utilizar una clase de servicio para las funciones que deberían ser reutilizables en todos los componentes. Su comportamiento es independiente de cualquier componente. También sirven para permitirle tener menos código en cualquier clase de componente en particular, ya que simplemente inyecta lo que necesita como dependencia. Aquí, crearemos un servicio que obtenga la lista de juegos para nuestra aplicación.
game.service.ts
El formato de un servicio es bastante similar a la creación de un archivo de TypeScript de componentes con la diferencia de que usamos el decorador @Injectable () .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | import {Injectable} from '@angular/core'; import {IGame} from './game'; @Injectable() export class GameService { getGames(): IGame[] { return [ { 'gameId': 1, 'gameName': 'Castlevania', 'gameCode': 'AAA-0101', 'releaseDate': 'September 26, 1986', 'description': 'Action-adventure game series created and developed by Konami.', 'price': 19.99, 'thumbRating': 5.0, 'imageUrl': './assets/images/castlevania.png' }, { 'gameId': 2, 'gameName': 'Dr Mario', 'gameCode': 'AAA-1100', 'releaseDate': 'July 27, 1990', 'description': 'Action puzzle game produced by Gunpei Yokoi and published by Nintendo.', 'price': 15.99, 'thumbRating': 3, 'imageUrl': './assets/images/drmario.png' }, { 'gameId': 3, 'gameName': 'Kid Icarus', 'gameCode': 'AAA-0048', 'releaseDate': 'December 19, 1986', 'description': 'Kid Icarus revolves around protagonist Pits quest for three sacred treasures.', 'price': 20.99, 'thumbRating': 4, 'imageUrl': './assets/images/kidicarus.png' }, { 'gameId': 4, 'gameName': 'Legend Of Zelda', 'gameCode': 'AAA-0049', 'releaseDate': 'February 21, 1986', 'description': 'Link is often given the task of rescuing Princess Zelda and the kingdom of Hyrule from Ganon.', 'price': 29.95, 'thumbRating': 5, 'imageUrl': './assets/images/legendofzelda.png' }, { 'gameId': 7, 'gameName': 'Super Mario Bros', 'gameCode': 'AAA-3325', 'releaseDate': 'September 13, 1985', 'description': 'Mario finds power-ups and items that give him special magic powers such as fireball-throwing and size-changing into giant and miniature sizes.', 'price': 40.95, 'thumbRating': 5, 'imageUrl': './assets/images/supermariobros.png' } ]; } } |
Registrar el servicio
Para utilizar el servicio, debe estar registrado en Angular. Esto crea una única instancia de la clase de servicio, que luego es administrada por Angular Injector. Para registrar nuestro servicio, podemos pasar el objeto { provideIn : 'root'} al Decorador @Injectable () .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | import {Injectable} from '@angular/core'; import {IGame} from './game'; @Injectable({ providedIn: 'root' }) export class GameService { getGames(): IGame[] { return [ { 'gameId': 1, 'gameName': 'Castlevania', 'gameCode': 'AAA-0101', 'releaseDate': 'September 26, 1986', 'description': 'Action-adventure game series created and developed by Konami.', 'price': 19.99, 'thumbRating': 5.0, 'imageUrl': './assets/images/castlevania.png' }, { 'gameId': 2, 'gameName': 'Dr Mario', 'gameCode': 'AAA-1100', 'releaseDate': 'July 27, 1990', 'description': 'Action puzzle game produced by Gunpei Yokoi and published by Nintendo.', 'price': 15.99, 'thumbRating': 3, 'imageUrl': './assets/images/drmario.png' }, { 'gameId': 3, 'gameName': 'Kid Icarus', 'gameCode': 'AAA-0048', 'releaseDate': 'December 19, 1986', 'description': 'Kid Icarus revolves around protagonist Pits quest for three sacred treasures.', 'price': 20.99, 'thumbRating': 4, 'imageUrl': './assets/images/kidicarus.png' }, { 'gameId': 4, 'gameName': 'Legend Of Zelda', 'gameCode': 'AAA-0049', 'releaseDate': 'February 21, 1986', 'description': 'Link is often given the task of rescuing Princess Zelda and the kingdom of Hyrule from Ganon.', 'price': 29.95, 'thumbRating': 5, 'imageUrl': './assets/images/legendofzelda.png' }, { 'gameId': 7, 'gameName': 'Super Mario Bros', 'gameCode': 'AAA-3325', 'releaseDate': 'September 13, 1985', 'description': 'Mario finds power-ups and items that give him special magic powers such as fireball-throwing and size-changing into giant and miniature sizes.', 'price': 40.95, 'thumbRating': 5, 'imageUrl': './assets/images/supermariobros.png' } ]; } } |
Inyectar el servicio en un componente
Para usar el servicio que ahora está registrado, podemos usar Dependency Injection para pasar una instancia de la clase de servicio a la clase de componente. Esto se hace en el constructor y se resalta a continuación.
game-list.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | import {Component, OnInit} from '@angular/core'; import {IGame} from './game'; import {GameService} from './game.service'; @Component({ selector: 'game-list', templateUrl: './game-list.component.html', styleUrls: ['./game-list.component.css'] }) export class GameListComponent implements OnInit { pageTitle = 'Dynamic! Game List'; imageWidth = 45; imageMargin = 1; showImage = true; _listFilter = ''; get listFilter(): string { return this._listFilter; } set listFilter(value: string) { this._listFilter = value; this.filteredGames = this.listFilter ? this.doFilter(this.listFilter) : this.games; } filteredGames: IGame[] = []; games: IGame[] = []; constructor(private gameService: GameService) { this.listFilter = ''; } onRatingClicked(message: string): void { this.pageTitle = 'Game List: ' + message; } doFilter(filterBy: string): IGame[] { filterBy = filterBy.toLocaleLowerCase(); return this.games.filter((game: IGame) => game.gameName.toLocaleLowerCase().indexOf(filterBy) !== -1); } toggleImage(): void { this.showImage = !this.showImage; } ngOnInit(): void { this.games = this.gameService.getGames(); this.filteredGames = this.games; } } |
Observe en el fragmento anterior en el enlace del ciclo de vida ngOnInit () que podemos hacer uso de un método que existe en la clase de servicio externo ( getGames () ). Esto es posible porque el servicio se inyectó anteriormente en esta clase de componente. ¡Ordenado!
Ahora, al ver la aplicación, la lista de juegos sigue ahí. No cambiamos mucho ninguna funcionalidad, pero sí completamos un refactor de código . Moviendo la responsabilidad de ir a buscar los juegos fuera de juego-list.component.ts , y en game.service.ts - hemos hecho el componente de lista de juegos hacer menos trabajo por su propia cuenta, por lo tanto, que significa menos código y la sintaxis más limpia. Además, si hay otros componentes a los que les gustaría obtener una lista de juegos, también podrían simplemente inyectar una instancia de la clase de servicio y hacerlo. Este es un patrón muy popular en casi todos los estilos de programación orientada a objetos.
Resumen
En este tutorial aprendimos cómo crear una nueva clase de servicio en Angular, luego usamos la inyección de dependencia para usarla en cualquier lugar que queramos.
- La construcción de un servicio sigue el mismo esquema general de la construcción de un componente.
- Nombra la clase para que represente lo que hace
- Utilice PascalCasing como una cuestión de convención
- Agrega "Servicio" al nombre de la clase
- Mientras que los componentes usan el decorador @Component () , los servicios usarán el decorador @Injectable ()
- Registre el servicio pasando un objeto al decorador @Injectable () con el conjunto de propiedades proporcionadoIn
- Para usar la clase de servicio en un componente, inyecte ese servicio en el componente mediante el constructor de clases
0 Comentarios
Dejanos tu comentario para seguir mejorando!