创建你的第一个Angular应用程序。基础知识

今天你吸猫了么
127 阅读13分钟

* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}。

在过去的几年里，Angular 已经变得非常流行。你可以使用这个开源的JavaScript框架来构建网络和移动应用程序。如果你一直想学习Angular，但不知道从哪里开始，关注这个系列可能是一个好主意。

这个系列的目的是介绍Angular的基础知识，同时创建一个非常简单的应用程序，显示不同国家的信息。Angular是用TypeScript编写的，所以你用TypeScript编写自己的代码也是合理的。

入门

如果你已经熟悉了TypeScript，你可以直接开始创建你的第一个Angular应用。记住，Angular框架有两个主要版本。一个是AngularJS，也就是第1版。还有，Angular 2+，即第二版。AngularJS已经不再被支持，而且这两个版本之间有很多不同。

你应该使用Angular吗？

这是你必须首先问的几个问题之一。而且，这个问题的答案取决于。一些开发者会认为React更好。但是，React也有问题。Angular的一个优点是它是一个集成的框架，它允许你建立项目而不需要考虑很多库的问题。

如果你想尝试Angular，第一步是安装Node.js。然后你可以前往官方网站，下载相应的版本。Node包管理器npm将作为Node.js的一部分被安装。

TypeScript

下一步是通过运行以下命令来安装TypeScript。如果你对YypeScript不熟悉，不要担心。有一点JavaScript的知识是绰绰有余的。简单地说，TypeScript只是带有额外功能的类型化JavaScript。而且，许多现代编辑器在帮助你掌握TypeScript方面很有用。我也在Envato Tuts+上写了一个名为TypeScript for Beginners的系列，你可以先学习TypeScript的基础知识。

npm install -g typescript

Angular CLI

Angular框架带有自己的命令行界面（CLI）。CLI将为你完成大部分的常规任务。这就是为什么要开始使用Angular，你必须安装CLI。你可以通过运行以下命令来安装Angular CLI。

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 ，将自动在浏览器中打开你的应用程序，地址是https://localhost:4200/。

当你第一次运行应用程序时，你会看到下面的屏幕，而不用对代码做任何修改。那么，刚才发生了什么？Angular CLI运行一个Webpack开发服务器。Webpack开发服务器在端口4200 ，渲染应用程序。它还观察项目源代码的变化。每一次变化，代码都会重新编译，浏览器也会重新加载。由于你正在使用Angular CLI，你已经在正确配置的开发环境中工作了。所以，你不需要做任何事情，只需要开始做这个项目。

Angular screen Angular screen Angular screen

我们要建立什么？

国家信息应用程序概述

我们正在创建的国家信息应用程序将有三个组成部分。HomeComponent 将显示人口、GDP和面积等不同类别下的前三个国家。你将能够点击每个国家的名称来阅读更多关于它的信息。关于国家的额外信息是通过另一个组件列出的，我们将称之为CountryDetailComponent 。在我们的应用程序中还有一个组件，它将用于显示我们存储在应用程序中的所有国家的列表。

由于这是你的第一个Angular应用程序，我们的主要目的是保持简单，不添加任何复杂的功能。一旦你很好地掌握了基础知识，创建更复杂的应用程序就不会看起来是一项艰巨的任务。

下面的图片是我们的国家信息应用程序中的主页或HomeComponent 。正如你所看到的，每个类别下有三个国家，它们被按降序排列。在创建HomeComponent ，你将学习如何在模板内显示不同国家之前对它们进行排序。

下面的图片显示了 我们应用程序的"所有国家页面 "或 AllCountriesComponent 。这个组件的布局与 HomeComponent 非常相似。唯一不同的是，这次我们列出了所有国家和它们的首都。

如果你点击HomeComponent 或AllCountriesComponent 内的任何国家的方框，你将被带到国家的详细页面或CountryDetailComponent 。所提供的关于国家的信息是不可编辑的。

在每个国家的详细信息之后有一个返回按钮。这个后退按钮可以让你回到前一个组件或页面。如果你从HomeComponent 来到CountryDetailComponent ，你会被带回到HomeComponent 。如果你从AllCountriesComponent 来到CountryDetailComponent ，你会被带回到AllCountriesComponent 。

