찾다
웹 프론트엔드JS 튜토리얼첫 번째 Angular 앱 구축: 데이터 저장 및 액세스

첫 번째 Angular 앱 구축: 데이터 저장 및 액세스

이 시리즈의 첫 번째 튜토리얼에서 우리는 Angular 애플리케이션 생성을 시작하는 방법을 배웠습니다. 이 튜토리얼을 성공적으로 완료한 후에는 이제 "국가에 대한 흥미로운 사실"이라는 제목의 첫 번째 작동하는 Angular 애플리케이션을 갖게 될 것입니다. 화면에 렌더링할 수 있는 구성 요소를 만들기 전에 몇 가지 클래스를 만들고 이러한 구성 요소를 유용하게 만드는 몇 가지 기능을 정의하겠습니다.

이 튜토리얼에서는 정보를 제공하는 데 필요한 모든 기능을 갖춘 Country 类,该类将包含我们想要向用户显示其值的不同属性。然后,我们将创建另一个名为 country-data.ts 的文件。该文件将包含有关我们应用程序中所有国家/地区的信息。我们的第三个文件将被命名为 country.service.ts。这个名称可能听起来很花哨,但该文件将只包含 CountryService 类,该类具有检索和排序文件 country-data.ts을 만드는 데 중점을 둡니다.

국가 카테고리 만들기

Angular 애플리케이션의 src/app 文件夹中,创建一个名为 country.ts 파일. 그 안에 다음 코드를 추가하세요.

으아악

위의 TypeScript 코드는 Country 类,该类具有六个不同的属性来存储有关不同国家/地区的信息。国家名称、首都和货币存储为字符串。然而,其面积、人口和 GDP 都以数字形式存储。我们将在很多地方导入 Country 类,因此我在类定义之前添加了 export 키워드를 정의합니다.

국가 배열 만들기

다음 단계에서는 다양한 국가 객체를 저장하는 country-data.ts 文件,以将所有国家/地区的信息存储为 Country 对象的数组。我们将在此文件中导入 Country 类,然后导出名为 COUNTRIESconst 을 만드는 것입니다.

이 파일이 생성되는 country-data.ts 的代码。就像 country.ts 一样,您必须在 src/app 폴더입니다.

으아악

이 파일의 첫 번째 줄은 같은 디렉터리에 있는 country.ts 文件导入 Country 클래스에서 가져온 것입니다. 파일에서 이 줄을 제거하면 TypeScript는 다음 오류를 표시합니다.

으아악

import 문이 없으면 TypeScript는 Country 类型的数组的含义。因此,请确保您已导入正确的类并正确指定 country.ts가 어디에 있는지 알 수 없습니다.

가져오기Country 类后,我们继续创建 Country 对象的数组。我们将导入这个国家/地区数组以便在其他文件中使用,因此我们也向该数组添加 export 关键字。目前,数组中有五个不同的 Country 개체. 이 5개 개체 각각은 특정 개체 또는 국가에 대한 속성 이름과 해당 값을 나열하는 키-값 쌍을 제공합니다.

클래스 정의에 선언되지 않은 배열에 추가 속성을 추가하려고 하면 다음 오류가 발생합니다. Country 으아악

이 예에서는 대통령의 이름을

속성에 저장하려고 합니다. 그러한 속성이 선언되지 않았기 때문에 오류가 발생했습니다. 때로는 특정 개체에 대해서만 속성을 지정하고 다른 개체에는 속성을 지정하지 않으려는 경우도 있습니다. 이 경우 클래스 정의에서 해당 속성을 선택 사항으로 표시할 수 있습니다. TypeScript 인터페이스를 다루는 튜토리얼에서 이에 대해 더 자세히 논의합니다. string ,并将其存储在名为 president

이제 모든 속성의 이름이 클래스 정의의 이름과 일치하는지 확인하세요. 또한 각 속성의 값이 클래스 정의에 선언된 것과 동일한 유형인지 확인하십시오.

CountryService 클래스 만들기

클래스와 COUNTRIES 배열을 생성한 후 이제 마침내 국가 데이터를 처리하는 몇 가지 함수를 작성할 수 있습니다. 서비스 파일에서 Country 类和 COUNTRIES 数组后,我们现在终于可以编写一些函数来处理国家/地区数据了。我们需要在服务文件中导入 Country 类和 COUNTRIES 数组。该文件需要导入 COUNTRIES 数组才能访问数据。同样,该文件必须导入 Country 类,以便理解 COUNTRIES 클래스와 COUNTRIES 배열을 가져와야 합니다. 데이터에 액세스하려면 이 파일에서 COUNTRIES 배열을 가져와야 합니다. 다시 말하지만, COUNTRIES 배열 내의 데이터를 이해하려면 파일에서

클래스를 가져와야 합니다. 🎜

