Angular8入门教程

timg.jpeg

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)有两个属性:

  1. path:一个用于匹配浏览器地址栏中 URL 的字符串。

  2. 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) { }

这个参数同时做了两件事:

  1. 声明了一个私有 userService 属性,
  2. 把它标记为一个 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);

由于数据请求是异步的,所以使用ObservablegetUsers方法的返回值改为一个可观察对象

调用服务

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 数组中。

在用户组件中使用:

推荐阅读更多精彩内容