1. 环境搭建
0. Before
在开始之前，请确保你的开发环境中包括 Node.js® 和 npm 包管理器。
Angular 需要 Node.js 版本 10.9.0 或更高版本。
要检查你的版本，请在终端/控制台窗口中运行 node -v 。
1. 安装 Angular CLI
npm install -g @angular/cli
安装好之后，进入到你的开发目录，使用脚手架创建项目：
ng new my-app
进入到项目根目录，启动项目：
cd my-app
ng serve --open
ng serve 命令会启动开发服务器、监视文件，并在这些文件发生更改时重建应用。
2. 项目目录结构
https://www.angular.cn/guide/file-structure
3. 核心概念
https://www.angular.cn/guide/architecture
- 模块
- 组件
- 服务与依赖注入
- 路由
2. Start from TodoList
1. 新建TodoList组件
ng generate component TodoList
2. 创建Todo类
在app下新建Todo.js
export class Todo {
id :number;
name : string;
}
3. 创建todoList数组
在todo-list.component.ts中导入Todo.js
import {Todo} from '../Todo';
创建todoList数组：
todoList: Todo[] = [
{id:0,name:"aaaa"},
{id:1,name:"bbbb"},
{id:2,name:"cccc"},
{id:3,name:"dddd"},
{id:4,name:"eeee"}
];
4. 在页面渲染todolist列表
<ul>
<li *ngFor="let todo of todoList">
<span>{{todo.id}}</span> {{todo.name}}
</li>
</ul>
5. 添加输入框
在 app.module.ts中导入FormsModule：
import {FormsModule} from '@angular/forms';
并且添加到 imports中：
imports: [
BrowserModule,
FormsModule
],
在todo-list.component.ts中添加：
@Input() text: string;
然后在src/app/todo-list/todo-list.component.html 添加输入框：
<input type="text" [(ngModel)]="text">
使用 [(ngModel)]="text"进行双向数据绑定，类似vue中的v-model
这样就可以实时获取用户的输入。
6. 添加按钮
在页面上添加按钮
<button (click)="addTodo()"> 添加 </button>
按钮绑定了addTodo事件，我们需要实现这个方法，
在src/app/todo-list/todo-list.component.ts中添加：
addTodo(): void {
if(this.text){
this.todoList.push({
id: this.todoList.length,
name: this.text
})
this.text = ''
}
}
这样当用户输入后，点击添加按钮，就会把用户数据构造成Todo对象，加入到todoList数组中，这样页面上就显示最新数据了。
7. 删除
在每一行todo后添加删除按钮
<span>{{todo.id}}</span> {{todo.name}} <span (click)="deleteTodo(todo.id)">delete</span>
删除按钮绑定了deleteTodo方法，同时把当前数据id传入，
deleteTodo的实现：
deleteTodo(id): void {
this.todoList = this.todoList.filter(todo => todo.id != id)
}
3. 路由
在 Angular 中，最好在一个独立的顶级模块中加载和配置路由器，它专注于路由功能，然后由根模块 AppModule 导入它。
1. 生成路由模块
ng generate module app-routing --flat --module=app
--flat 把这个文件放进了 src/app 中，而不是单独的目录中。
--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。
通常不会在路由模块中声明组件，所以可以删除 @NgModule.declarations 并删除对 CommonModule 的引用。
使用 RouterModule 中的 Routes 类来配置路由器，所以还要从 @angular/router 库中导入这两个符号。
添加一个 @NgModule.exports 数组，其中放上 RouterModule 。 导出 RouterModule 让路由器的相关指令可以在 AppModule 中的组件中使用。
此刻的 AppRoutingModule 是这样的：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
@NgModule({
exports: [
RouterModule
]
})
export class AppRoutingModule { }
2. 添加路由定义
路由定义 会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图。
典型的 Angular 路由（Route）有两个属性：
path：一个用于匹配浏览器地址栏中 URL 的字符串。
component：当导航到此路由时，路由器应该创建哪个组件。
const route: Routes = [
{path: 'todo', component: TodoListComponent}
];
把 RouterModule 添加到 @NgModule.imports 数组中
imports: [
RouterModule.forRoot(route),
]
现在完整代码变成这样：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {TodoListComponent} from './todo-list/todo-list.component';
const route: Routes = [
{path: 'todo', component: TodoListComponent}
];
@NgModule({
imports: [
RouterModule.forRoot(route),
],
exports: [RouterModule],
})
export class AppRoutingModule { }
3. 添加路由出口 （RouterOutlet）
打开 AppComponent 的模板，把里面代码清空，替换为 <router-outlet> 元素。
<router-outlet></router-outlet>
这个就相当于vue中的 <router-view></router-view>
4. 添加用户页面
1. 新建一个用户组件
ng generate component User
2. 修改路由，添加user路由：
const route: Routes = [
{path: 'todo', component: TodoListComponent},
{path: 'user', component: UserComponent},
];
3. 在src/app/app.component.html上添加导航：
<a routerLink="/todo">todo</a>
<a routerLink="/user">user</a>
这样当用户点击导航链接时，就可以切换页面。
4. 设置默认导航，添加：
在 a标签上添加 [routerLinkActive]="'active'",并且添加 .active类
.active
color: #369
border-bottom: solid 2px #369;
<nav>
<a routerLink="/todo" [routerLinkActive]="'active'">todo</a>
<a routerLink="/user" [routerLinkActive]="'active'">user</a>
</nav>
5. 添加User类
在app下新建 User.ts
export class User {
id: number;
name: string;
gender: boolean;
addr: string;
}
修改 src/app/user/user.component.ts,添加users，代码如下：
import { Component, OnInit } from '@angular/core';
import {User} from '../User';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.styl']
})
export class UserComponent implements OnInit {
users: User[] = [
{id: 0, name: '钢铁侠', gender: true, addr: '湖南长沙'},
{id: 1, name: '雪诺', gender: true, addr: '北境'},
{id: 2, name: '黑寡妇', gender: false, addr: '重启'},
{id: 3, name: '孙悟空', gender: true, addr: '花果山'},
{id: 4, name: '潘金莲', gender: false, addr: '四川成都'},
];
constructor() { }
ngOnInit() {
}
}
在 src/app/user/user.component.html 中渲染用户列表：
<div>
<h3>User List</h3>
<ul>
<li *ngFor="let u of users">
{{u.name}} {{u.gender}} {{u.addr}}
</li>
</ul>
</div>
5. Service
1. 什么是服务
组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。
服务可以实现在多个类之间共享数据。
2. 什么是依赖注入
依赖注入（DI）是一种重要的应用设计模式。 Angular 有自己的 DI 框架，在设计应用时常会用到它，以提升它们的开发效率和模块化程度。
依赖，是当类需要执行其功能时，所需要的服务或对象。 DI 是一种编码模式，其中的类会从外部源中请求获取依赖，而不是自己创建它们。
3. 创建可注入的服务
ng generate service user
这个令会在 src/app/user.service.ts 中生成 UserService 类的骨架。 UserService 类的代码如下：
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor() { }
}
4. @Injectable() 服务
注意，这个新的服务导入了 Angular 的 Injectable 符号，并且给这个服务类添加了 @Injectable() 装饰器。 它把这个类标记为依赖注入系统的参与者之一。UserService 类将会提供一个可注入的服务，并且它还可以拥有自己的待注入的依赖。
5. 创建模拟数据
在app下新建mock-users.ts,代码如下：
import {User} from './user';
export const USERS: User[] = [
{id: 0, name: '钢铁侠', gender: true, addr: '湖南长沙'},
{id: 1, name: '雪诺', gender: true, addr: '北境'},
{id: 2, name: '黑寡妇', gender: false, addr: '重启'},
{id: 3, name: '孙悟空', gender: true, addr: '花果山'},
{id: 4, name: '潘金莲', gender: false, addr: '四川成都'},
];
6. service的实现
修改src/app/user.service.ts代码，添加getUsers方法，用来获取用户，代码如下：
import { Injectable } from '@angular/core';
import {User} from './User';
import {USERS} from './mock-users';
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor() { }
getUsers(): User[] {
return USERS;
}
}
7. 注入service
在src/app/user/user.component.ts中导入UserService:
import {UserService} from '../user.service';
往构造函数中添加一个私有的 userService，其类型为 UserService。
constructor(private userService: UserService) { }
这个参数同时做了两件事：
- 声明了一个私有 userService 属性，
- 把它标记为一个 UserService 的注入点。
当 Angular 创建 UserComponent 时，依赖注入系统就会把这个 userService 参数设置为 UserService 的单例对象。
创建一个函数，以从服务中获取这些用户数据，并在ngOnInit中调用：
ngOnInit() {
this.getUsers();
}
getUsers(): void {
this.users = this.userService.getUsers();
}
完整代码如下：
import { Component, OnInit } from '@angular/core';
import {User} from '../User';
import {UserService} from '../user.service';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.styl']
})
export class UserComponent implements OnInit {
users: User[] = [];
constructor(private userService: UserService) { }
ngOnInit() {
this.getUsers();
}
getUsers(): void {
this.users = this.userService.getUsers();
}
}
6. http
启用 HTTP 服务
HttpClient 是 Angular 通过 HTTP 与远程服务器通讯的机制。
要让 HttpClient 在应用中随处可用，
- 打开根模块 AppModule，
- 从 @angular/common/http 中导入 HttpClientModule 符号，
- 把它加入 @NgModule.imports 数组。
import { HttpClientModule } from '@angular/common/http';
Http请求
修改src/app/user.service.ts,代码如下:
import { Injectable } from '@angular/core';
import {User} from './User';
import {Observable, of} from 'rxjs';
import {HttpClient} from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class UserService {
userUrl = 'https://www.fastmock.site/mock/37666f9c160ab4b9182191952fa5b988/cs/users';
constructor(private http: HttpClient) { }
getUsers(): Observable<User[]> {
return this.http.get<User[]>(this.userUrl);
}
}
在构造函数中添加 http:
constructor(private http: HttpClient) { }
之后使用http请求数据：
this.http.get<User[]>(this.userUrl);
由于数据请求是异步的，所以使用Observable把getUsers方法的返回值改为一个可观察对象
调用服务
在src/app/user/user.component.ts中调用服务，获取数据的结果现在是一个Observable对象，调用它的subscribe方法，当数据请求成功后，在其回调中获取数据，代码如下：
getUsers(): void {
this.userService.getUsers()
.subscribe( res => {
this.users = res.users;
});
}
7. 详情页
1. 创建详情页
在用户列表点击用户，跳转到用户详情页。
首先创建详情页：
ng generate component UserDetail
2. 配置路由：
在 src/app/app-routing.module.ts中导入详情组件：
import {UserDetailComponent} from './user-detail/user-detail.component';
添加路由配置：
{path: 'detail', component: UserDetailComponent}
在浏览器地址栏访问：http://localhost:4200/detail,查看详情页面。
3. 在用户类表添加导航链接：
<li *ngFor="let u of users">
<a routerLink="/detail/{{u.id}}">
{{u.name}} {{u.gender}} {{u.addr}}
</a>
</li>
同时修改路由配置;
{path: 'detail/:id', component: UserDetailComponent}
这样就可以把参数 id传递到详情组件，在详情组件内获取参数;
const id = this.route.snapshot.paramMap.get('id');
4. 调用service，获取用户详情
添加获取用户的方法，调用service，传入用户id，获取单个用户：
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UserService} from '../user.service';
import { User } from '../User';
@Component({
selector: 'app-user-detail',
templateUrl: './user-detail.component.html',
styleUrls: ['./user-detail.component.styl']
})
export class UserDetailComponent implements OnInit {
user: User;
constructor(
private route: ActivatedRoute,
private userService: UserService
) { }
ngOnInit() {
this.getHero();
}
getHero(): void {
const id = this.route.snapshot.paramMap.get('id');
this.userService.getUsers()
.subscribe( res => {
this.user = res.users.find(user => user.id + '' === id);
});
}
}
5. 展示详情信息
获取到用户信息后，展示在详情页面：
<div>
<h3>用户详情</h3>
<div *ngIf="user">
<p>
{{user.name}}
</p>
<p>
{{user.gender}}
</p>
<p>
{{user.addr}}
</p>
</div>
</div>
6. 返回按钮
在详情页，可以添加一个返回按钮，点击返回到上一页：
8. 管道（过滤器）
管道类似于vue中的过滤器
Angular内置的管道有：
- DatePipe
- UpperCasePipe
- LowerCasePipe
- CurrencyPipe
- PercentPipe
使用实例：
<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>
串联使用：
{{ birthday | date | uppercase}}
自定义管道
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'gender'})
export class GenderPipe implements PipeTransform {
transform(value: boolean): string {
return value ? '男' : '女';
}
}
在这个管道的定义中体现了几个关键点：
- 管道是一个带有“管道元数据(pipe metadata)”装饰器的类。
- 这个管道类实现了 PipeTransform 接口的 transform 方法，该方法接受一个输入值和一些可选参数，并返回转换后的值。
*可以通过 @Pipe 装饰器来告诉 Angular：这是一个管道。该装饰器是从 Angular 的 core 库中引入的。 - 这个 @Pipe 装饰器允许你定义管道的名字，这个名字会被用在模板表达式中。它必须是一个有效的 JavaScript 标识符。 比如，你这个管道的名字是 gender。
注意：
在使用之前必须把这个管道添加到 AppModule 的 declarations 数组中。
在用户组件中使用：
