Angular7入门辅助教程（十一）——总结

如果有任何的非技术障碍，比如如何新建Angular项目，请先到我的"Angular7入门辅助教程"专栏参考这篇博客：Angular7入门辅助教程——前篇

这篇博客是Angular7入门辅助教程的结束篇，学了这么多，我想你应该有写.......hello world的水平了吧，什么，要写helloworld，别说话，我只写hello world，其他的别来找我——接下来，我将带你利用Angular输出形形色色的......hello world！

1、利用模板表达式输出hello world

这个最简单，新建Angular项目，将AppComponent类中的title属性改成下面这句代码

  title = 'hello world';

现在，启动应用，现在，你的界面应该如下

2、利用管道输出hello world

现在，我们来写一个神奇的管道——helloworld，他能将任何输入都转化为hello world，并输出打破屏幕上

1）、新建一个名叫test-teaching-a的项目，并cd进该项目目录

2）、新建一个名叫helloworld的管道

ng generate pipe helloworld

3）、修改helloworld.pipe.ts文件内容如下

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'helloworld'
})
export class HelloworldPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return 'hello world';
  }

}

 也就是return 'hello world'，其他的地方不用改

4）、在AppComponent类中添加下面这句代码

  title1 = 'I am not hello world';

5）、修改app.component.html文件如下

<h1>{{ title1 | helloworld }}</h1>

6）、然后启动应用，可以看到，界面上的hello world

3、利用服务输出hello world

1）、在上个例子的基础上，新建一个名叫helloworld的服务

ng generate service helloworld

并添加下一面这个方法

getHellloworld() {
    return 'hello world';
  }

2）、修改app.component.ts文件如下

import { Component } from '@angular/core';
import { HelloworldService } from './helloworld.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'hello world';
  title1 = 'I am not hello world';
  title2 = this.title1;

  constructor(private helloworldService: HelloworldService) {
    this.title2 = this.helloworldService.getHellloworld();
  }
}

3）、修改app.component.html文件如下

利用模板表达式输出hello world：
<h1>{{ title }}</h1>
<hr />
利用管道输出hello world: 
<h1>{{ title1 | helloworld }}</h1>
<hr />
利用服务输出hello world:
<h1>{{ title2 }}</h1>

4）、你的界面出现了第三个hello world

4、利用HttpClient服务输出hello world

1）、在src/assets目录下面新建一个helloworld.txt文件，内容如下

hello world

2）、在helloworld.service.ts文件中添加下面这些代码

 constructor(private httpClient: HttpClient) {}

getHelloworld2() {
    return this.httpClient.get('../assets/helloworld.txt', {
      responseType: 'text'
    });
  }

3）、app.component.ts文件中添加下面这些代码片段

  title3 = this.title1;

在构造函数中添加下面的代码段 

this.helloworldService.getHelloworld2().subscribe(data => {
      this.title3 = data;
    });

4）、在app.component.html文件结尾添加下面代码

<hr>
利用HttpClient服务输出hello world
<h1>{{ title3 }}</h1>
<hr>

5）、在AppModule中引入HttpClientModule，以便使用HttpClient服务

import { HttpClientModule } from '@angular/common/http';

imports: [
    BrowserModule,
    HttpClientModule
  ],

 6）、现在你的界面出现了第4个hello world

5、利用Observable输出hello world

1）、在helloworld.service.ts中加入下面代码

import { of } from 'rxjs';

getHelloworld5() {
    let helloworld = '';
    const helloworldOb = of('hello world');
    helloworldOb.subscribe(data => {
      helloworld = data;
    });

    return helloworld;
  }

 2）、在app.component.ts文件中添加下面这些代码片段

  title5 = this.title1;

在构造函数中添加下面代码 

this.title5 = this.helloworldService.getHelloworld5();

3）、在app.component.html文件结尾添加下面代码

利用Observable输出hello world:
<h1>{{ title5 }}</h1>
<hr>

