创建您的第一个Angular应用程序：基础知识

在过去的几年里，angular变得非常流行。您可以使用这个开源javascript框架来构建Web 和移动应用程序。如果您一直在考虑学习 Angular 但不知道从哪里开始，那么关注本系列可能是一个好主意。

本系列的目的是介绍 Angular 的基础知识，同时创建一个非常简单的应用程序来显示不同***的信息。Angular 是用 typescript 编写的，因此您也可以用 TypeScript 编写自己的代码。

如果您以前从未使用过 TypeScript，则无需担心。简单地说，TypeScript 只是带有附加功能的类型化 JavaScript。我还在 Envato Tuts+ 上写了一个名为TypeScript for Beginners的系列，您可以在其中首先学习 TypeScript 的基础知识。

入门

如果您已经熟悉 TypeScript，则可以继续并开始创建您的第一个 Angular 应用程序。

第一步是安装node .js。您可以前往官方网站并下载相应的版本。节点包管理器将作为 Node.js 的一部分安装。

下一步是通过运行以下命令来安装 TypeScript。我建议您安装超过 2.1 的 TypeScript 版本。

npm install -g typescript

最后，您必须通过运行以下命令来安装 Angular CLI。安装 Angular CLI 将使创建 Angular 应用程序的过程更容易。

npm install -g @angular/cli

现在，您可以通过在终端中运行以下命令来立即创建一个新的 Angular 应用程序。在运行命令之前，请确保您已移动到要创建应用程序的目录。

ng new country-app

安装项目的所有依赖项需要一些时间，因此请在 Angular CLI 设置您的应用程序时耐心等待。安装完成后，您将看到一个以country-app当前目录命名的文件夹。您可以通过将目录更改为country-app 然后ng serve在控制台中运行来立即运行您的应用程序。

cd country-app
ng serve --open

添加--open将自动在浏览器中打开您的应用程序 http://localhost:4200/。

***信息应用概述

咱们正在创建的***信息应用程序将包含三个组件。HomeComponent它将显示人口、GDP 和面积等各种类别下的前三个***。您将能够单击每个***/地区的名称以了解更多信息。有关***/地区的其他信息使用另一个组件列出，咱们将其称为CountryDetailComponent. 咱们的应用程序中将多出一个组件，用于显示咱们在应用程序中存储的所有***/地区的列表。

由于这是您的第一个 Angular 应用程序，咱们的主要目标是在不添加任何复杂功能的情况下保持简单。一旦掌握了基础知识，创建更复杂的应用程序似乎就不会是一项艰巨的任务。

下图是主页或HomeComponent 咱们***信息应用程序中的图像。如您所见，每个类别下有三个***，它们已按降序排列。在创建时HomeComponent，您将学习如何在将不同***/地区显示在模板中之前对其进行排序。

创建您的第一个Angular应用程序：基础知识第1张

下图显示了“所有***页面”或 AllCountriesComponent咱们的应用程序。该组件的布局与HomeComponent. 唯一不同的是，这次咱们列出了所有***及其资本。

创建您的第一个Angular应用程序：基础知识第2张

如果您单击在HomeComponent或中呈现的任何***的框AllCountriesComponent，您将被带到***详细信息页面或CountryDetailComponent。提供的有关***/地区的信息不可编辑。

每个***的详细信息后面都有一个后退按钮。此后退按钮将您带回上一个组件或页面。如果你CountryDetailComponent从那里来HomeComponent，你会被带回HomeComponent。如果您CountryDetailComponent从到达AllCountriesComponent，您将被带回AllCountriesComponent。

创建您的第一个Angular应用程序：基础知识第3张

将咱们创建的不同组件称为页面在技术上是不正确的。但是，我使用的是主页之类的术语或HomeComponent可互换使用的术语，因为看到许多不熟悉的术语，例如路由、组件和装饰器，对于以前从未创建过 Angular 应用程序的读者来说可能会令人生畏。在本系列中松散地使用这些术语可以帮助您快速学习，而不是被行话弄糊涂。

角度基础

在咱们开始创建咱们的应用程序之前，您需要熟悉 Angular 的基本概念。本节将非常简要地介绍组件和模板等重要主题。

组件是 Angular 应用程序的构建块。它们允许您控制应用程序的 UI。一个基本组件由两部分组成：装饰器和类定义。您可以为类内的组件指定应用程序逻辑。

组件装饰器用于指定信息，例如用于标识组件的自定义选择器、html 模板的路径以及要应用于组件的样式规则。

这是一个基本的组件装饰器，它为设置所有三个值CountryDetailComponent：

@Component({
    selector: 'app-country-detail',
    templateUrl: './country-detail.component.html',
    styleUrls: ['./country-detail.component.css']
})

咱们创建的所有组件都将有一个自定义选择器，它指定在浏览器中呈现组件的标签。这些自定义标签可以具有您想要的任何名称。例如，咱们将countryDetailComponent在本系列的第三篇教程中创建一个，咱们将使用咱们自己的自定义标签调用 app-country-detail来在浏览器中呈现这个组件。

您创建的任何组件都将包含一个模板，该模板控制在应用程序页面上呈现的内容。例如，countryDetailComponent有两个div标签，它们充当组件主要内容的包装器。关于一个***的每条信息都放在自己的p标签内，而***名称则放在一个h2标签内。所有这些标签都可以作为模板存储在一起countryDetailComponent，然后作为一个单元呈现。该组件模板可以保存为 HTML 文件，也可以使用template属性直接在装饰器中指定。

咱们应用程序的不同组件将需要检索数据以显示在屏幕上。咱们将创建一个服务类，其中包含帮助咱们检索这些数据并以一种或另一种方式对其进行排序或修改的功能。然后，咱们将使用不同组件类的功能向用户显示这些数据。

您可以将 a Service简单地视为您的应用程序需要的任何值、功能或特性。将所有***/地区存储在咱们的应用程序中是一项服务，排序和显示它们也是如此。咱们类中的所有三个组件都将使用咱们服务中的函数来检索数据。

在为您的应用程序创建组件时，您必须从不同的模块导入依赖项。例如，每当咱们创建自己的组件时，咱们都Component将从中导入。@angular/core您还可以使用相同的语法来导入您创建的依赖项。curl y 括号内的部分用于指定要导入的依赖项，后面的部分from用于指定 Angular 可以在哪里找到依赖项。

country-app这是咱们将要创建的代码片段。如您所见，咱们Component正在OnInit从@angular/core. 同样，咱们正在从咱们自己创建的文件中导入Country和CountryService。

import { Component, OnInit } from '@angular/core';

import { Country } from '../country';
import { CountryService } from '../country.service';

应用程序外壳

运行ng new country-app命令后，Angular CLI 会为您创建一堆文件和文件夹。作为初学者，看到这么多文件可能会令人生畏，但您不需要处理所有这些文件。在创建咱们的***应用程序时，咱们只会修改文件src/app夹中已经存在的文件以及在同一目录中创建新文件。现在，文件夹中应该有五个不同的src/app文件。这些文件创建了一个应用程序外壳，用于将咱们应用程序的其余部分组合在一起。

该app.component.ts文件包含咱们用 TypeScript 编写的组件的逻辑。您可以打开此文件并将类的title属性更新AppComponent为“关于***的有趣事实”。该app.component.ts文件现在应该具有以下代码。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Fun Facts About Countries';
}

该app.component.html文件包含咱们AppComponent类的模板。打开app.component.html文件并将其中的样板 HTML 代码替换为以下行：