我们还将从 Angular 核心导入其他依赖项,例如 Injectable ,以使我们的 CountryService 类可用于注入器注入其他组件。

一旦您的应用程序规模增大,不同的模块将需要相互通信。假设 ModuleA 需要 ModuleB 才能正常工作。在这种情况下,我们将 ModuleB 称为 ModuleA 的依赖项。

大多数情况下,只需将我们需要的模块导入到另一个文件中即可。然而,有时我们需要决定是否应该从 ModuleB 创建一个由整个应用程序使用的类实例,或者是否应该在每次使用模块时创建一个新实例。在我们的例子中,我们将在整个应用程序中注入 CountryService 类的单个实例。

这是 country.service.ts 的代码:

import { Injectable } from '@angular/core';

import { Country } from './country';
import { COUNTRIES } from './country-data';

@Injectable()
export class 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);
  }
}

@injectable 装饰器用于标识可能需要注入依赖项的服务类。然而,将 @injectable 添加到服务类是必需的编码风格,所以我们无论如何都会这样做。

之后,我们为该类编写不同的方法,这些方法采用 COUNTRIES 数组,直接返回它或使用特定条件对其进行排序,然后返回数组的一部分。

getCountries() 方法预计会返回所有 Country 对象,因此它会返回整个 COUNTRIES 数组,而不进行任何操作对其进行修改。

getPopulatedCountries() 采用 COUNTRIES 数组,并根据不同国家/地区的人口按降序对其进行排序。然后,我们使用 Array.slice() 方法从数组中返回前三个国家(索引为 0、1 和 2)。 getLargestCountries()getGDPCountries() 方法的工作方式类似。

getCountry() 方法采用名称作为参数,并返回 name 属性与提供的 name 参数具有相同值的国家/地区对象。

在 app.module.ts 中包含 CountryService

您创建的服务只是 Angular 中的一个类,直到您使用 Angular 依赖注入器注册它为止。 Angular 注入器将负责创建服务实例并将它们注入到需要该服务的不同类中。我们需要先向提供者注册一个服务,然后注入器才能创建该服务。

注册任何服务有两种常见方法:使用 @Component 提供商或使用 @NgModule 提供商。当您想要限制对特定组件及其所有嵌套组件的服务访问时,使用 @Component 提供程序是有意义的。当您希望多个组件能够访问该服务时,使用 @NgModule 提供程序是有意义的。

在我们的例子中,我们将使用 CountryService 与我们应用程序的多个组件。这意味着我们应该向 @NgModule 提供程序注册一次,而不是向每个组件的 @Component 提供程序单独注册。

目前,您的 app.module.ts 文件应如下所示:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

将导入语句添加到 app.module.ts 文件,并将服务添加到 @NgModule 提供程序数组。进行这些更改后,您的 app.module.ts 文件应如下所示:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CountryService } from './country.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [CountryService],
  bootstrap: [AppComponent]
})
export class AppModule { }

CountryService 类现在可供我们为应用程序创建的所有组件使用。

最终想法

成功创建三个文件,分别名为 country.tscountry-data.tscountry.service.ts 的第二个教程结束这个系列。

country.ts 文件用于创建一个 Country 类,该类具有不同的属性,如名称、货币、人口、面积等。 country-data.ts 文件用于存储国家对象数组,其中包含不同国家的信息。 country.service.ts 文件包含一个服务类,该服务类具有不同的方法来访问 COUNTRIES 数组中的国家/地区数据。将所有这些方法单独编写在服务类中,使我们能够从一个中心位置在不同的应用程序组件中访问它们。

在上一节中,我们向 @NgModule 提供程序注册了我们的服务,以使其可在不同组件内使用。

다음 튜토리얼에서는 국가 세부 정보와 국가 목록을 표시하기 위해 앱에서 세 가지 구성 요소를 만드는 방법을 보여줍니다.

위 내용은 첫 번째 Angular 앱 구축: 데이터 저장 및 액세스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
华为明年将推创新 MED 存储产品:机架容量超过 10 PB,功耗低于 2 kW华为明年将推创新 MED 存储产品:机架容量超过 10 PB,功耗低于 2 kWMar 07, 2024 pm 10:43 PM

本站3月7日消息,华为数据存储产品线总裁周跃峰博士日前出席MWC2024大会,专门展示了为温数据(WarmData)和冷数据(ColdData)设计的新一代OceanStorArctic磁电存储解决方案。华为数据存储产品线总裁周跃峰发布系列创新解决方案图源:华为本站附上华为官方新闻稿内容如下:该方案的成本比磁带低20%,功耗比硬盘低90%。根据国外科技媒体blocksandfiles报道,华为发言人还透露了关于该磁电存储解决方案的信息:华为的磁电磁盘(MED)是对磁存储介质的重大创新。第一代ME

