专栏首页CRPER折腾记Angular 2 + 折腾记 :(3)初步了解服务及使用

Angular 2 + 折腾记 :(3)初步了解服务及使用

前言

不探究高深理论,只探究实际使用,有更好的写法或者经验请指出; 有些暂时没涉及到的知识我可能会顺着例子解释;


什么是服务

简言之:就是资源获取,以及通讯逻辑处理的地方;

Angular2的服务引入了依赖注入这个概念。详情看这个;

【依赖注入:中】 【依赖注入:英】

我看github上有些项目的service写的很复杂(很重),但是我不大喜欢这样。 我力求service内少处理复杂逻辑。这可能和每个人的开发理念不一样。。举一个例子,看代码。

// vehicle-fault.service.ts 


// 服务类必须引入这个
import { Injectable } from '@angular/core';

// 自己封装的鉴权
import { AuthService } from '../../../services/auth.service';

// 我这里存放了接口请求地址还有一些公用信息。nginx做反向代理所以不走baseurl
import { environment } from '../../../../environments/environment';

// 不可忘记括号,任何装饰器都一样,防止莫名的错误
@Injectable()
export class VehicleFaultService {

  // DI(依赖注入)  
  // 常规的写法 this.authHttp = new AuthService();
  // 这个写法也是可以的,官方不推荐,说不好维护(当项目大起来的时候)
  constructor(private authHttp: AuthService) { }

  // 获取故障提示列表
  VehicleFaultList(data) {
    return this.authHttp.post(environment.baseUrl + 'VehicleFault/VehicleFaultList', data);
  }

  // 获取单个车辆的故障列表
  SingleVehicleFaultList(data) {
    return this.authHttp.post(environment.baseUrl + 'VehicleFault/SingleVehicleFaultList', data);
  }

  // 根据车辆ID获取单车信息
  VehicleDetail(data) {
    return this.authHttp.post(environment.baseUrl + 'Vehicle/VehicleDetail', data);
  }

  // 清除故障码
  ClearFault(data) {
    return this.authHttp.post(environment.baseUrl + 'VehicleFault/ClearFault', data);
  }

  // 这里的每个接口返回一个可观察的订阅对象
}复制代码

那么我们应该如何让服务可以正常使用呢?

大致有那么两种;

  • 模块内注入,整个模块内的components皆可以使用
    import { NgModule } from '@angular/core';  -- 内置

    // 除了根模块用BrowserModule,其他一些模块需要用到一些内置指令(*ngIf,*ngFor这些的)必须引入这个 -- 内置
    import { CommonModule } from '@angular/common'; 

    // 路由模块 -- 内置
    import { RouterModule } from '@angular/router';

    // 表单模块,及响应式表单模块 -- 内置
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    import { VehicleFaultRoutes } from './vehicle-fault.routes';

    // service 
    import { VehicleFaultService } from './vehicle-fault.service';

    // component
    import { VehicleFaultComponent } from './vehicle-fault.component';
    import { ListComponent } from './list/list.component';
    import { DetailComponent } from './detail/detail.component';
    import { CleanComponent } from './clean/clean.component';

    // public module
    import { MitPipeModule } from '../../../widgets/mit-pipe/mit-pipe.module';
    import { MitDataTableModule } from '../../../widgets/mit-data-table/mit-data-table.module';
    import { MitAlertModule } from '../../../widgets/mit-alert/mit-alert.module';
    import { MitLoadingModule } from '../../../widgets/mit-loading/mit-loading.module';
    import { DepartmentSelectModule } from './../../../share/department-select/department-select.module';
    const mitModule = [
      MitPipeModule,
      MitDataTableModule,
      MitAlertModule,
      MitLoadingModule,
      DepartmentSelectModule
    ];

    @NgModule({
      imports: [ // 引入相关的模块
        ...mitModule,
        FormsModule,
        RouterModule,
        CommonModule,
        VehicleFaultRoutes
      ],
      declarations: [VehicleFaultComponent, ListComponent, DetailComponent, CleanComponent], // 声明组件
      providers: [VehicleFaultService] // 服务注入
      // providers : [{provide:vfualt, useClass:VehicleFaultService}] // 这是一种别名的写法
    })
    export class VehicleFaultModule { }复制代码
