Angular + Ag-Gridでの迅速なアプリケーション開発

ある日、いつものように、コーヒーを飲みながら、できるだけ早くシンプルな機能を備えたアプリケーションを作成する必要があるというメッセージをSkypeで受け取ります。 ソートとページネーション、単語、日付などでフィルタリングする機能を備えたテーブルが必要でした。 また、テーブルから選択したアイテムに関する情報を含むページを用意します。



そのようなtkを手に入れて、貴重な時間を無駄にしないように、Ag-Gridと組み合わせて最新のAngularを使用することにしました。



それはすべてかなり標準的なもので、標準のAngularアプリケーションをインストールして作成します：



Angular自体をインストールする

npm install -g @angular/cli
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

新しいプロジェクトを作成する

 ng new my-app
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、私たちは走ることができます

 cd my-appng serve --open
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、新しいものや複雑なものは何もありません。 全体の手順はせいぜい20分で完了し、既に動作するアプリケーションがあります。 私たちは彼に私たちが必要とするものにこだわることができる。



簡単なものから始めます。



ブートストラップ。 なんで？ シンプル、高速、効率的。 私たちが持っているタスクの枠組みでは、それで十分です。 実際、これらはいくつかの入力フィールド、異なる色のいくつかのボタン、そしてそれだけです。 3番目のバージョンをjQueyと組み合わせます。

 $ npm install bootstrap@3 jquery --save
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、 angle-cli.jsonファイルに移動して追加します。

 "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、ページ上でBootstrapが正常に機能するようになりました。 そして続けます。



Ag-Gridはこのコンポーネントを使用した経験があるため、このコンポーネントを自分で選択しました。非常に柔軟であり、いずれの場合もタスクに適しています。 完全に使用するために、以下を設定します。

 npm install ag-grid-angular npm install ag-grid
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、app.module.tsに移動して、必要なコンポーネントをインポートします。

 import {AgGridModule} from "ag-grid-angular/main";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

インストールしたag-gridのインストールは後で必要になります。 ファイルに追加する

  imports: [ AgGridModule.withComponents([ LinkComponent ]) ],
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

AgGridModule.withComponentsに注意を払いたいので、Ag-Gridで作成したコンポーネントを追加して使用できるようになります。 そこにあるLinkComponentは、データをリンクとしてレンダリングするためのコンポーネントです。 後で戻ります。



また、コンポーネント、サービス、ビューモデルのフォルダを作成します。これらには独自のコンポーネント、サービスがあり、すべてを接続します。質問や問題はないはずです。 Ag-Gridに戻りましょう。



Ag-Gridが使用されているコンポーネントで、以下を接続します。

 import { GridOptions, IDatasource, IGetRowsParams, ColDef, ColGroupDef, NodeChildDetails, RowNode } from "ag-grid"; import { LinkComponent } from '../example/example';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現時点では、接続されているすべてのグリッドコンポーネントを使用するわけではありませんが、将来的には必要になります。 当然、自由に何かを削除または追加できます。 また、リンクのためにコンポーネントを接続します。



グリッドの作成を開始します。 一般的に、次のようになりました。

  this.gridOptions = <GridOptions>{}; this.gridOptions.columnDefs = [ { headerName: "Example1", field: "Example1", }, { headerName: "Example2", field: "Example2", cellRendererFramework: LinkComponent, }, { headerName: "Example3", field: "Example3", } ]; this.ExampleService.getExamplesFields().then(response => { this.examples = response; this.gridOptions.api.setRowData(this.examples); }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンポーネントのhtmlでは、グリッドは次のように接続されています。

 <ag-grid-angular #agGrid style="width: 100%; height: 500px;" class="ag-fresh" [gridOptions]="gridOptions"> </ag-grid-angular>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、順番に見てみましょう。 列が必要なデータで満たされるためには、最低限必要です。これはその名前とfieldidです。 2番目の列のcellRendererFrameworkに注意を払うと、これがまさにパラメーターであり、必要に応じて列にデータを描画できます。 このコンポーネントが内部にどのように配置されているかを見てみましょう。

 import { Component } from "@angular/core"; @Component({ selector: 'link-component', templateUrl: './link-component.component.html' }) export class LinkComponent { public params: any; agInit(params: any): void { this.params = params; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これですべて、 パラメーターに目的のセルの内容が格納されます。 より具体的には、params.valueで。 params.dataでは、グリッド内の選択された行のすべてのデータを確認できます。たとえば、目的のレコードIDで次のページに移動するにはexampleIDが必要です。 このコンポーネントのテンプレートは次のようになります。

 <a [routerLink]="['/exampleform', params.data.exampleID]">{{ params.value }}</a>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここではもう少し進んでルーティングについて説明しますが、ここまではリンクについて説明します。 ご覧のとおり、この行をクリックすると、選択したレコードのページに移動し、そのIDがリンクに追加されます。これにより、必要なレコードを返すサーバーに後で連絡できます。



ルーティングを非常に簡単にしました。

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { ExamplesView } from './components/Examples/Examples.component'; import { AllExamples } from './components/Examples/Examplest.component'; const appRoutes: Routes = [ { path: 'Examples/:id', component: ExamplesView }, { path: '', component: AllExamples }, ]; @NgModule({ imports: [ RouterModule.forRoot(appRoutes, { enableTracing: true }) ], exports: [ RouterModule ], providers: [ ] }) export class AppRoutingModule { }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現時点で必要なのはこれだけです。 ここで特に注意を払う必要はないと思います。 次の記事では、さらに詳しく説明します。



グリッドコンポーネントに戻ります。 列を描画し、列内のデータの表示を変更する方法を見つけました。 次に、これらのデータをグリッドに入力する必要があります。 ここのすべても非常に簡単です：

  this.ExampleService.getExamplesFields().then(response => { this.examples = response; this.gridOptions.api.setRowData(this.examples); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サービスに目を向けると、jsonにデータが返されます。 this.examplesサンプルがあります：examplesViewModel []; ビューモデルは次のようになります。

 export class FeedbackFormData { public Example1: string; public Example2: string; public Example3: number; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、コンポーネントにインポートします。 そして、グリッド内のフィールドIDは、モデル内のフィールドIDに対応する必要があります。 そして、私たちのデータは必要な場所にあります。 その後、たとえば、サーバーフィルタリングの存在下でグリッド内のデータを更新する場合、次のようにできます。

 filter() { this.exampleFilter = this.datePipe.transform(this.maxDate, 'yyyy-MM-dd'); this.HomeService.getPeriodForm(this.exampleFilter, this.search).then(response => { this.examples= response; this.gridOptions.api.setRowData(this.examples); }) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、グリッド内のデータが更新されます。 さて、2番目のページについては何も言うことはありません。 希望のIDを持つレコードに関するデータを取得し、それらを操作します。 したがって、わずか数時間で、グリッドとブラックジャックを使用した簡単なアプリケーションを作成できます。 次の記事では、グリッドの機能とそれで何ができるかについて詳しく説明します。リンクを描画するコンポーネントは氷山の一角にすぎません。 グリッドでのページネーションとソートの実装についても説明します。



ありがとう