Vue3+TS+Vite开发技巧:如何进行数据加密和存储Vue3+TS+Vite开发技巧:如何进行数据加密和存储Sep 10, 2023 pm 04:51 PM

Vue3+TS+Vite开发技巧:如何进行数据加密和存储随着互联网技术的快速发展,数据的安全性和隐私保护变得越来越重要。在Vue3+TS+Vite开发环境下,如何进行数据加密和存储,是每个开发人员都需要面对的问题。本文将介绍一些常用的数据加密和存储的技巧,帮助开发人员提升应用的安全性和用户体验。一、数据加密前端数据加密前端加密是保护数据安全性的重要一环。常用

如何在 Windows 11 上清理缓存:详细的带图片教程如何在 Windows 11 上清理缓存:详细的带图片教程Apr 24, 2023 pm 09:37 PM

什么是缓存?缓存(发音为ka·shay)是一种专门的高速硬件或软件组件,用于存储经常请求的数据和指令,这些数据和指令又可用于更快地加载网站、应用程序、服务和系统的其他部分。缓存使最常访问的数据随时可用。缓存文件与缓存内存不同。缓存文件是指经常需要的文件,如PNG、图标、徽标、着色器等,多个程序可能需要这些文件。这些文件存储在您的物理驱动器空间中,通常是隐藏的。另一方面,高速缓存内存是一种比主内存和/或RAM更快的内存类型。它极大地减少了数据访问时间,因为与RAM相比,它更靠近CPU并且速度

正确利用sessionStorage保护敏感数据的方法正确利用sessionStorage保护敏感数据的方法Jan 13, 2024 am 11:54 AM

如何正确使用sessionStorage存储敏感信息,需要具体代码示例无论是在Web开发还是移动应用开发中,我们常常需要存储和处理敏感信息,如用户登录凭证、身份证号码等。在前端开发中,使用sessionStorage是一种常见的存储方案。然而,由于sessionStorage是基于浏览器的存储,需要注意一些安全性的问题,以确保存储的敏感信息不被恶意访问和利用

PHP和swoole如何实现高效的数据缓存和存储?PHP和swoole如何实现高效的数据缓存和存储?Jul 23, 2023 pm 04:03 PM

PHP和swoole如何实现高效的数据缓存和存储?概述:在Web应用开发中,数据的缓存和存储是非常重要的一部分。而PHP和swoole提供了一种高效的方法来实现数据的缓存与存储。本文将介绍如何使用PHP和swoole来实现高效的数据缓存和存储,并给出相应的代码示例。一、swoole简介:swoole是一个针对PHP语言开发的,高性能的异步网络通信引擎,它可以

Java集合框架全解析:解剖数据结构,揭秘高效存储之道Java集合框架全解析:解剖数据结构,揭秘高效存储之道Feb 23, 2024 am 10:49 AM

Java集合框架概述Java集合框架是Java编程语言的重要组成部分,它提供了一系列可以存储和管理数据的容器类库。这些容器类库具有不同的数据结构,可以满足不同场景下的数据存储和处理需求。集合框架的优势在于它提供了统一的接口,使得开发人员可以使用相同的方式来操作不同的容器类库,从而降低了开发难度。Java集合框架的数据结构Java集合框架中包含多种数据结构,每种数据结构都有其独特的特性和适用场景。下面是几种常见的Java集合框架数据结构:1.List:List是一个有序的集合,它允许元素重复。Li

使用PHP数组实现数据缓存和存储的方法和技巧使用PHP数组实现数据缓存和存储的方法和技巧Jul 16, 2023 pm 02:33 PM

使用PHP数组实现数据缓存和存储的方法和技巧随着互联网的发展和数据量的急剧增长,数据缓存和存储成为了我们在开发过程中必须要考虑的问题之一。PHP作为一门广泛应用的编程语言,也提供了丰富的方法和技巧来实现数据缓存和存储。其中,使用PHP数组进行数据缓存和存储是一种简单而高效的方法。一、数据缓存数据缓存的目的是为了减少对数据库或其他外部数据源的访问次数,从而提高

一文读懂人工智能表:从MindsDB说起一文读懂人工智能表:从MindsDB说起Apr 12, 2023 pm 12:04 PM

本文转载自微信公众号「活在信息时代」,作者活在信息时代。转载本文请联系活在信息时代公众号。对于熟悉数据库操作的同学来说,编写优美的SQL语句,从数据库中想方设法找出自己需要的数据,是常规操作了。而对于熟悉机器学习的同学来说,获取数据,对数据进行预处理,建立模型,确定训练集和测试集,用训练好的模型对未来进行一系列的预测,也是一种常规操作了。那么,我们能否将两种技术结合起来呢?我们看到数据库里存储了数据,而进行预测需要基于以往的数据。如果我们通过数据库里现有的数据,对于未来的数据进行查询的话,那么是

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경