// 引入一些生命周期的控制,组件值传递响应接口等
import { Component, OnInit, AfterContentInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';

// 引入路由模块
import { Router, ActivatedRoute } from '@angular/router';

// 基类
import { MitDataTableBase } from '../../../../widgets/mit-data-table/mit-data-table-base';

// 服务
import { VehicleFaultService } from '../vehicle-fault.service';
import { EventsService } from '../../../../services/events-service.service';

// 动画
import { fadeIn } from '../../../../animation/fadeIn';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
  animations: [fadeIn]
})
export class ListComponent extends MitDataTableBase implements OnInit, OnDestroy {
  private getRenderList: any;
  private currentItem: any;

  private showAlert = false;
  constructor(
    private vehicleFaultService: VehicleFaultService, 
    private eventsService: EventsService, 
    private router: Router, 
    private activatedRoute: ActivatedRoute
  ) {
    super(router, activatedRoute);
  }
  ngOnInit() {
  }
}


// 若是要使用别名注入,还需要引入Inject,从core里面 -- 在components
// 然后放在construcor里面,写法如下
// constructor(@Inject('vfault') private vehicleFaultService: any)
// 这样就可以使用了,且在components内不需要引入对应的服务!!!!复制代码
  • 单一components内注入,自己使用

组件内用providers引入

// 服务
import { vehicleFaultService } from '../vehicle-fault.service';
import { EventsService } from '../../../../services/events-service.service';

// 动画
import { fadeIn } from '../../../../animation/fadeIn';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
  animations: [fadeIn],
  providers: [vehicleFaultService, EventsService]
})复制代码

总结

  1. 服务若是结合@Inpu(),@Output()..感觉不需要ngrx这种状态管理
  2. 服务可以贯穿全局(全局注入),事件广播这些都可以实现
  3. 服务不应该太重(比如处理一些复杂的逻辑),一个服务内部应该清晰,简洁。。

最最重要的。。还是多查阅官方的API,然后动手实践,才能让你上手快起来。。。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Angular 2 + 折腾记 :(8) 动手写一个不怎么靠谱的上传组件

    上传功能在任何一个网站中的地位都是举足轻重的,这篇文章主要扯下如何实现一个上传组件

    CRPER
  • NestJS折腾记- (0) 开胃菜, TypeORM 连接远程的MySQL(ssh tunnel)及Linux信息过滤裁切基础

    适合尝尝鲜,目前有1W+ star, 上正式线我觉得等version 6会稳定些,

    CRPER
  • Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示)

    不推荐完全copy过去,可以看看我是如何针对我这边业务; 做的一个axios的封装及实现的思路

    CRPER
  • Django Admin输出JSON

    Django 自带Admin后台这是Django的优势所在, 这样的话我们可以开箱即用后台功能。 有人说Django重, 可能设计就是这样, 过度的封装就是让开...

    用户1416054
  • Metpy新版功能下载TLnP图设置

    用于天气绘图的Metpy包更新(0.8版本)了,他们要逐渐抛弃Python2.X,转到Python>=3.6的版本上。所以,之前(越2018年6月以前,0.7版...

    zhangqibot
  • 封装的数据清洗可视化特征工程类

    AI之禅
  • angular4实战(3) 插件引入及封装

    版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

    j_bleach
  • 如何理解Python中包的引入

    Python的from import *和from import *,它们的功能都是将包引入使用,但是它们是怎么执行的以及为什么使用这种语法呢?

    砸漏
  • Selenium Python使用技巧(三)

    在Selenium自动化测试中网页可能需要花费一些时间来加载,或者希望在触发测试代码之前可以看到页面上的特定Web元素。在这种情况下,需要执行“显式等待”,这是...

    FunTester
  • 有关于store的使用

    用户4344670

扫码关注云+社区

领取腾讯云代金券