1.创建服务

打开命令窗口,cd到项目目录下,输入  ng g service myData1  回车 创建服务,如下图所示:

这样就成功创建了服务,此时,可以在项目的app文件夹下生成了两个service文件,

2.引入注册服务

服务创建好之后,要先引入注册之后才能用。

首先要在app.module.ts里:

引入     import { MyDataService } from './my-data.service';

注册      providers:[MyDataService];

app.module.ts整体代码如下:
import { NgModule }      from '@angular/core';//引入angular核心模块
import { BrowserModule } from '@angular/platform-browser'; //浏览器解析
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here //引入组件
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { NewsComponent } from './components/news/news.component'; //1.引入服务 注册服务
import { MyDataService } from './my-data.service'; @NgModule({
imports: [ //配置模块 /*引入模块 请求数据模块*/
BrowserModule,
FormsModule // <-- import the FormsModule before binding with [(ngModel)]
],
declarations: [ //声明 注册 组件 所有自定义的组件都要在这里声明
AppComponent,
HeaderComponent,
NewsComponent
],
providers:[MyDataService], /*服务 工具*/
bootstrap: [ AppComponent ] //启动模块 /*加载根组件*/
})
export class AppModule { } //暴露跟模块
app.module.ts里引入注册之后,还需要在用到服务的地方引用,我写的demo是在news组件里用到了MyDataService服务,所以就在news.component.ts里引入
//要用服务 1.需要在app.module.ts 引入和注册    2.在使用的地方引入

import { MyDataService } from '../../my-data.service';

这样就可以在news.component.ts中使用MyDataService服务了;

3.使用服务

使用服务就是把服务实例化,在news.component.ts中用构造函数来实例化我们定义的服务:

  constructor(private  storage:MyDataService) {
console.log(this.storage);
this.news = this.storage.getItem('msgList') || [];
}

这样就可以使用服务了。

我这里写了一个小demo,使用服务实现数据的缓存处理:

html:

<h3>{{newsTitle}}</h3>
<input type="text" [(ngModel)]="currentMsg"><button (click)="addList()">增加+</button>
<ul>
<li *ngFor="let item of news;let key =index">
{{item}}------<button (click)="delete(key)">删除</button>
</li>
</ul>

news.component.ts:

import { Component, OnInit } from '@angular/core';

//要用服务 1.需要在app.module.ts 引入和注册    2.在使用的地方引入

import { MyDataService } from '../../my-data.service';

@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit { public news = [];
public newsTitle = '填写个人信息,添加到列表';
public currentMsg; constructor(private storage:MyDataService) { this.news = this.storage.getItem('msgList') || [];
} ngOnInit() { } addList() {
this.news.push(this.currentMsg);
this.storage.setItem('msgList',this.news);
}
delete(i){
this.news.splice(i,1);
this.storage.setItem('msgList',this.news);
} }

my-data1.sevice.ts:

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

@Injectable()
export class MyDataService { constructor() { } setItem(key,value){
localStorage.setItem(key,JSON.stringify(value));
}
getItem(key){
return JSON.parse(localStorage.getItem(key));
}
removeItem(key){
localStorage.removeItem(key);
} }
 

angular2.0---服务Service,使用服务进行数据处理的更多相关文章

  1. 安卓第十三天笔记-服务(Service)

    安卓第十三天笔记-服务(Service) Servcie服务 1.服务概念 服务 windows 服务没有界面,一直运行在后台, 运行在独立的一个进程里面 android 服务没有界面,一直运行在后台 ...

  2. Angular.js之服务与自定义服务学习笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 在 CentOS7 上将自定义的 jar 包注册为 linux 服务 service

    在 CentOS7 上将自定义的 jar 包注册为 linux 服务 service 1.在 /etc/rc.d/init.d/ 目录下创建一个名字和服务名完全相同的 shell 脚本文件 joyup ...

  4. Windows Service插件服务开源

    WindowsService 插件服务是一个为简化NTService开发和打包程序,提供插件开发的方式进行动态加入或删除业务. 插件式服务程序的由来,在系统维护的过程中,根据企业的要求经常要进行一些周 ...

  5. 安卓服务(Service)的两种开启方式以及服务的生命周期

    安卓中服务的开启方式 一:採用start的方式开启服务 调用函数:startService(Intent)->onCreate()->onStart()/onStartCommand()- ...

  6. 服务 Service 基本介绍

    Activity public class MainActivity extends ListActivity {     private boolean flag;//是否开启线程     publ ...

  7. Android服务Service总结

    转自 http://blog.csdn.net/liuhe688/article/details/6874378 富貴必從勤苦得,男兒須讀五車書.唐.杜甫<柏學士茅屋> 作为程序员的我们, ...

  8. Android学习笔记--服务(Service)

    1.服务概述 1.服务是Android四大组件之一,在使用上可以分为本地服务和远程服务,本地服务是指在不影响用户操作的情况下在后台默默的执行一个耗时操作,例如下载,音频播放等.远程服务是指可以供其他应 ...

  9. BZOJ 1820: [JSOI2010]Express Service 快递服务( dp )

    dp(i,j,k)表示在处理第i个业务, 另外2个在j,k处. 第一维可以滚动... --------------------------------------------------------- ...

随机推荐

  1. 用 TensorFlow 实现 k-means 聚类代码解析

    k-means 是聚类中比较简单的一种.用这个例子说一下感受一下 TensorFlow 的强大功能和语法. 一. TensorFlow 的安装 按照官网上的步骤一步一步来即可,我使用的是 virtua ...

  2. innodb 源码分析 --锁

    innodb引擎中的锁分两种 1)针对数据结构, 如链表 互斥锁 读写锁 http://mysqllover.com/?p=425 http://www.cnblogs.com/justfortast ...

  3. POJ 1111

    #include<iostream> #define MAXN 30 using namespace std; char _m[MAXN][MAXN]; bool mark[MAXN][M ...

  4. Python shutil模块(目录和文件操作)

    import shutil #导入shutil模块 copyfileobj方法 将类文件对象fsrc的内容复制到类文件对象fdst shutil.copyfileobj(fsrc, fdst[, le ...

  5. 启动Storm各个后台进程

    启动Storm的所有后台进程.和Zookeeper一样,Storm也是快速失败(fail-fast)的系统,这样Storm才能在 任意时刻被停止,并且当进程重启后被正确地恢复执行.这也是为什么Stor ...

  6. (转)Python中集合(set)的基本操作以及一些常见的用法

    原文:http://blog.51cto.com/10616534/1944841 Python除了List.Tuple.Dict等常用数据类型外,还有一种数据类型叫做集合(set),集合的最大特点是 ...

  7. sublime text ubuntu

    { "color_scheme": "Packages/User/SublimeLinter/Dawn (SL).tmTheme", "font_fa ...

  8. 在Vue的webpack中结合runder函数

    在Vue的webpack中结合runder函数 1.引入: <h1>下面是vue的内容:</h1> <div id="app"> <log ...

  9. GODADDY 优质DNS 未被墙

    下面列出的是我本地测试出的优质服务器 NS10.DOMAINCONTROL.COM NS12.DOMAINCONTROL.COM NS14.DOMAINCONTROL.COM NS19.DOMAINC ...

  10. Git 命令操作记录

    1.安装完git软件之后(win系统的) 1)配置用户名密码: 设置本地机器默认commit的昵称与Email. 请使用有意义的名字与email. git config --global user.n ...