igniteui angular wrappersダウンロード-Igniteui igniteui angular wrappersソースコードダウンロード

AngularのUIラッパーに点火します

注：AngularのIgnite UIラッパーは非推奨です！代わりに`igniteui-angular`角成分を使用してください！

AngularアプリケーションでUIコントロールを使用するために、 projectsigniteui-angular-wrapperssrcpublic-api.tsにあるコンポーネントを使用します。ここで実行中のサンプルを使用します。

重要なのは、リポジトリがigniteui-angular2からigniteui-angular-wrappersに改名されました。新しい命名条約の詳細をご覧ください。

要件

jQuery v1.9.1以降
jQuery UI v1.9.0以降
Angular V2.0ベータ以降
UI 15.2以降に点火します

サンプルを実行します

サンプルを実行するには、マシンにnode.jsをインストールする必要があります。その後、端末から次のコマンドを実行します。

git clone https://github.com/IgniteUI/igniteui-angular-wrappers
cd igniteui-angular-wrappers
npm install
npm start

igniteui-angular-wrappers ignite-ui-fullライセンスパッケージに依存します。 IGNITE UIプライベートNPMフィードへのアクセスのセットアップについてこのガイドに従ってください。 package.jsonに依存関係を追加します。

 "dependencies": {
	"@infragistics/ignite-ui-full": "latest"
}

はじめる

UI CLIに点火します

Ignite Ui CLIとIgnite UI Angularラッパーを開始するには：

 npm i -g igniteui-cli
ig new <project name> --framework=angular --type=ig-ts
cd <project name>
ig add combo <component name>
ig start

コントロールの初期化

Angularアプリケーションでは、IGNITE UIコントロールは、カスタムタグを使用して行われるマークアップ初期化をサポートします。

カスタムタグ

各コントロールは、コントロール名の各キャピタルレターを-シンボルで分割することにより、タグ名が形成されるカスタムタグコンポーネントを実装します。

注：セルフクロージングタグ（ <ig-combo/> ）でクロージングタグ（ </ig-combo> ）を使用することをお勧めします。

例：

コントロール名	タグ
Igcombo	`<ig-combo>`
iggrid	`<ig-grid>`
Igdatachart	`<ig-data-chart>`
igdialog	`<ig-dialog>`
igdateeditor	`<ig-date-editor>`
Igeditor	`<ig-editor>`
Igmaskeditor	`<ig-mask-editor>`
Ignumumumumericeditor	`<ig-numeric-editor>`
igpercenteditor	`<ig-percent-editor>`
IgTextEditor	`<ig-text-editor>`
igdatepicker	`<ig-date-picker>`
Igtree	`<ig-tree>`
IgMap	`<ig-map>`
igupload	`<ig-upload>`
igvideoplayer	`<ig-video-player>`

制御オプションの構成

IGNITE UIコントロールカスタムタグに設定する必要がある2つの必須属性があります。 options - コントロールの構成を含むアプリケーションコンポーネントクラスのプロパティを指します。 widgetIdコントロールでは、IDを割り当てる必要があります。

例：

 @Component({
    selector: 'my-app',
    template: `<ig-grid 
        [(options)]="gridOptions" 
        [(widgetId)]='id' 
        [dataSource]='data'
        ></ig-grid>`
})
export class AppComponent {
    private gridOptions: IgGrid;
    private id: string;
    private data: any;

    constructor() {
        this.data = Northwind.getData();
        this.id ='grid1';
        this.gridOptions = {
            width: "100%",
            height: "400px",
            autoGenerateColumns: true
        };
    }
}

この例では、 options 、アプリケーションコンポーネントクラスとwidgetIdポイントのgridOptionsプロパティに属性ポイントをidプロパティに属性します。

トップレベルの制御オプションの構成

すべてのトップレベルのオプションは、IGNITE UIコントロールカスタムタグの属性として設定できます。この場合、 options属性は必須ではありませんが、許可されています。また、 optionsとトップレベルの属性の両方が組み合わされている場合、プロパティが重複すると、トップレベルの属性がoptionsをオーバーライドします。また、トップレベルの属性を変更すると、オプションが設定可能な場合にのみ、ウィジェットに変更が適用されます。

