美文网首页
ng4 service服务及Http的使用

ng4 service服务及Http的使用

作者: 等酒香醇V | 来源:发表于2017-10-22 10:08 被阅读0次

创建service


创建服务指令ng g service app

service的代码模仿如下,使用@Injectable类装饰器来装饰

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

@Injectable()
export class AppService {
 
  constructor() { }
  
    public test() {
      console.log('first service');
    }

引用service


在Module和component中相对应引入service,如下:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';
import { AppService } from './app.service';



@NgModule({
  declarations: [
    AppComponent,
    FirstComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [AppService],
  bootstrap: [AppComponent]
})
export class AppModule { }

first.component.ts

import { Component } from '@angular/core';
import { AppService } from '../app.service';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {

  constructor(private service: AppService) {
  }

  ngOnInit() {
    this.service.test();
  }

}

在service中使用Http/HttpClient


  • 在service中引入Http,使用toPromise的方式获取数据。同时需要在app.module.ts中引入HttpModule模块
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

......

constructor(private http: Http, private httpClient: HttpClient) { }

/**
 * 测试toPromise请求数据的方法。
 */
  public testHttp(): any {
    this.http.get('assets/1.json')
    .toPromise()
    .then(response => { console.log(response.json()); })
    .catch(() => { console.log('error'); });
  }
  • 在service中引入HttpClient,这种方法更加便捷。同时需要在app.module.ts中引入HttpClientModule模块
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';
interface TestData {
  id: number;
  name: string;
}
@Injectable()
export class AppService {

  constructor(private httpClient: HttpClient) { }

/**
 * 测试httpClient请求数据的方法。
 */
  public testHttpClient(): any {
    this.httpClient.get<TestData>('assets/1.json')
    .subscribe(response => { console.log(response.name); }, error => {console.log(error); });
  }
}

相关文章

  • ng4 service服务及Http的使用

    创建service 创建服务指令ng g service app service的代码模仿如下,使用@Inject...

  • Service-服务(二)onStartCommand()详解

    关于Serviced的生命周期及使用方式,可以读阅上一篇文章《Service-服务(一)生命周期及使用方式》 接下...

  • blockchain钱包api接入笔记

    钱包服务端源代码及安装使用,api文档 https://github.com/blockchain/service...

  • Service的简单使用

    前言 文本主要介绍Service的简单使用,了解Service的各种服务(前台服务,后台服务(本地服务,远程服务)...

  • Android 面试题之Service(不断更新)

    Service系列问题 Service本地服务及生命周期详解 1.1 注册Service需要注意什么 Servic...

  • 理解k8s 的 Ingress

    暴露一个http服务的方式 service 是 k8s 暴露http服务的默认方式, 其中 NodePort 类型...

  • Linux 将常用软件注册为服务,开机自启

    可以使用"service 服务名称"来进行管理,比如常常使用的命令”service httpd start”,就是...

  • ng4 http请求

    首先需要引入这两个东西: 需要将http声明为私有方法 然后设置请求头,和请求url 请求: 请求错误时 然后下面...

  • Service

    一、Service基础 可以参考 Android四大组件:Service服务史上最全面解析http://www.j...

  • enabled/disabled services

    临时启动或关闭服务 临时启动或关闭服务,可以使用service SERVICE_NAME。比如: sudo ser...

网友评论

      本文标题:ng4 service服务及Http的使用

      本文链接:https://www.haomeiwen.com/subject/cyrguxtx.html