angular2 發布angular2模組，服務

上回說到了如何利用npm包管理器發布自己的包，這次咱們就來個實踐。

1、寫好自己的元件

2、利用npm發布自己的元件

3、使用包

基於angular2的架構，一般都需要下列檔案

html檔案，css檔案，component檔案，module檔案。

component檔案內容

//import區域
import  from '@angular/core';
import  from 'itoo-module';
//angular2裝飾器區域
@component()
//類檔案
export class datagridcompoent implements oninit

再者,基於bootstrap寫自己的html和css，就這樣寫好自己的元件了。

2、得把自己的元件配置到module裡面

datagridmodule檔案配置

//依舊是import區域
import  from "./datagrid.component";
import  from "./dataservice";
......
//基於angular2的寫法
@ngmodule()

最後自己的元件就完成了。

package.json內容

,
"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內容

export declare class dataserviceservice.ts內容

//呼叫遠端位址，獲取資料 get方法

//返回response的json串

public getdata(url:string): promise

private getwebfig()

//錯誤處理

private handleerror(error: any): promise

}

三、使用包

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

cnpm install 包名

其次，把包引入專案內

引用包中的模組

服務類的引入

import  from '@angular/core';
import  from 'itoo-module'; //引入包的服務
@component()
constructor(private dataservice:dataservice){} //依賴注入服務
test()
}

這樣的基於angular2的模組，服務的發布就完成了。

在發布的過程中遇到了不少的問題。參考angular2核心模組的包，逐漸知道了怎麼發布angular2的包，其實也是基於node.js的發布。在中間著實遇到了不少問題，非常感謝眾多幫助我的人啊。多交流，多進步。

angular2 發布angular2模組，服務

Angular學習記錄3 發布專案

Angular 2 最終版正式發布

Angular 2 最終版正式發布

angular2 發布angular2模組，服務

Angular學習記錄3 發布專案

Angular 2 最終版正式發布

Angular 2 最終版正式發布

相關推薦