将我们正在创建的不同组件称为页面在技术上是不正确的。然而，我交替使用主页或 HomeComponent 等术语 ，因为看到很多不熟悉的术语，如路由、组件和装饰器，会让从未创建过Angular应用程序的读者感到害怕。在这个系列中，松散地使用这些术语可以帮助你快速学习，而不是被这些专业术语迷惑。

Angular基础知识

应用程序外壳

在你运行 ng new country-app 命令后 ，Angular CLI为你创建了一堆文件和文件夹。作为一个初学者，看到这么多文件可能会感到害怕，但你不需要处理所有这些文件。在创建我们的国家应用程序时，我们将只修改 src/app 文件夹 内已有的文件，以及在同一目录下创建新的文件。现在，你应该在 src/app 文件夹 里有五个不同的文件 。这些文件创建了一个应用程序外壳，它将被用来组合我们应用程序的其余部分。在Angular 12中，文件夹结构显示如下。

你的Angular文件夹的结构方式很重要。一个好的文件夹结构可以使代码维护变得简单，并且无缝。我们有一个很好的免费课程来帮助你理解和实现更好的文件夹结构。

技术细节

在我们开始创建我们的应用程序之前，你需要对Angular的基本概念感到满意。本节将非常简要地介绍组件和模板等重要主题。而且，这篇文章的目的是帮助你习惯于这些!

在Angular中，不管是哪个版本，你都有几个主要的构建模块。

  • 模块
  • 组件
  • 模板
  • 元数据
  • 数据绑定
  • 指令
  • 服务
  • 依赖性注入

你可以看到Angular 12架构的这些部分是如何组合在一起的。

什么是模块？

自Angular 2+以来，Angular一直专注于保持模块化。这就是为什么我们有Angular模块，也叫NgModules 。你创建的每个Angular应用程序都会有至少一个Angular模块：根模块。一般来说，这些模块被称为AppModule 。在开始时，你的应用程序将只有根模块。随着时间的推移，你最终会创建多个模块来定义工作流程，或特定应用域的能力。

记住，每个Angular模块都是一个包含@NgModule 装饰器的类。

装饰器 是为修改JavaScript中的类而编写的函数。装饰器被用来将元数据链接到类。这些元数据给出了一个类应该如何工作，以及应该如何配置的细节。

这里有一个AppModule 的元数据的例子。

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 { }

什么是组件？

组件是Angular应用程序的构建模块。它们允许你控制你的应用程序的用户界面。一个基本的组件由两部分组成：一个装饰器和一个类定义。你可以在类中指定一个组件的应用逻辑。

组件装饰器用于指定信息，如自定义选择器来识别组件，HTML模板的路径，以及应用于组件的样式规则。

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

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

我们创建的所有组件都会有一个自定义选择器，指定在浏览器中渲染组件的标签。这些自定义标签可以有任何你想要的名字。例如，我们将 在本系列的第三个教程中 创建一个 countryDetailComponent ，我们将使用我们自己的自定义标签 app-country-detail ，在浏览器中渲染这个组件。

这只是一个开始，我们还有一个关于Angular组件的深度指南。

什么是模板？

模板是Angular组件的伴侣。简单来说，模板不过是一个HTML片段。它告诉人们一个组件应该如何被呈现出来。在我们的HomeComponent ，模板显示如下。

<div class="container">
  <h2>Three Most Populated Countries</h2>
  <div class="group">
    <a *ngFor="let country of populatedCountries" class="country-unit" routerLink="/detail/{{country.name}}">
      <div class="country-block">
        <h4>{{country.name}}</h4>
        <p>{{country.population | number}}</p>
        <p>People</p>
      </div>
    </a>
  </div>
  <br>
  <h2>Three Largest Countries (Area)</h2>
  <div class="group">
    <a *ngFor="let country of largestCountries" class="country-unit" routerLink="/detail/{{country.name}}">
      <div class="country-block">
        <h4>{{country.name}}</h4>
        <p>{{country.area | number}} km
          <sup>2</sup>
        </p>
      </div>
    </a>
  </div>
  <br>
  <h2>Countries with Highest GDP</h2>
  <div class="group">
    <a *ngFor="let country of gdpCountries" class="country-unit" routerLink="/detail/{{country.name}}">
      <div class="country-block">
        <h4>{{country.name}}</h4>
        <p>{{country.gdp | number}} USD</p>
      </div>
    </a>
  </div>
