Share
En el primer tutorial de la serie, aprendimos cómo empezar para crear una aplicación Angular. Después de completar con éxito ese tutorial, ahora debería tener su primera aplicación Angular en funcionamiento con el título "Datos divertidos sobre los países". Antes de crear cualquier componente que se pueda representar en la pantalla, crearemos algunas clases y definiremos algunas funciones que hacen que esos componentes sean útiles..
En este tutorial, nuestro enfoque estará en crear un País Clase que contendrá diferentes propiedades cuyo valor queremos mostrar al usuario. Luego crearemos otro archivo llamado datos del país.ts. Este archivo contendrá información sobre todos los países en nuestra aplicación. Nuestro tercer archivo será nombrado pais.service.ts. El nombre puede sonar elegante, pero el archivo solo contendrá un Servicio País Clase con toda la funcionalidad necesaria para recuperar y ordenar la información proporcionada por el archivo. datos del país.ts.
Dentro de src / app carpeta de su aplicación Angular, cree un archivo llamado pais.ts. Agrega el siguiente código dentro de él.
clase de exportación País nombre: cadena; capital: cuerda; área: número; población: número; moneda: cadena; gdp: número;
El código de TypeScript anterior define la País clase con seis propiedades diferentes para almacenar información sobre diferentes países. El nombre del país, su capital y su moneda se almacenan como una cadena. Sin embargo, su área, población y PIB se almacenan como un número. Estaremos importando el País clase en muchos lugares, así que he añadido el exportar palabra clave antes de la definición de la clase.
El siguiente paso incluye crear una datos del país.ts archivo para almacenar la información sobre todos los países como una matriz de País objetos. Estaremos importando el País clase en este archivo y luego exportar una const llamado PAÍSES que almacena una gran variedad de objetos de país.
Aquí está el código para datos del país.ts. Al igual que pais.ts, Tienes que crear este archivo dentro de la src / app carpeta.
importar País desde './campo'; exportar PAÍSES: País [] = [nombre: 'Rusia', capital: 'Moscú', área: 17098246, población: 144463451, moneda: 'Rublo ruso', gdp: 1283162, nombre: 'Canadá', capital : 'Ottawa', área: 9984670, población: 35151728, moneda: 'Dólar canadiense', gdp: 159760, nombre: 'China', capital: 'Beijing', área: 9596961, población: 1403500365, moneda: 'Renminbi (Yuan) ', gdp: 11199145, nombre:' Estados Unidos ', capital:' Washington, DC ', área: 9525067, población: 325365189, moneda:' Dólar estadounidense ', gdp: 18569100, nombre: 'Japón', capital: 'Tokio', área: 377972, población: 12676200, moneda: 'Yen', gdp: 4939384];
La primera línea en este archivo importa el País clase de la pais.ts Archivo ubicado en el mismo directorio. Si elimina esta línea del archivo, TypeScript le dará el siguiente error:
No se puede encontrar el nombre 'País'.
Sin la declaración de importación, TypeScript no tendrá idea de qué tipo de matriz País medio. Así que asegúrese de haber importado la clase correcta y de haber especificado la ubicación de pais.ts correctamente.
Después de importar el País clase, seguimos adelante y creamos una serie de País objetos. Importaremos este conjunto de países para usar dentro de otros archivos, así que agregamos un exportar palabra clave para esta matriz también. Actualmente, hay cinco diferentes País objetos en la matriz. Cada uno de estos cinco objetos proporciona pares clave-valor que enumeran el nombre de una propiedad y su valor para un objeto o país en particular.
Si intenta agregar una propiedad adicional a la matriz que no se ha declarado dentro del País definición de la clase, obtendrá el siguiente error:
El literal de objeto solo puede especificar propiedades conocidas, y 'presidente' no existe en el tipo 'País'
En este caso, estaba tratando de almacenar el nombre del presidente como un cuerda dentro de una propiedad llamada presidente. Como no se declaró tal propiedad, obtuvimos un error. A veces, es posible que desee especificar una propiedad solo para objetos particulares y no para otros. En tales casos, puede marcar la propiedad opcional dentro de la definición de clase. Lo he discutido con más detalle en un tutorial que cubre las interfaces de TypeScript.
Por ahora, solo asegúrese de que los nombres de todas las propiedades coincidan con los nombres dentro de la definición de la clase. Asegúrese también de que el valor de cada propiedad tenga el mismo tipo que el declarado en la definición de clase.
Después de crear nuestro País clase y PAÍSES Array, finalmente podemos escribir algunas funciones para procesar los datos del país. Tendremos que importar tanto el País clase y la PAÍSES matriz dentro de nuestro archivo de servicio. El archivo necesitará importar el PAÍSES matriz para tener acceso a los datos. Del mismo modo, el archivo tendrá que importar el País clase con el fin de dar sentido a los datos dentro de la PAÍSES formación.
También estaremos importando otras dependencias como Inyectable desde el núcleo angular para hacer nuestra Servicio País Clase disponible para inyectar en otros componentes..
Una vez que su aplicación crezca, será necesario que los diferentes módulos se comuniquen entre sí. Digamos que Módulo A requiere ModuleB para funcionar correctamente. En tales casos, llamaríamos ModuleB una dependencia de Módulo A.
Simplemente importar el módulo que necesitamos en otro archivo funciona la mayor parte del tiempo. Sin embargo, a veces tenemos que decidir si debemos crear una instancia única de clases a partir de ModuleB Eso será utilizado por toda la aplicación o si debemos crear una nueva instancia cada vez que se usa el módulo. En nuestro caso, inyectaremos una sola instancia de nuestro Servicio País clase en toda la aplicación.
Aquí está el código para pais.service.ts:
importar Inyectable desde '@ angular / core'; importar País desde './campo'; importar COUNTRIES desde './country-data'; @Injectable () clase de exportación CountryService constructor () getCountries (): Country [] return COUNTRIES; getPopulatedCountries (): Country [] return COUNTRIES.sort ((a, b) => b.population - a.population) .slice (0, 3); getLargestCountries (): Country [] return COUNTRIES.sort ((a, b) => b.area - a.area) .slice (0, 3); getGDPCountries (): Country [] return COUNTRIES.sort ((a, b) => b.gdp - a.gdp) .slice (0, 3); getCountry (name: string): Country return COUNTRIES.find (country => country.name === name);
Un @inyectable El decorador se utiliza para identificar una clase de servicio que podría requerir dependencias inyectadas. Sin embargo, añadiendo el @inyectable Para clases de servicio es un estilo de codificación requerido, así que lo hacemos de todos modos.
Después de eso, escribimos diferentes métodos para la clase que toman la PAÍSES array y devuélvalo directamente u ordénelo según ciertos criterios y luego devuelva una parte del array.
los getCountries () Se espera que el método devuelva todo el País Objetos, y así devuelve el conjunto. PAÍSES Arreglo sin hacer ninguna modificación..
los getPopulatedCountries () toma el PAÍSES Arregle y clasifique en orden descendente en función de la población de diferentes países. Luego utilizamos el método Array.slice () para devolver los tres primeros países (con los índices 0, 1 y 2) de la matriz. los getLargestCountries () y getGDPCountries () Los métodos funcionan de manera similar..
los getCountry () el método toma un nombre como argumento y devuelve el objeto de país cuya propiedad de nombre tiene el mismo valor que el argumento de nombre proporcionado.
Un servicio que usted crea es solo una clase en Angular hasta que lo haya registrado con un inyector de dependencia Angular. Un inyector angular será el responsable de crear las instancias de servicio e inyectarlas en diferentes clases que necesiten ese servicio. Necesitamos registrar un servicio con un proveedor antes de que el inyector pueda crear ese servicio.
Hay dos formas comunes de registrar cualquier servicio: usando un @Componente proveedor o utilizando el @NgModule proveedor. Utilizando la @Componente El proveedor tiene sentido cuando desea restringir el acceso de un servicio a un componente en particular y a todos sus componentes anidados. Utilizando la @NgModule El proveedor tiene sentido cuando desea que múltiples componentes tengan acceso al servicio.
En nuestro caso, estaremos utilizando Servicio País Con múltiples componentes de nuestra aplicación. Esto significa que deberíamos registrarlo con el @NgModule proveedor una vez, en lugar de registrarlo por separado con el @Componente proveedor de cada componente.
Actualmente, tu app.module.ts el archivo debería verse así:
importe BrowserModule desde '@ angular / platform-browser'; importe NgModule desde '@ angular / core'; importe AppComponent desde './app.component'; @NgModule (declaraciones: [AppComponent], importaciones: [BrowserModule], proveedores: [], bootstrap: [AppComponent]) clase de exportación AppModule
Añadir una declaración de importación a la app.module.ts Archivo y agregar el servicio a la @NgModule matriz de proveedores Después de hacer estos cambios, tu app.module.ts el archivo debería verse así:
importe BrowserModule desde '@ angular / platform-browser'; importe NgModule desde '@ angular / core'; importe AppComponent desde './app.component'; importe CountryService desde './country.service'; @NgModule (declaraciones: [AppComponent], importaciones: [BrowserModule], proveedores: [CountryService], bootstrap: [AppComponent]) export class AppModule
los Servicio País La clase ahora estará disponible para todos los componentes que creamos para nuestra aplicación..
Creando exitosamente tres archivos nombrados pais.ts, datos del país.ts, y pais.service.ts Concluye el segundo tutorial de esta serie..
los pais.ts archivo se utiliza para crear una País clase con diferentes propiedades como nombre, moneda, población, área, etc. datos del país.ts archivo se utiliza para almacenar una matriz de objetos de país que tienen información sobre diferentes países. los pais.service.ts archivo contiene una clase de servicio con diferentes métodos para acceder a los datos del país desde el PAÍSES formación. Escribir todos estos métodos por separado dentro de una clase de servicio nos permite acceder a ellos desde diferentes componentes de aplicaciones desde una ubicación central.
En la última sección, registramos nuestro servicio con la @NgModule Proveedor para que esté disponible para su uso dentro de diferentes componentes..
El siguiente tutorial le mostrará cómo crear tres componentes diferentes en su aplicación para mostrar los detalles del país y una lista de países.
Accentsconagua