我尝试实践了Angular的官方教程。第一部分

2 年 ago
清, 扬
3 minutes

我试着跟着Angular官方教程进行实践。这是第一篇。

我将继续学习Angular，就像昨天一样。
这篇文章是我实践官方网页上的教程内容的日志。
昨天是入门篇，从这次开始我们将开始实际创建教程应用程序。

我想把这篇文章分成几个部分来进行。

只需要一种选择

已经执行过上一篇文章了。

由于我建议使用Angular而不是angular.js，所以我立即开始学习它。

你要做什么？

「英雄之旅教程」是一个名为「ツアー・オブ・ヒーローズ チュートリアル」的应用程序。
有关其功能的详细说明，请参考官方网页。

参考资料：https://angular.jp/tutorial
官方示例：https://angular.jp/generated/live-examples/toh-pt6/stackblitz.html

完成此教程后，您将能够做到以下事项。

・可见/隐藏元素。
・使用内置的Angular指令来显示数据列表。
・创建Angular组件来显示列表的详细信息或列表本身。
・使用单向数据绑定来处理只读数据。
・使用双向数据绑定，在可编辑的字段上更新模型。
・将组件的方法绑定到用户事件，例如按键输入或点击。
・允许用户从主列表中选择元素，并在详细页面中对其进行编辑。
・使用管道对数据进行格式化。
・创建共享服务以构建列表。
・使用路由来实现不同视图及其组件之间的转换。

制作组件可以进行各种处理，对吧。我相信。（随便说说）

最初是昨天所做内容的复习。

创建新的工作空间和初始应用程序链接。

那么，首先我们来创建工作空间和初始应用程序。
完成创建后，直接提供该应用程序。

ng new angular-tour-of-heroes
cd angular-tour-of-heroes
ng serve --open

当操作正常完成后，页面将在浏览器上显示出来。

这个显示的页面是一个应用程序壳，是由一个叫做AppComponent的Angular组件进行操作的。

组件是Angular的基本构成要素，它可以在界面上显示数据并等待用户输入，可以对输入做出反应。

我明白了。但是我不太理解。
我暂时先试着继续前进吧。

更改应用程序

似乎AppComponent壳是分为三个文件的。
这些文件存放在src/app目录中。

・app.component.ts是一个用TypeScript编写的组件类的代码。

・app.component.html是一个用HTML编写的组件模板。

・app.component.css
这是专门针对该组件的CSS样式。

首先，我們會從app.component.ts檔案中進行編輯。
我們將重新撰寫標題。

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

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

我对TypeScript还不是很了解，但大概明白了AppComponent这个类设置了一个名为title的属性。(´･ω･｀)

接下来，我们将编辑 app.component.html 文件。
我们将编辑被 h1 标签包围的部分。

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    <h1>{{title}}</h1>
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

<router-outlet></router-outlet>

这个h1标签被双大括号包围着。
这是插值绑定的语法样式。

据此看来，我刚才编辑的 app.component.ts 中的标题设置的值将会传递。

接下来我们要进行CSS的设置。

/* Application-wide Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[type="text"], button {
  color: #888;
  font-family: Cambria, Georgia;
}
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

只要字的颜色变成蓝色就可以了。
因为这部分和昨天做的内容没有太大差异，所以不会感到惊讶。

现在开始是今天学习的正式时刻。

创建一个新的组件。

为了学习从今天开始的内容，我们将创建一个新的组件。

ng generate component heroes

运行此命令后，将在src/app/下创建一个新的heroes组件。

我們來確認一下這個 heroes.component.ts 的內容。

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

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

首先，我们从核心库中导入了Component组件。
然后，我们使用@Component在组件类上添加了注解。
通过这样做，似乎可以定义元数据。

由于CLI自动创建了3个属性，所以我们将进行确认。

・选择器
组件的CSS元素选择器。
也就是说app-root将成为CSS元素的选择器。

・templateUrl
指定组件的模板文件位置。
当前目录下的 app.component.html 被指定。

・styleUrls
指定组件私有CSS样式的位置
app.component.css位于当前目录中。

ngOnInit() 是一個被稱為生命週期鉤子的方法，當 Angular 創建組件後立即被調用，因此適合設置初始化邏輯的地方。

那么接下来，我们尝试添加属性。
为这个名叫Windstorme的英雄…让我们给他起一个喜欢的名字。

我的童年英雄是《忍者龟》中的唐尼龟（Donatello）。因此，我为这个英雄创建了一份专属财产。

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

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  hero = 'Donatello';

  constructor() { }

  ngOnInit() {
  }

}

在添加属性后，接下来需要向HTML中添加到”hero”属性的数据绑定。

<p>
  {{hero}}
</p>

如果你已经做到了这一步，接下来就要将创建的HeroComponent添加到AppComponent的模板中。
app-heroes似乎是HeroesComponent的元素选择器。

让我们在AppComponent的模板文件标题下添加一个元素。
然后重新启动服务。

今天就到这里吧！虽然还未完成，但已将制作的组件推送至GitHub。

参考此链接：https://github.com/ryuutamaehara/Angular-tutorial

明天起计划从”显示HeroesComponent视图”开始。

困惑了(:3 」∠)

✖
广告
将在 10 秒后关闭
bannerAds