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的发布。在中间着实遇到了不少问题，非常感谢众多帮助我的人啊。多交流，多进步。