angular2——发布angular2模块，服务

上回说到了如何利用npm包管理器发布自己的包，这次咱们就来个实践。

引言：三步走战略

1、写好自己的组件

2、利用npm发布自己的组件

3、使用包

一、写组件

  基于angular2的架构，一般都需要下列文件

html文件，css文件，component文件，module文件。

component文件内容

//import区域import { Component } from '@angular/core';import { DataService } from 'itoo-module';//angular2装饰器区域@Component({  selector: 'data-grid',  templateUrl: './datagrod.component.html',  styleUrls: ['./datagrid.component.css']})//类文件export class DatagridCompoent implements OnInit{      //组件的方法区，字段区     }

再者,基于bootstrap写自己的html和css，就这样写好自己的 组件了。

2、得把自己的组件配置到module里面

DatagridModule文件配置

//依旧是import区域import {DataGridComponent} from "./datagrid.component";import {DataService} from "./dataservice";......//基于angular2的写法@NgModule({  declarations: [    DataGridComponent  //把对外提供的组件全部加入declarations中  ],//使用的module全部放到imports中  imports: [    BrowserModule,    FormsModule,    HttpModule,   NgbModule.forRoot()  ],  providers:[DataService], //引用到的服务，再次实例化  exports:[DataGridComponent]       //对外提供的组件，全部放到exports里})

最后自己的组件就完成了。

二、npm发布自己的组件

上一篇已经说明了怎么利用npm发布自己的组件。小编在发布过程中主要遇到了入口程序文件的写法，就是 package.json的main的文件怎么写，其实main的写法有好多，主要作用是用来给外部提供接口。是基于node.js的写法。

package.json内容

{  "name": "itoo-module",  "version": "1.0.6",  "description": "module of itoo ",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [    "itoo"  ],  "author": "ledary",  "license": "ISC"}

index.js内容的写法多样本例提供一种写法

export * from './lib/datagrid.module';   export * from './lib/dataservice';

看上面发布的dataservice，其实是一个封装好的类，里面有访问后台数据的方法。对于打包发布的类，我们需要给类 d.ts文件，因为发布的包都是js，js中的对象的方法不会自动弹出，而且对于JS的方法在编程时不会提示错误，甚至运行的时候会破坏js里面各种变量的类型，造成运行时的错误。所以需要写d.ts文件。这样的话就完美解决了js方法不能自动提示的问题。

service.d.ts内容

import { Injectable,Input}    from '@angular/core';import { Headers, Http,Response } from '@angular/http';import 'rxjs/add/operator/toPromise';import { Observable } from 'rxjs/Observable';import 'rxjs/add/operator/map';export declare class DataService  {    private Configuration:any;   constructor(http: Http);     public getConfiguration():any;private handleError(error: any): Promise<any>;private getWebfig():void;public getData(url:string):Promise<any>;}

service.ts内容

/** * Created by WGP on 2017/4/25. */import { Injectable,Input}    from '@angular/core';import { Headers, Http,Response } from '@angular/http';import 'rxjs/add/operator/toPromise';import { Observable } from 'rxjs/Observable';import 'rxjs/add/operator/map';@Injectable()export  class DataService { private   Configuration:any;  // private headers = new Headers({'Content-Type': 'application/json'});public getConfiguration(){  return this.Configuration;}   constructor(private http:Http){      this.getWebfig();   }   //调用远程地址，获取数据 get方法   //返回response的json串  public getData(url:string): Promise<any> {      return this.http                .get(url)               .toPromise()               .then(response => response.json() as any )               .catch(this.handleError);  }private  getWebfig(){  this.http.get("src/mock-data/web-config.json")            .map((res: Response) => res.json()).subscribe(data=>this.Configuration=data);    }    //错误处理    private handleError(error: any): Promise<any> {    console.error('An error occurred', error); // for demo purposes only    return Promise.reject(error.message || error);  }}

三、使用包

首先利用npm包管理器，安装好自己的包。npm安装不成功的话，可以使用cnpm

cnpm install 包名

其次，把包引入项目内

引用包中的模块

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms';import { NgbModule }  from '@ng-bootstrap/ng-bootstrap';// import { DataGridModule } from './table/lib/datagrid.module';import { DataGridModule } from 'itoo-module';import { AppComponent } from './app.component';import { HttpModule} from '@angular/http';@NgModule({  declarations: [    AppComponent  ],   imports: [    BrowserModule,    FormsModule,    HttpModule,    NgbModule,    DataGridModule  ],  exports:[DataGridModule],    bootstrap: [AppComponent]})export class AppModule { }

服务类的引入

import { Component } from '@angular/core';import { DataService } from 'itoo-module'; //引入包的服务@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {  constructor(private dataService:DataService){} //依赖注入服务 test(){   alert(this.dataService.getConfiguration()["port"]); 使用服务内的方法。    }  }

这样的基于angular2的模块，服务的发布就完成了。

源码地址： https://github.com/ledary/demo

在发布的过程中遇到了不少的问题。参考angular2核心模块的包，逐渐知道了怎么发布angular2的包，其实也是基于node.js的发布。在中间着实遇到了不少问题，非常感谢众多帮助我的人啊。多交流，多进步。