[JavaScript知识库]angular英雄教程学习

1. 搭建开发环境

? ? ? ? 1.安装angular/cli? ? ? ? ?=>? ?npm install @angular/cli

? ? ? ? 2. 新建angular项目? ? ? ? =>? ? ? ? ng new Myangular

? ? ? ? 3. 打开angular项目? ? ? ? =>? ? ? ? ng serve

2. 创建新组件

? ? ? ? 创建新组件：ng generate component home

3.设置属性，模拟一组数据

export interface Homesx {
    id :number,
    name:string,
}

import { Homesx } from './homesx/homesx';

export const HOME: Homesx[] = [
  { id: 11, name: 'Dr 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' }
];

4. 在home.component.ts中获取数据

? ? ? ? 1. 新建一个home.service，来模拟异步获取HOME数据。

? ? ? ? ng g s home? ? ? ? =>? ? ? ? 新建homeService

? ? ? ? ?2.写一个获取Home的方法，这里要用到Observable来设置一个可观察的值，利用of来弹出一个Observable属性类型。

  getHome():Observable<Homesx[]> {
    const home = of(HOME)
    return home
  }

? ? ? ? 3.为了看到我们是否成功获取数据，可以在新建一个message.service，并且新建一个message.component来显示弹出获取成功的通知。

? ? ? ? ng g s message? ? ? ? ng g c message

? ? ? ? ?在message中设置新增和清除方法，在message.component中显示：如果获取到数据才显示，所以要使用一个*ngIf进行判断。因为每次获取数据都会向message中添加内容，所以遍历div显示所有的获取数据。

  message:string[] = []
  //新增方法
  add(m:string){
    this.message.push(m)
  }
  //清除方法
  clear(){
    this.message = []
  }

<div *ngIf="messageService.message.length">
    <h2>Messages</h2>
    <button (click)="messageService.clear()">Clear messages</button>
    <div *ngFor='let message of messageService.message'> {{message}} </div>
  </div>

? ? ? ? 4.这样我们就需要在home.service中的getHome方法中使用messageService中的add方法，将内容添加到message中。

? ? ? ? 首先要在constructor中定义一个私有的messageservice

??????????constructor(private?messageService:MessageService)?{?}

? ? ? ? 然后在getHOME（）中使用。

? ? ? ? this.messageService.add('获取数据')?

? ? ? ? 5.现在我们的home.service和message.service都已经写完了，接下来就是要在home.component.ts中去调用这个获取数据的服务，方法如下

? ? ? ? （1）?在构造函数中添加私有的homeService和messageService

??????????constructor(private?homeService?:?HomeService,private?messageService:MessageService)?{?}

? ? ? ? （2）写一个获取数据的方法，因为用了Observable，这里要用subscribe来获取。

getHome():void {
    this.homeService.getHome().subscribe(home => this.home = home)    //把传过来的home赋给原有的home数组
}

? ? ? ? ?（3）在ngOnInit声明周期中调用该方法

  ngOnInit(): void {
    this.getHome()
  }

? ? ? ? 6.这样在home中就使用了home.service这个服务，获取到了数据给了home数组。在home.html中遍历显示列表就行了。

<ul>
    <li *ngFor='let h of home' >
        <a routerLink="/detail/{{h.id}}">    //此处点击会跳转到home-detail组件，所以写上roterLink
          <span>id:{{h.id}}</span><span>name:{{h.name}}</span>  
        </a>
    </li>
</ul>

5. 配置路由信息

? ? ? ? 1.?现在home中已经有了数据，我们想让他点击Home时显示home.component组件，所以这时候我们需要配置路由。

//引入路由
import { RouterModule,Routes } from '@angular/router';
//引入组件HomeComponent
import { HomeComponent } from './home/home.component';
//定义路由
const routes:Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full' },//设置默认路由为home
  {path:'home',component:HomeComponent},
]

? ? ? ? 2.配置好路由信息后，在app.component.html中配置

??????????<a?routerLink="/home">Home</a>

6.设置home-detail

? ? ? ? 1.home-detail是我们点击home中的哪一个数据就跳转到显示对应的id和name。所以获取到点击的数据就尤为关键，通过id进行匹配。

? ? ? ? 因为我们在home.service中获取了HOME数据，所以这里我们再写一个getId（）来将id匹配的内容返回出来

  getId(id:number):Observable<Homesx|undefined> {
    const home = HOME.find(h =>h.id === id)  //通过find
    this.messageService.add(`得到id${{home}}`);//当获取到数据时，发送消息
    return of(home)
  }

? ? ? ? 2.显然我们需要在home-detail中将所点击到的id传递给getId（），所以这里需要用到路由获取参数的方法。

//引入获取路由参数的依赖
import { ActivatedRoute } from '@angular/router';//保存路由信息，提取参数用的
import { Location } from '@angular/common';      //一个angular的服务

  constructor(private acroute:ActivatedRoute,private location:Location,private homeService:HomeService) { }
  getDetail():void {
    const id = Number(this.acroute.snapshot.paramMap.get('id')) //得到参数的语法
    this.homeService.getId(id).subscribe(h => this.home = h)  //通过getId方法，得到匹配后的信息
  }

? ? ? ? 3.这样我们将新的home显示在home-detail中就行了。

<div *ngIf="home">
    <h2>{{home.name | uppercase}} Details</h2>
    <div><span>id: </span>{{home.id}}</div>
    <div>
      <label for="home-name">Hero name: </label>
      <input id="home-name" [(ngModel)]="home.name" placeholder="name">
    </div>
</div>