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

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

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

如果您以前从未使用过TypeScript，则无需担心。 简而言之，TypeScript只是具有附加功能JavaScript类型。 我还在Envato Tuts +上写了一个标题为初学者的TypeScript系列文章，在这里您可以首先学习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 。 如您所见，每个类别下有3个国家/地区，并按降序排列。 在创建HomeComponent ，您将学习如何在模板中显示不同国家之前对其进行排序。

下图显示了我们应用程序的“所有国家/地区页面”或AllCountriesComponent 。 该组件的布局与HomeComponent非常相似。 唯一的区别是，这次我们将列出所有国家及其首都。

如果你点击里面呈现无论是任何一个国家的盒子HomeComponent或AllCountriesComponent ，你会被带到该国详细信息页面或CountryDetailComponent 。 提供的有关国家的信息不可编辑。

每个国家/地区的详细信息后面都有一个后退按钮。 此后退按钮可将您带回到上一个组件或页面。 如果你来到CountryDetailComponent从HomeComponent ，你将被带回HomeComponent 。 如果从AllCountriesComponent到达CountryDetailComponent ，您将被带回到AllCountriesComponent 。

从页面上引用我们正在创建的不同组件在技术上是不正确的。 但是，我可以互换地使用诸如Homepage或HomeComponent类的术语，因为看到很多陌生的术语（如路由，组件和装饰器）可能会对以前从未创建过Angular应用程序的读者产生威胁。 在本系列中松散使用这些术语可以帮助您快速学习，而不会被行话弄糊涂。

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属性直接在装饰器内部指定。

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

您可以将Service视为应用程序所需的任何值，功能或功能。 将所有国家/地区存储在我们的应用程序中是一项服务，对它们进行排序和显示也是如此。 此类中的所有三个组件都将使用服务中的函数来检索数据。

在为您的应用创建组件时，您将必须从其他模块导入依赖项。 例如，每当我们创建自己的组件时，都会从@angular/core导入Component 。 您也可以使用相同的语法来导入您创建的依赖项。 大括号内的部分用于指定要导入的依赖项， from之后的部分用于指定Angular在何处可以找到依赖项。

这是我们将要创建的country-app的代码片段。 如您所见，我们正在从@angular/core导入Component和OnInit 。 同样，我们将从自己创建的文件中导入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编写的组件的逻辑。 您可以打开此文件，并将AppComponent类的title属性更新为“关于国家的事实”。 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代码替换为以下行：

<h1>{{title}}</h1>

通过将title包装在大括号内，我们告诉Angular将AppComponent类的title属性的值放在h1标签内。

我们将在本系列的最后一篇教程中更新此文件，以呈现将要创建的新组件。 现在，它只需要显示我们应用的标题即可。

对该文件所做的更改将自动反映在浏览器中的http：// localhost：4200 /上 。 只需确保控制台仍处于打开状态，并且您已经从教程开始输入了ng serve命令即可。

该应用程序的不同功能和功能将由我们稍后创建的多个更简单的组件控制。 您可以将这个应用程序外壳视为汽车，以及我们将作为该汽车的零件创建的不同组件，例如引擎和车轮。 每个组件将执行其特定功能，您可以将它们放在一起以创建整个汽车。

最后的想法

本教程的目的是帮助您安装创建Angular应用所需的所有必要工具，并快速介绍一些基本的Angular概念。

总之，在创建Angular应用之前，您需要了解TypeScript的基础 。 在下一步中，您需要安装Node.js ，TypeScript和Angular CLI。 之后，您可以从本教程的“入门”部分运行一堆命令，然后您的第一个Angular应用程序将启动并运行。

我们国家的应用程序不仅会显示标题，还可以做很多事情。 在下一个教程中，您将创建一些类和服务，用于存储和检索有关不同国家的数据。 这些类和服务在第三和第四教程中将非常有用，我们将在其中创建应用程序的不同组件。

在我们阅读本教程系列的同时，不要忘了查看Envato Market，以了解一般可用的语言以及对Angular和JavaScript的研究。

翻译自: https://code.tutsplus.com/tutorials/creating-your-first-angular-app-basics--cms-30092