例：

 @Component({
    selector: 'my-app',
    template: `<ig-grid
        [widgetId]='id'
        [width]='w'
        [autoCommit]='true'
        [dataSource]='data'
        [height]='h'
        [autoGenerateColumns]='true'
        >
    </ig-grid>`
})
export class AppComponent {
    private id: string;
    private data: any;
    private w: string;
    private h: string;
    private pKey: string;

    constructor() {
        this.data = Northwind.getData();
        this.id ='grid1';
        this.w = '100%';
        this.h = '400px';
        this.pKey = 'ProductID';
    }
}

その他のカスタムタグ

columns /igtreegrid/igherarchicalgridで使用される2つfeaturesカスタムタグ<column>と<features>があります。

例：

	<ig-grid [widgetId]='id'>
		<column [key]="'ProductID'" [headerText]="'Product ID'" [width]="'165px'" [dataType]="'number'"></column>
		<column [key]="'ProductName'" [headerText]="'Product Name'" [width]="'250px'" [dataType]="'string'"></column>
		<column [key]="'QuantityPerUnit'" [headerText]="'Quantity per unit'" [width]="'250px'" [dataType]="'string'"></column>
		<column [key]="'UnitPrice'" [headerText]="'Unit Price'" [width]="'100px'" [dataType]="'number'"></column>
		<features>
			<paging [pageSize]="currPageSize"></paging>
			<filtering></filtering>
            <selection></selection>
            <group-by></group-by>
		</features>
	</ig-grid>

各グリッド機能は、カスタムタグでも表されます。

例：

機能名	タグ
columnmoving	`<column-moving>`
フィルタリング	`<filtering>`
グループビー	`<group-by>`
隠蔽	`<hiding>`
セルマージング	`<cell-merging>`
appendRowsOndEmand	`<append-rows-on-demand>`
Multicolumnheaders	`<multi-column-headers>`
ページング	`<paging>`
応答性	`<responsive>`
サイズ変更	`<resizing>`
rowselectors	`<row-selectors>`
選択	`<selection>`
ソート	`<sorting>`
要約	`<summaries>`
列フィックス	`<column-fixing>`
ツールチップ	`<tooltips>`
更新	`<updating>`

新しいコントロールオプションのセットを適用します

より多くのオプションを一度に変更する（またはコンポーネントを別のオプションセットで再作成する）ために、新しい構成をoptionsプロパティに適用できます。

例：

 @Component({
    selector: 'my-app',
    template: `<ig-grid 
        [(options)]="gridOptions" 
        [(widgetId)]='id' 
        [dataSource]="data" 
        ></ig-grid>`
})
export class AppComponent {
    private gridOptions: IgGrid;
    private id: string;
    private data: any;

    constructor() {
        this.data = Northwind.getData();
        this.id ='grid1';
        this.gridOptions = {
            width: "100%",
            height: "400px",
            autoGenerateColumns: true
        };
    }

    recreateGrid() {
        this.gridOptions = {
            dataSource: Northwind.getAnotherData(),
            width: "700px",
            autoGenerateColumns: true,
            features: [
                { name: "Paging" }
            ]
        };
    }
}

この例ではoptions属性ポイントがgridOptionsを属性にし、参照を変更するとグリッドが破壊され、古いオプションが新しいオプションを組み合わせて、組み合わせたオプションとグリッドを作成します。また、新しいオプションとの組み合わせにより、新しいオプションに定義されていない場合でも、新しいグリッドの高さは400pxの高さになることに注意してください。オプションを無効にする場合は、 null 、 undefined 、 []または{}に設定します。

イベントの処理

コントロールイベントへのバインディングは、属性の名前が括弧に囲まれたコントロールのイベント名の名前であり、値はイベントハンドラーの名前である属性を割り当てることにより達成されます。

例：

イベント	マークアップ
iggrid.events.databind	`<ig-grid (dataBind)="dataBindHandler">`
igcombo.events.textchanged	`<ig-combo (textChanged)="textChangedHandler">`
igdateeditor.events.keypress	`<ig-date-editor (keypress)="keypressHandler">`

 @Component({
    selector: 'my-app',
    template: `<ig-grid 
        [(options)]="gridOptions" 
        [(widgetId)]='id' 
        [dataSource]="data" 
        (dataBind)="dataBindHandler($event)"></ig-grid>`
})
export class AppComponent {
    private gridOptions: IgGrid;
    private id: string;
    private data: any;
    private dataBindHandler: any;
    
