从今天开始，我尝试使用Angular进行实践（包括Angular基础、英雄之旅教程）

2 年 ago
科, 雅
4 minutes

今天开始参与Angular系列的第二弹。
这次我尝试学习Angular基础的英雄之旅教程。

【尝试涉足】Angular（Angular基础入门教程）从今天开始试一试。

在本次教程中能够学到的东西。

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

这次要制作的东西

起始于展示最勇敢的英雄的仪表板，并且将引导您到何方的视觉概念。

スクリーンショット 2019-02-05 1.01.39.png

创建新项目

ローカルに新規フォルダを作成する。
↓↓↓
ng new angular-tour-of-heroes
//「angular-tour-of-heroes」フォルダの中にプロジェクトファイルをインストール
↓↓↓
Enterキーを押してデフォルト値を受ける
↓↓↓
cd angular-tour-of-heroes
//移動
↓↓↓
ng serve --open
//--openオプションを付けてCLIコマンド ng serve を使用してサーバーを起動
↓↓↓
http://localhost:4200/
//ブラウザで開く
スクリーンショット 2019-02-05 1.12.57.png

应用程序壳

所展示的页面被称为应用程序外壳。
该外壳由名为AppComponent的Angular组件操作，是Angular应用程序的基本组成部分。组件在屏幕上显示数据，等待用户输入，并对该输入采取相应的行动。

修改应用程序

用编辑器（Visual Studio Code）打开”src/app”

修改标题

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-tour-of-heroes';
}
//titleプロパティの値をTour of Heroesに変更

↓修改后

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
}
スクリーンショット 2019-02-05 1.19.45.png

更改h1标签元素的内容

空白ページ.png
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </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>

//<h1>{{title}}</h1>
//h1タグの中身を変更する

↓修改后

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>{{title}}</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>

更改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;
}
スクリーンショット 2019-02-05 1.34.24.png

结束

概括

使用Angular CLI创建初始应用程序的框架
使用Angular组件来显示数据
使用双括号插值来显示应用程序的标题

英文翻译：英雄编辑器

中文同义词：英雄编辑软件

ng generate component heroes
//「src/app/」の中に「heroes」を生成する
スクリーンショット 2019-02-05 1.46.01.png

生成三个元数据属性

・selector- 组件的CSS元素选择器
・templateUrl- 组件的模板文件
・styleUrls- 组件的私有CSS样式

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

@Component({
  selector: 'app-heroes',
//CSS要素セレクタである 'app-heroes'は、親コンポーネントのテンプレート内でこのコンポーネントを識別するHTML要素の名前と一致します。

  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
//ngOnInitはライフサイクルフックです。 Angularは、コンポーネントの作成直後にngOnInitを呼び出します。 初期化ロジックを置くのに適しています。
  }

}
//常にコンポーネントクラスをexportするので、AppModuleのようにいつでも他の場所にimportできます。

新增Hero属性。

import { Component, OnInit } from '@angular/core';
//coreファイルをから　component onInitをよみこむ

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

hero = 'Windstorm';

  constructor() { }

  ngOnInit() {
  }

}

我会随时更新后续内容。

从今天开始尝试使用Angular（Angular入门教程）

bannerAds