igniteui angular wrappers下载igniteui angular wrappers源代码下载

点燃的UI包装器

注意：IGNITE UI包装器的Angular包装器已弃用！改用`igniteui-angular`本地角组件！

使用projectsigniteui-angular-wrapperssrcpublic-api.ts中发现的组件在角度应用中使用IGNITE UI控件。在这里与运行样品一起工作。

重要的是，该存储库已从igniteui-angular2重命名为igniteui-angular-wrappers 。在我们的新命名惯例中阅读更多信息。

要求

jQuery v1.9.1及以后
jQuery UI v1.9.0及以后
Angular v2.0 beta和以后
点燃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 feed的访问，并将依赖项添加到package.json 。

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

入门

点燃UI CLI

开始使用IGNITE UI CLI和IGNITE UI角包装器：

 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>`
Ignumericeditor	`<ig-numeric-editor>`
igpercenteditor	`<ig-percent-editor>`
igtexteditor	`<ig-text-editor>`
igdatepicker	`<ig-date-picker>`
伊格里	`<ig-tree>`
igmap	`<ig-map>`
igupload	`<ig-upload>`
IgVideOplayer	`<ig-video-player>`

配置控制选项

有两个强制性属性需要设置为IGNITE UI控制自定义标签： 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属性指向应用程序兼容类上的gridOptions属性，而widgetId指向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';
    }
}

其他自定义标签

有两个自定义标签<column>和<features>在iggrid/igtreegrid/ighierarchicalgrid中使用，以相应地配置columns和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>

每个网格功能也由自定义标签表示。

示例：

功能名称	标签
柱状	`<column-moving>`
过滤	`<filtering>`
Groupby	`<group-by>`
隐藏	`<hiding>`
细胞器	`<cell-merging>`
appendrowsondemand	`<append-rows-on-demand>`
多叉台	`<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
                    }
                    
                }
            ]
        };
    }
}

在此示例中，IgGridFeltering 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
ighierarchicalgrid
igcombo
igeditors
伊格里

对于双向数据绑定到工作，您需要将数据源分配为模板中的属性。例子：

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

注意：如果使用options.dataSource在.ts文件中作为配置，则双向数据绑定将无法工作。

要手动触发更改检测，请使用markForCheck API。

在Angular应用程序中使用IgDatasource

多亏了 @type/ignite-ui，可以创建一个IGNITE UI数据源的实例。

 let source = new Infragistics.DataSource(settings);

此数据源实例是用有关IgDatasource方法的Intellisense授予的。

 source.dataBind();

查看以下演示以获取更多信息。

运行测试

运行测试的命令是：

 npm test

之后，如果所有测试成功地传递了public-api.ts文件的代码覆盖范围，将在./coverage/igniteui-angular-wrappers文件夹下生成。

要查看代码覆盖范围，您可以在./coverage/igniteui-angular-wrappers/src下打开一个HTML文件之一。

什么是Ignite UI？

IGNITE UI是一种高级HTML5+工具集，可帮助您创建令人惊叹的现代Web应用程序。 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设计，并以infragistics为背景，这是一家以体验为中心的公司，具有超过24年的经验，可为网络，窗口和移动环境提供企业准备就绪，高性能的用户界面工具。

展开