    constructor() {
        this.data = Northwind.getData();
        this.id ='grid1';
        this.gridOptions = {
            width: "100%",
            height: "400px",
            autoGenerateColumns: true
        };
    }
    
    dataBindHandler(event, ui) {
        // event handler code    
    }
}

Iggridへのバインディング*機能イベントは、コントロールの構成コードで行われます。

例：

 @Component({
    selector: 'my-app',
    template: `<ig-grid 
        [(options)]="gridOptions" 
        [dataSource]="data" 
        [(widgetId)]='id'></ig-grid>`
})
export class AppComponent {
    private gridOptions: IgGrid;
    private id: string;
    private data: any;

    constructor() {
        this.data = Northwind.getData();
        this.id ='grid1';
        this.gridOptions = {
            width: "100%",
            height: "400px",
            autoGenerateColumns: true,
            features: [
                {
                    name: "Filtering",
                    dataFiltered: function (evt, ui) {
                        // event handler code
                    }
                    
                }
            ]
        };
    }
}

この例では、IgGridFiltering dataFilteredイベントがアプリケーションコンポーネントクラスで処理されます。

コンポーネントメソッドの呼び出し

コンポーネントメソッドは、ビューからコンポーネントにアクセスすることで呼び出すことができます。例えば：

 @Component({
    selector: 'my-app',
    template: '<ig-grid #grid1
        [(options)]="gridOptions">
        <features>
            <paging [pageSize]="'2'"></paging>
        </features>
    </ig-grid>'
})
export class AppComponent {
    private gridOptions: IgGrid;
    @ViewChild("grid1") myGrid: IgGridComponent;
    private id: string;
    constructor() { ... }
     
    ngAfterViewInit() {
        //call grid method
        var cell = this.myGrid.cellById(1, "Name");
        //call grid paging method
        this.myGrid.featuresList.paging.pageIndex(2);
    }
}

双方向のデータバインディング

現在、次のコントロールは双方向のデータバインディングをサポートしています。

iggrid
igtreegrid
IgherarchicalGrid
Igcombo
igeditors
Igtree

双方向のデータバインディングには、テンプレート内のプロパティとしてデータソースを割り当てる必要があります。例：

 <ig-combo [widgetId]="'combo2'"
        [(options)]="options" 
        [dataSource]='northwind'
        [(ngModel)]="combo.value1">
</ig-combo>

注： options.dataSourceファイルのdatasourceを構成として使用すると、2方向のデータバインディングは機能しません。

変更の検出を手動でトリガーするには、 markForCheck APIを使用してください。

Angularアプリ内のIgdatasourceを使用します

@Types/Ignite-UIのおかげで、すべてのIGNITE UIデータソースのインスタンスを作成することができます。

 let source = new Infragistics.DataSource(settings);

このデータソースインスタンスには、Igdatasourceメソッドに関するIntellisenseが付与されています。

 source.dataBind();

詳細については、次のデモを確認してください。

実行中のテスト

テストを実行するためのコマンドは次のとおりです。

 npm test

その後、すべてのテストがpublic-api.tsファイルのコードカバレッジに正常に渡された場合、 ./coverage/igniteui-angular-wrappers gigniteui-iangular-wrappersフォルダーの下で生成されます。

コードのカバレッジを確認するには、 ./coverage/igniteui-angular-wrappers/src igniteui-angular-wrappers/srcの下でHTMLファイルの1つを開くことができます。

Ignite UIとは何ですか？

Ignite UIは、見事な最新のWebアプリを作成するのに役立つ高度なHTML5+ツールセットです。 Building on jQuery and jQuery UI, it primarily consists of feature rich, high-performing UI controls/widgets such as all kinds of charts, data visualization maps, (hierarchical, editable) data grids, pivot grids, enhanced editors (combo box, masked editors, HTML editor, date picker, to name a few), flexible data source connectors, and a whole lot more.ここにリストするには多すぎる - 詳細についてはサイトをチェックして、試用版をダウンロードしてください。

Ignite UIは、誰かの自由時間に作成された別のライブラリだけではありません。コマーシャルが準備ができており、非常によくテストされており、トップパフォーマンスのために調整され、優れたUXのために設計され、インフラギースに裏付けられています。これは、ウェブ、ウィンドウ、モバイル環境向けのエンタープライズ対応の高性能ユーザーインターフェイスツールを提供する24年以上の経験の実績を持つ経験に焦点を当てた企業です。

拡大する