4）运行应用程序

现在使用命令 'ng serve'运行应用程序并检查 'http://localhost:4200/'的输出。

示例

1）作为“全局服务”注入

要作为全局服务注入，请将服务注入根模块。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CalcService } from './service/calc.service';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [CalcService],
  bootstrap: [AppComponent]
})
export class AppModule { }

全局服务与本地服务注入

要注入服务，我们有两种选择。

如何创建Angular服务

在所需位置创建一个新文件 calc.service.ts并将以下代码放入其中。
CalcService是服务名称。

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class CalcService {
  constructor() { }
}

上述服务非常完整，可以在应用程序组件中使用。

使用 Angular CLI

如果我们使用 Angular CLI，创建服务很容易。
它只是一个完成所有工作的命令。
它会像上面的例子一样生成服务代码。

$ ng g s service/calc --flat 
//Other useful options
--force  = override
--spec=false = dont generate spec file
--dry-run = dont touch code if it has been updated already.

3) 更新视图 HTML

现在最后，使用新添加的模型属性 sum更新视图 html文件。

<h1>
	Welcome to {{ title }}!
	Sum is {{sum}}
</h1>

2) 将服务导入到组件中并使用更新模型的方法

我创建了一个新的模型属性 'sum'，我们将使用服务方法 add()的返回值更新它。

import { Component } from '@angular/core';
import { CalcService } from './service/calc.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  sum: number = 0;
  constructor(calc:CalcService){
    this.sum = calc.add(1,2,3,4);
  }
}

2）作为“本地服务”注入

要作为本地服务注入，直接将服务注入到组件中。

import { Component } from '@angular/core';
import { CalcService } from './service/calc.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [CalcService]
})
export class AppComponent {
  title = 'app';
  constructor(calc:CalcService){
   	//Use calc
  }
}

1) 为服务添加方法

为了演示 CalcService的用法，让我们在 service 中定义一个新方法并在 app.component.ts中使用它。

我添加了方法 add()，它将 REST 参数作为数字数组。
然后将所有数字相加并返回总和。

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class CalcService {
  constructor() { }
  public add(...params: number[]): number {
    let result = 0;
    for (let val of params) {
        result += val;
    }
    return result;
  }
}