angular2——发布angular2模块,服务

前端之家收集整理的这篇文章主要介绍了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,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,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的发布。在中间着实遇到了不少问题,非常感谢众多帮助我的人啊。多交流,多进步。

原文链接:https://www.f2er.com/angularjs/147312.html

猜你在找的Angularjs相关文章