当我想学习Angular时，我发现已经推出了6.0版本，于是尝试了一下
首先
在这篇文章中，我将记录我通过查阅和学习Angular的入门指南和教程所学到的内容。
由于基于实例的教程在教授基础编码方法方面是有帮助的，但缺乏概念性解释，因此建议适时查阅基础知识以确保理解。
尽管已经过去了将近一个月，但我决定使用于18/05/03发布的Angular 6版本。
Angular 是什么？
Angular是一个用于构建使用HTML和TypeScript编写的应用程序的平台/框架。Angular本身也是使用TypeScript编写的。
为了运行Angular的准备工作
安装Node.js 8及以上版本和npm 5.x。
如果在Windows操作系统上，使用nodist会很方便；如果在Mac操作系统上，使用nodebrew会很方便。
如果使用Docker，推荐使用官方提供的node镜像。
针对Windows用户的准备方法
-
- nodist をインストールする
https://github.com/marcelklehr/nodist/releases
Node.js, npm をインストールして global バージョンを設定する
$ nodist + 8
$ nodist global 8
Node.js, npm のバージョンを確認する
$ node -v
$ npm -v
以下的中文語句是對原先的日語句子進行的本地化翻譯:
“当我复制黏贴的时候，避免出现意外重定向，这就是为什么我不喜欢有提示符的原因。”
安装 Angular CLI
首先，安装 Angular CLI。
$ npm install -g @angular/cli
Angular CLI是一个功能强大的工具，可以用于创建Angular应用程序，以及通过CLI命令生成Angular应用程序中的组件和服务。
创建一个Angular的Hello world应用程序。
为了使应用程序正常运行，需要通过一次 ng new 命令安装所需的所有文件。
$ ng new my-app # my-app は適当なアプリケーション名に変える
应用程序的名称必须遵循以下规则。
（我认为规则并不完整，所以我将其记录下来作为备忘录，因为它已经导致了一次错误。）
-
- 使える文字は、アルファベットとハイフン – である
- アルファベットで始まる
ng new 会在当前工作目录下创建一个以应用程序名称为目录，并在其中创建项目的初始文件。
如果已经存在README.md、package.json等文件，则最好将其删除，以防止命令执行过程中出现问题。
使用 `ng new` 命令创建的文件。
执行ng new命令时, 会生成用于运行Angular所需的文件，此外还会生成用于测试的Karma配置文件、用于Lint工具TSLint的配置文件以及用于编辑器格式化规则的EditorConfig配置文件等。
创建的文件如下所述，有关 Angular>开始入门＃项目文件审查。
src/
app/
app.module.ts # AppModule の定義
# -> Angular にアプリケーションのコンパイル方法と起動方法を伝える役割
app.component.html # AppComponent のビューテンプレート(ビューテンプレート内はAppComponentコンポーネントの変数が参照できる)
app.component.spec.ts # AppComponent のユニットテスト
app.component.ts # AppComponent のコンポーネント定義
app.component.css # AppComponent のスタイルシート
assets/ # アプリケーションビルド時にコピーする画像を配置するディレクトリ
.gitkeep # Git 用の空ディレクトリをバージョン管理配下に置くためのファイル
environments/
environment.prod.ts # 本番環境でビルドするための設定
environment.ts # 本番以外の環境でビルドするための設定
favicon.ico # ブラウザのお気に入り用アイコン
index.html # root AppModule のビューファイル
main.ts # アプリケーションのエントリポイント
polyfills.ts # Pollyfill設定(ブラウザ毎のサポートレベルを統一するためのもの)
test.ts # ユニットテストのエントリポイント (内部で .spec.ts ファイルを読み込む)
styles.css # App 全体の CSS 設定を指定する
browserslist # 他の Front-end ツール間でターゲットブラウザを共有するためのファイル
karma.conf.js # Karma 用設定ファイル
tsconfig.app.json # TypeScript の App 用設定ファイル
tsconfig.spec.json # TypeScript のユニットテスト用設定ファイル
tslint.json # TSLint の設定ファイル
e2e/
src/
app.e2e-spec.ts # End-to-End(e2e) テストのエントリポイント
app.po.ts # app.e2e-spec.ts から読み込まれるファイル
protractor.conf.js # e2e テストの設定ファイル(内部で src/app.e2e-spec.ts を読み込む)
tsconfig.e2e.json # TypeScript の e2e テスト用設定ファイル
README.md # プロジェクトの README
angular.json # AngularCLI の設定ファイル
package.json # npm の設定ファイル
tsconfig.json # TypeScript の設定ファイル(IDE用)
tslint.json # TSLint の設定ファイル
.editorconfig # Editorconfig の設定ファイル
.gitignore # Git の管理対象外を記述ファイル
在中国翻译有关”アプリケーション開発環境の実行方法 (ng serve)”的一种可能版本：
应用开发环境的执行方式（ng serve）。
一旦执行ng new命令，便会安装所有依赖包，并通过ng serve命令启动Angular应用程序。
$ cd my-app # 作成したアプリケーション名のディレクトリが作成されている
$ ng serve --open # --open を指定するとブラウザで URL が開かれます
在访问http://localhost:4200/时，将显示Angular的标志和“欢迎使用应用程序！”。
如果使用Docker，则可以使用以下命令进行发布：$ docker run -it -v -p 4200:4200 node:8 bash 并使用$ ng serve –host 0.0.0.0 –open启动Angular应用程序。然后，在浏览器中访问http://${Docker主机的IP地址}:4200/即可。
当您正在运行 ng serve 并编辑源代码时，会自动重新加载。
在开发应用程序时，您需要反复使用 ng serve 来运行并更改代码。
Angular应用概述
应用程序已经启动，您可能想要继续编辑，但在此之前，我们将先介绍一些在基础知识中提到的概念。(请那些已经理解的人跳过此部分)
Angular 应用由称为 NgModule 的模块组成。模块定义了编译组件所需的上下文，模块必须包含一个用于启动的根模块，并且其他的被称为特性模块。
* 这里的模块与 JavaScript（ES2015）的模块不同。
组件是用于描述视图（包括视图模板和样式）以及用于渲染HTML所需的处理的一种工具。
除了用来呈现特定的HTML之外，可以将其它处理视为服务定义。服务可以在初始化组件时进行注入，并且可以通过组件模块使用服务。
将服务和组件分开的原因是为了提高可重复利用性。(也称为依赖注入(Dependency Injection, DI))
服务通过服务提供程序被注入到组件中。
在这个Web应用程序中，从Tutorial中记录并显示/搜索英雄名称的应用程序中，我们以显示英雄列表页面heroes.component.ts作为示例，介绍了根模块和组件中的内容。
建议使用 angular-cli 工具来生成组件，通过使用 generate 选项可以按照以下方式进行生成。此外，工具还会自动帮你将组件集成到根模块中。
$ ng generate component Heroes
CREATE src/app/heroes/heroes.component.css (0 bytes)
CREATE src/app/heroes/heroes.component.html (25 bytes)
CREATE src/app/heroes/heroes.component.spec.ts (628 bytes)
CREATE src/app/heroes/heroes.component.ts (269 bytes)
UPDATE src/app.module.ts (396 bytes)
在添加组件之后，仅仅是添加组件是无法在浏览器中显示的。需要添加路由配置。路由配置使用 @angular/router。
要进行路由设置，需要在模块中使用 RouterModule::forRoot。
在示例中，为了简单起见，我们直接在根模块中定义并使用，但作为最佳实践，最好像教程中所述那样创建一个模块来进行设置。
(参考: https://angular.io/tutorial/toh-pt5#add-the-approutingmodule)
当完成路由设置后，向组件中添加 Heroes，这样就可以为创建的组件创建链接。使用此链接进行页面跳转时，URL的路径会改变，并且即使在浏览器刷新后，已访问的页面仍然会被加载，同时浏览器会保存页面跳转的历史记录，因此可以通过返回和前进按钮进行页面跳转。
根模块的描述示例 de lì)
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // inputのデータバインディングに使う FormsModule を読み込む
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; // Router ライブラリパッケージを読み込む
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component'; // Heroesコンポーネントを読み込む
const appRoutes: Routes = [ // パスを指す Routes 型インスタンスを作成
{ path: 'heroes', component: HeroesComponent }, // `/heroes` にアクセスした際に HeroesComponent を
// 読み込み、`<router-outlet />` を
// 置き換えて View を表示する
];
@NgModule({
declarations: [
AppComponent,
HeroesComponent, // Heroes コンポーネントをモジュールリストに追加する
],
imports: [
BrowserModule,
FormsModule, // ngModel ディレクティブを使うために FormsModule を指定する
RouterModule.forRoot( // Routerモジュールを作成する(provider込み)
appRoutes, // パスを指す Routes 型の引数を設定
{ enableTracing: true } // デバッグ用出力を有効にする
),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
根模块具有以下特点。
-
- 慣例としてクラス名を AppModule とし、ファイル名を src/app/app.module.ts として定義する
@NgModuel アノテーションを使い、declarations として利用するコンポーネント等、アプリケーションの全体像を指定する
Angular はこのモジュールに記載された内容から、アプリケーションをビルドするために必要な構成を読み取る
使用@NgModule装饰器来定义的内容
-
- declarations
NgModule に関連する directives/pipes のリストを指定する
コンポーネントは 必ず唯１つの NgModule に紐く必要がある
imports
このモジュールのテンプレートで使う directives/pipes のリストを指定する
リストには ModuleWithProviders もまた含まれる
providers
サービス(注入可能(injectable) なオブジェクト)のリストを指定する
bootstrap
モジュールが bootstrap される際に bootstrap されるコンポーネントのリストを指定する
请参阅 https://angular.io/api/core/NgModule 获取详细信息。
根组件的模板描述示例
<base href="/" />
<nav>
<li>
<h2><a routerLink="/heroes" routerLinkActive="active">Heroes</a></h2>
</li>
</nav>
<router-outlet></router-outlet>
组件写作示例
import { Component, OnInit } from '@angular/core'; // Componentデコレータと OnInitインタフェースの読み込み
import { Hero } from '../hero'; // Heroモデル定義の読み込み
import { HeroService } from '../hero.service'; // Heroサービスの読み込み
@Component({ // @Componentデコレータを使ってコンポーネントを定義
selector: 'app-heroes', // - コンポーネントが指すHTMLのタグ名を<app-heroes>とする
templateUrl: './heroes.component.html', // - ビューテンプレートとして./heroes.component.htmlを使う
styleUrls: ['./heroes.component.css'] // - スタイルシートとして./heroes.component.cssを使う
})
export class HeroesComponent implements OnInit { // OnInitインタフェースを継承してHeroesComponentクラスを定義して、exportする
heroes: Hero[]; // Heroモデル配列型のheroes変数を定義
selectedHero: Hero; // リスト内の選択中の Hero
constructor( // コンストラクタの定義
private heroService: HeroService // HeroServiceサービスを注入(インスタンスをheroServiceプロパティに代入する)
) { }
ngOnInit() { // lifecycle hook 関数の ngOnInit を実装
this.getHeroes();
}
/* Hero リストを取得する */
getHeroes(): void {
this.heroService.getHeroes() // heroServiceのgetHeroesメソッドを呼び出し heroes プロパティに代入する
.subscribe((heroes) => { this.heroes = heroes; });
}
/* Hero を選択する */
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
/* Hero リストに Hero を追加する */
add(name: string): void {
name = name.trim();
if (!name) { return; }
let newHero = new Hero();
newHero.id = Math.max.apply(null, this.heroes.map(h => h.id)) + 1;
newHero.name = name;
this.heroes.push(newHero); // リストに Hero を追加 (プロパティ変数を操作しているだけなのでリロードすると消える）
}
/* Hero リストから Hero を削除する */
delete(hero: Hero): void {
this.heroes = this.heroes.filter(h => h !== hero); // リストから指定したIDのHeroを削除
}
}
export class Hero {
id: number;
name: string;
}
button {
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
cursor: hand;
font-family: Arial;
}
: <snip>
模板示例
模板是将HTML和Angular标记结合在一起的东西。
Angular标记语言中包含模板指令、绑定标记和管道。这些在HTML显示之前由Angular处理，可以将逻辑和数据绑定集成到显示结果中。
<h2>My Heroes</h2>
<div>
<label>Hero name:
<input #heroName /> <!-- input ボックスを用意し、入力した値を heroName で扱う -->
</label>
<!-- (click) passes input value to add() and then clears the input -->
<button (click)="add(heroName.value); heroName.value=''"> <!-- click 時にコンポーネントの add メソッドを呼び出す -->
add
</button>
</div>
<ul class="heroes">
<li *ngFor="let hero of heroes"> <!-- *ngFor で指定した変数 heroes から要素を1つずつ取り出して
hero に代入して li とその中の html を繰り返し表示する -->
が参照できる -->
<span class="badge">{{hero.id}}</span> {{hero.name}}
<button class="delete" title="delete hero"
(click)="delete(hero)">x</button> <!-- click 時にコンポーネントの delete メソッドを呼び出す -->
</li>
</ul>
<hr />
<h2>Hero Detail</h2>
<div *ngIf="selectedHero !== null"> <!-- selectedHero が null ではない場合だけ div とその中の html を表示する -->
<div>
<label>Hero name: {{selectedHero.name | uppercase }}</label> <!-- 名前を uppercase パイプにより全て大文字にして表示する -->
</div>
<div>ID: {{ selectedHero.id }}</div> <!-- ID を表示 -->
<div>Edit name: <input [(ngModel)]="selectedHero.name" /></div> <!-- selectedHero.name をデータバインディングして即時編集する -->
</dvi>
在绑定标记中有两种类型，分别具有以下功能。
Angular支持双向（读写）数据绑定。
-
- Event binding
ユーザのインプットに応じてアプリケーションデータを更新して応答する
Property binding
アプリケーションデータを HTML に埋め込む
服务的例子
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Hero } from './hero';
import { HEROES } from './mock-heroes'; // 簡略のためモックデータを読み込む。サーバからデータを取得するのが一般的。
@Injectable({
providedIn: 'root', // root プロバイダによって生成されるよう定義する
})
export class HeroService {
getHeroes(): Observable<Hero[]> {
return of(HEROES);
}
}
import { Hero } from './hero';
export const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
Angular 应用程序示例
当您写下了上述的示例并启动Angular时，将会得到以下的显示结果。
部署到正式环境
为了使代码在生产环境中运行，需要先通过ng build命令构建文件，然后启动一个HTTP服务器，将构建好的文件设置为内容根目录。
在构建项目时，与使用 “ng serve” 命令相比，”ng build” 命令的区别在于会进行缩小代码大小的优化，如压缩等处理。
$ ng build --prod
成功执行上述命令后，会在 dist/my-app (my-app 是应用程序名称) 目录下生成文件。(js 文件会进行压缩)
在适当的部署目标中展开文件后，启动 apache/nginx 等 HTTP 服务器。
如果使用 Docker，则可以使用 $ docker run -p 80:80 -v /usr/local/src/my-app/dist/my-app:/usr/share/nginx/html:ro -d nginx 等命令。
（示例中假设应用程序根目录位于 /usr/local/src/my-app）
通过上述方式，您可以在Docker主机的IP地址上访问部署的应用程序。
总结
-
- Angular CLI を使って初期アプリケーションを作成することが出来る
-
- コンポーネントを使ってアプリケーションデータを表示することが出来る
テンプレート内では {{}} を使って変数が使える
Angular CLI を使ってコンポーネントを生成することが出来る
ngModel ディレクティブにより双方向データバインディングが行える
ngModel ディレクティブを使うためには FormsModule を読み込む必要がある
ユーザが Hero を選択した場合だけ詳細情報を表示させた
選択操作はイベントバインディング (click) を使った
条件に一致した場合のみ表示させるために *ngIf を使った
配列を1つずつ取り出しながら全ての Hero リストを表示するために *ngFor を使った
HeroService をサービスプロバイダとして root プロバイダによって生成されるよう定義して、HeroComponent に注入を行った
コンポーネントの ngOnInit ライフサイクルをフックして Hero リストを取得した
Angular router を使って異なるコンポーネント間を移動した
移動した履歴はブラウザの進む・戻るで再現できる
タグがパスに関連付けられたコンポーネントの表示結果に置き換えられた
a タグに routerLink ディレクティブをつけてリンクを作成した
Hero リストを追加・削除・編集可能にした
本番環境へデプロイするために ng build –prod コマンドを使った