</div>

它是普通的HTML，但有一些区别。例如，我们利用*ngFor 来循环浏览数组，并在视图中呈现。

<a *ngFor="let country of populatedCountries" class="country-unit" routerLink="/detail/{{country.name}}">
  <div class="country-block">
    <h4>{{country.name}}</h4>
    <p>{{country.population | number}}</p>
    <p>People</p>
  </div>
</a>

什么是数据绑定？

当你没有一个框架的时候，数据值应该被推送到HTML控件中，每当用户对某些动作或数值做出反应时。这种推拉逻辑很容易出错，也很乏味。最重要的是，手动处理它们可能是一场噩梦。这就是为什么Angular框架提供了数据绑定 。

根据定义，数据绑定是一种协调模板和组件的机制。DOM和组件之间的整体控制流如下。

当你冒险进入国家应用程序时，你会看到有几个地方的按钮点击事件被捕获，视图的变化反映在业务逻辑上。你会发现下面这些代码。

一个事件绑定的例子。

<button (click)="goBack()">Go Back</button>

一个属性绑定的例子。

<country-detail [country]="selectedCountry"></country-detail>

同样，app.component.ts 文件包含了我们用TypeScript编写的组件的逻辑。你可以打开这个文件，将AppComponent 类 的 title 属性 更新 为'Fun Facts About Countries' 。 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 标签内。

双向数据绑定是一个关键的部分，因为它将事件和属性绑定结合到一个符号中。这无非就是ngModel 指令。下面是一个简单的双向数据绑定的例子。

<input [(ngModel)]="country.name" placeholder="name"/>

在双向绑定中，数据从具有属性绑定的组件流向输入框。而且，当用户改变一个值时，数据通过事件绑定流回组件。在Angular中，所有的数据绑定在每个JavaScript事件周期中只被处理一次。

数据绑定在Angular表单中起着至关重要的作用。无论是反应式表单，还是模板驱动的表单，你都需要双向的数据绑定。我们有一个教程，你可以了解更多关于双向绑定和Angular表单。

什么是服务？

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

你可以把Service ，简单地说，就是你的应用程序需要的任何值、功能或特性。获取存储在我们应用程序内的所有国家是一种服务，对它们进行分类和显示也是一种服务。我们类中的三个组件都将使用我们服务中的函数来检索数据。

下面是 我们将要创建的 country-app 的代码片段 。 @angular/core正如你所看到的，我们正在 从 Component 和 OnInit 。同样，我们正在 从我们自己创建的文件中导入一个 Country 和 CountryService 。

import { Component, OnInit } from '@angular/core';
 
import { Country } from '../country';
import { CountryService } from '../country.service';

服务和依赖注入是Angular框架的一个重要话题。当你构建国家应用程序时，在我们即将到来的教程中，你将了解其重要性。而且，如果你希望了解Angular服务的所有内部情况，请查看我们的Angular服务初级指南。

运行应用程序

对该文件所做的修改将自动反映在浏览器中，网址 是http://localhost:4200/。只要确保控制台仍然打开，并且你已经 输入了本教程开始时 的ng serve 命令 。

该应用程序的不同功能和特性将由我们稍后创建的多个更简单的组件控制。你可以把这个应用程序的外壳想象成一辆汽车，而我们将创建的不同组件则是汽车的部件，如发动机和车轮。每个组件都将执行其特定的功能，你可以把它们放在一起，以创建整个汽车。

最后的思考

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

总而言之，在创建Angular应用程序之前，你需要了解TypeScript的基本知识。在下一步，你需要安装Node.js、TypeScript和Angular CLI。之后，你只需运行本教程入门部分的npm命令，你的第一个Angular应用就可以启动并运行了。

我们的乡村应用将做很多事情，而不仅仅是显示标题。在接下来的教程中，你将创建一些类和服务，用于存储和检索不同国家的数据。这些类和服务将在第三和第四个教程中发挥作用，我们将在这两个教程中创建我们应用程序的不同组件。

这篇文章由Divya Dev提供更新。Divya是一位拥有超过五年经验的前端开发者。她是安娜大学的毕业生和金牌获得者。

avatar
文章
阅读
粉丝