现在，你的应用应该出现了第5个hello world

6、利用RxJS库中的操作符输出hello world

1）、在helloworld.service.ts中加入下面代码

getHelloworld6() {
    const helloworldOb = of(
      'I am not hello world',
      'I am not hello world',
      'I am not hello world'
    );
    return helloworldOb;
  }

2）、在app.component.ts文件中添加下面这些代码片段

 titles6: string[] = [];

 在构造函数中添加下面代码 

this.helloworldService
      .getHelloworld6()
      .pipe(map(_ => 'hello world'))
      .subscribe(helloworld => {
        this.titles6.push(helloworld);
      });

3）、在app.component.html文件结尾添加下面代码

利用RxJS库中的map操作符输出hello world:
<ul>
    <li *ngFor="let helloworld of titles6">{{helloworld}}</li>
</ul>
<hr>

这时，你的界面多了三个小的hello world

7、利用useValue服务提供商输出hello world

1）、在src/app目录下新建一个名叫assist.ts的文件，内容如下

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

export const HELLO_WORLD_TOKEN = new InjectionToken<string>('hello world');
export const useValueProvider = {
  provide: HELLO_WORLD_TOKEN,
  useValue: 'hello world'
};

 2）、在app.component.ts文件中添加下面这些代码片段

  providers: [useValueProvider]

  title7 = this.title1;

在构造函数中添加下面代码

constructor(
    private helloworldService: HelloworldService,
    @Inject(HELLO_WORLD_TOKEN) private helloworldStr: string
  ) 

this.title7 = this.helloworldStr;

3）、在app.component.html文件结尾添加下面代码

利用useValue服务提供商输出hello world:
<h1>{{ title7 }}</h1>
<hr>

现在，你的界面应该出现了第7个hello world

8、利用useFactory服务提供商输出hello world

1）、新建一个名叫helloworldFactory的服务，内容如下

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

@Injectable({
  providedIn: 'root'
})
export class HelloworldFactoryService {
  constructor(public helloworld: string) {}

  getHelloworld() {
    return this.helloworld;
  }
}

2）、在assist.ts文件中添加下面代码段

function helloworldFactory() {
  return new HelloworldFactoryService('hello world');
}
export const useFactoryProvider = {
  provide: HelloworldFactoryService,
  useFactory: helloworldFactory,
  deps: []
};

3）、在app.component.ts文件中添加下面这些代码片段

  providers: [useValueProvider, useFactoryProvider]

  title8 = this.title1;

在构造函数中添加下面代码

constructor(
    private helloworldService: HelloworldService,
    @Inject(HELLO_WORLD_TOKEN) private helloworldStr: string,
    private helloworldFactoryService: HelloworldFactoryService
  )

    this.title8 = this.helloworldFactoryService.getHelloworld();

4）、 在app.component.html文件结尾添加下面代码

利用useFactory服务提供商输出hello world:
<h1>{{ title8 }}</h1>
<hr>

现在。你的界面应该出现了第8个hello world

9、利用双向绑定输出hello world

1）、在app.component.ts文件中添加下面这些代码片段

  title9 = '';

2）、  在app.component.html文件结尾添加下面代码

利用双向绑定输出hello world:
<input [(ngModel)]="title9">
<h1>{{ title9 }}</h1>
<hr>

3）、在AppModule中引入FormsModule（因为ngModel指令属于FormsModule模块）

imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule
  ],

在界面输入框中输入hello world，这是这个输入框的下方出现了第9个hello world 

这些hello world你都能输出吗？最后，你的界面应该是下面这样子的

 其实，将app.component.ts中AppComponent的构造函数中的内容移至OnInit函数中才是最佳实践，这一步读者可以自行完成

源码下载地址：helloworld小项目

 

好了，这个教程到处结束了，你是否还记得我在（Angular7入门辅助教程——前篇）中讲到的学完本教程能达到的水平

那么，现在就可以去看一下官网的这个快速入门教程，看看是否还有疑问！