Merge pull request #201 from dkamburov/master

kdinev · web-flow · commit cd55d4fa2296 · 2017-09-27T16:24:48.000+03:00
Update dist/npm package dependencies and readme
diff --git a/dist/npm/README.md b/dist/npm/README.md
@@ -1,18 +1,27 @@
-#Ignite UI components for Angular 2
+# Ignite UI components for Angular
 
-Use the `igniteui.angular2.js` to taka advantage from the [Ignite UI](http://igniteui.com) controls in [Angular 2](https://angular.io/) applications. [Work with the running samples here](http://igniteui.github.io/igniteui-angular2).
+Use the components found in `src\igniteui.angular2.ts` to use [Ignite UI](http://igniteui.com) controls in [Angular](https://angular.io/) applications. [Work with the running samples here](http://igniteui.github.io/igniteui-angular2).
 
-#Requirements
+# Requirements
 
 - [jQuery](http://www.jquery.com) v1.9.1 and later
 - [jQuery UI](http://www.jqueryui.com) v1.9.0 and later
-- [AngularJS 2](https://angular.io/) v2.0 beta and later
+- [Angular](https://angular.io/) v2.0 beta and later
 - [Ignite UI](http://www.igniteui.com) 15.2 and later
 
-#Getting Started
+# Running the samples
+To run the samples, you need [Node.js](http://nodejs.org/) installed on your machine.
+Afterwards, from your terminal run the following commands:
+
+1. `git clone https://github.com/IgniteUI/igniteui-angular2`
+2. `cd igniteui-angular2` 
+3. `npm install`
+4. `npm start`
+
+# Getting Started
 
 ## Initializing controls
-In an Angular 2 application, Ignite UI controls support markup initialization which is done by using custom tags.
+In an Angular application, Ignite UI controls support markup initialization which is done by using custom tags.
 
 ### Custom tags
 Each control implements a custom tag component where the tag name is formed by splitting each capital letter in the control name with the `-` symbol.
@@ -51,8 +60,7 @@ There are two mandatory attributes that need to be set to an Ignite UI control c
         selector: 'my-app',
         template: `<ig-grid 
             [(options)]="gridOptions" 
-            [(widgetId)]='id'></ig-grid>`,
-        directives: [IgGridComponent]
+            [(widgetId)]='id'></ig-grid>`
     })
     export class AppComponent {
         private gridOptions: IgGrid;
@@ -91,8 +99,7 @@ when there are overlapping properties. Also changing top-level attribute will ap
             [height]='h'
             [autoGenerateColumns]='true'
             >
-        </ig-grid>`,
-        directives: [IgGridComponent]
+        </ig-grid>`
     })
     export class AppComponent {
         private id: string;
@@ -110,6 +117,94 @@ when there are overlapping properties. Also changing top-level attribute will ap
         }
     }
 
+### Other custom tags
+
+There are two custom tags `<column>` and `<features>` that are used in igGrid/igTreeGrid/igHierarchicalGrid to configure the `columns` and `features` options accordingly.
+
+#### Example:
+
+		<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>
+
+Each of the grids features is also represented by a custom tag.
+
+#### Examples:
+
+|  Feature Name      |          Tag              |
+|--------------------|---------------------------|
+| ColumnMoving       | `<column-moving>`         |
+| Filtering          | `<filtering>`             |
+| GroupBy            | `<group-by>`              |
+| Hiding             | `<hiding>`                |
+| CellMerging        | `<cell-merging>`          |
+| AppendRowsOnDemand | `<append-rows-on-demand>` |
+| MultiColumnHeaders | `<multi-column-headers>`  |
+| Paging             | `<paging>`                |
+| Responsive         | `<responsive>`            |
+| Resizing           | `<resizing>`              |
+| RowSelectors       | `<row-selectors>`         |
+| Selection          | `<selection>`             |
+| Sorting            | `<sorting>`               |
+| Summaries          | `<summaries>`             |
+| ColumnFixing       | `<column-fixing>`         |
+| Tooltips           | `<tooltips>`              |
+| Updating           | `<updating>`              |
+
+
+### Apply new set of Control Options
+
+In order to change the more options at once (or recreate the component with another set of options), the new configuration can be applied to the `options` property.
+
+#### Example:
+
+    @Component({
+        selector: 'my-app',
+        template: `<ig-grid 
+            [(options)]="gridOptions" 
+            [(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 = {
+                dataSource: this.data,
+                width: "100%",
+                height: "400px",
+                autoGenerateColumns: true
+            };
+        }
+
+        recreateGrid() {
+            this.gridOptions = {
+                dataSource: Northwind.getAnotherData(),
+                width: "700px",
+                autoGenerateColumns: true,
+                features: [
+                    { name: "Paging" }
+                ]
+            };
+        }
+    }
+
+In this example `options` attribute points to `gridOptions` and changing in reference will destroy the grid, combine the old options with new ones and create the grid with the combined options.
+Also note that the new grid will have height of 400px, even though it's not defined into the new options, because of the combination with new options.
+If disabling an option is required set it to `null`, `undefined`, `[]` or `{}`.
+
 ### Handling events
 
 Binding to control events is achieved by assigning attributes where the name of the attribute is the name of the control's event name surrounded by parenthesis and the value is the name of the event handler.
@@ -122,15 +217,13 @@ Binding to control events is achieved by assigning attributes where the name of
 |igCombo.events.textChanged   | `<ig-combo (textChanged)="textChangedHandler">` |
 |igDateEditor.events.keypress | `<ig-date-editor (keypress)="keypressHandler">` |
 
-#### Example:
 
     @Component({
         selector: 'my-app',
         template: `<ig-grid 
             [(options)]="gridOptions" 
             [(widgetId)]='id' 
-            (dataBind)="dataBindHandler($event)"></ig-grid>`,
-        directives: [IgGridComponent]
+            (dataBind)="dataBindHandler($event)"></ig-grid>`
     })
     export class AppComponent {
         private gridOptions: IgGrid;
@@ -162,8 +255,7 @@ Binding to igGrid* feature events is done in the control's configuration code.
         selector: 'my-app',
         template: `<ig-grid 
             [(options)]="gridOptions" 
-            [(widgetId)]='id'></ig-grid>`,
-        directives: [IgGridComponent]
+            [(widgetId)]='id'></ig-grid>`
     })
     export class AppComponent {
         private gridOptions: IgGrid;
@@ -193,6 +285,118 @@ Binding to igGrid* feature events is done in the control's configuration code.
 
 In this example igGridFiltering `dataFiltered` event is handled in the application component class.
 
+## Calling Component methods
+
+Component methods can be called by accessing the component from the view. For example:
+
+    @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);
+        }
+    }
+
+## Using Ignite UI Angular Components inside AOT app
+As a starting point, you can review the [Angular documentation on the subject](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html), which provides a guide how to compile an app with AOT. Follow their instructions to AOT compile the quickstart app.
+
+Once you have a running application compiled with AOT, the next step is to add the Ignite UI Components into this app. In this demo IgComboComponent is being added to the app, igCombo is an OSS widget and it is part of the ignite-ui npm package.
+First we need to install the required packages:
+- `npm install ignite-ui`
+- `npm install igniteui-angular2`
+- `npm install jquery-ui-bundle`
+
+**Note**: You have to download the full Ignite UI product if you would like to use widgets which are not part of the OSS widgets. This is a [list](https://github.com/IgniteUI/ignite-ui#available-features-in-ignite-ui-open-source-version) of the controls available in the Open-source version
+
+Then go to the app module and import the combo - `import 'ignite-ui/js/modules/infragistics.ui.combo.js';`. But before that add all the dependencies for it:
+
+    import 'jquery';
+    import 'jquery-ui-bundle/jquery-ui.min.js';
+    import 'ignite-ui/js/modules/infragistics.util.js';
+    import 'ignite-ui/js/modules/infragistics.templating.js';
+    import 'ignite-ui/js/modules/infragistics.datasource.js';
+    import 'ignite-ui/js/modules/infragistics.ui.combo.js';
+
+In addition, at the end import the IgniteUIModule:
+
+    import { IgniteUIModule } from 'igniteui-angular2';
+    @NgModule({
+    imports: [ BrowserModule, IgniteUIModule ],
+    …
+    })
+    export class AppModule {}
+
+In order to take advantage of the [Tree shaking](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#tree-shaking) the Rollup has to be set up.
+Open rollup-config.js, include igniteui-angular2 to `commonjs` plugin and add `namedExport` for jquery:
+
+    commonjs({
+        include: ['node_modules/rxjs/**',
+            'node_modules/igniteui-angular2/**',
+        ],
+        namedExports: {
+            'node_modules/jquery/dist/jquery.min.js': [ 'jquery' ]
+        }
+    }),
+
+Additional plugin rollup-plugin-replace should be installed
+`npm install rollup-plugin-replace` in order to fix the offline compilation of Ignite UI util module.
+`this.Class` should be changed to `window.Class`, because the offline compilation is not having the same [context and this is changed to undefined](https://github.com/rollup/rollup/issues/942).
+
+      replace({
+        // this is undefined for the specified context, so replace it with window to access Class
+        include: 'node_modules/ignite-ui/js/modules/infragistics.util.js',
+        values: { 'this.Class': 'window.Class' }
+      }),
+
+Now we are ready to use the IgComboComponent
+`<ig-combo [dataSource]="heroesCombo" [widgetId]="comboId" [textKey]="'name'" [valueKey]="'id'"></ig-combo>` in app.component.html 
+And also define the used properties in AppComponent class:
+
+    export class AppComponent {
+    comboId = 'combo1';
+    showHeading = true;
+    heroes = ['Magneta', 'Bombasto', 'Magma', 'Tornado'];
+    heroesCombo = [{id: 0, name: 'Magneta'}, {id: 1, name:'Bombasto'}, {id: 2, name:'Magma'}, {id: 3, name:'Tornado'}];
+
+    toggleHeading() {
+        this.showHeading = !this.showHeading;
+    }
+    }
+
+At the end, apply Ignite UI styling. To achieve this, postcss plugin should be installed
+`npm install rollup-plugin-postcss` 
+
+Open rollup-config.js file and import postcss:
+
+    import postcss from 'rollup-plugin-postcss'
+    …
+      postcss({
+        extensions: ['.css']
+      }),
+
+
+[Download](https://github.com/IgniteUI/igniteui-angular2/files/975676/quickstart-igniteui-angular2-aot.zip) the modified app which uses the specified product. To run it with AOT:
+1. npm install
+2. npm run build:aot
+3. npm run serve
+
+
+
 ## Two-way Data Binding
 The following controls currently support two-way data binding:
 
@@ -203,9 +407,22 @@ The following controls currently support two-way data binding:
 5. igEditors
 6. igTree
 
+## Running tests
+
+The command for running the tests is:
+
+    npm test
+
+After that, if all tests successfully passed a code coverage for the `igniteui.angular2.ts` filse will be generated under the `./coverage` folder.
+
+To see the code coverage you can open one of the html files under `./coverage/html-report/src`.
+
+**Note:** The code coverage is actually being generated on the `igniteui.angular2.js` file (comes from compilation of the source .ts file). That coverage is saved under the `coverage/karma-tmp` folder.
+Since we need the code coverage of the `igniteui.angular2.js` file itself, we use the remap-istanbul module to remap the report from the .js file to the .ts file and save it under the `coverage/html-report` and `coverage/lcov.info`.
+
 ---------------------------------------
 
-##What is Ignite UI?
+## What is Ignite UI?
 [![Ignite UI Logo](http://infragistics-blogs.github.io/github-assets/logos/igniteui.png)](http://www.igniteui.com)
 
 [Ignite UI](http://igniteui.com/) is an advanced HTML5+ toolset that helps you create stunning, modern Web apps. 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.  Too many to list here - check out [the site](http://igniteui.com/) for more info and to [download](https://igniteui.com/download) a trial.
diff --git a/dist/npm/package.json b/dist/npm/package.json
@@ -24,6 +24,8 @@
     "data grids"
   ],
   "dependencies": {
-    "@types/reflect-metadata": "^0.0.5"
+	"@types/reflect-metadata": "^0.0.5",
+	"@types/ignite-ui": "^0.0.4",
+	"@types/jquery": "2.0.47"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,8 @@`
`24`	`24`	`"data grids"`
`25`	`25`	`],`
`26`	`26`	`"dependencies": {`
`27`		`- "@types/reflect-metadata": "^0.0.5"`
	`27`	`+ "@types/reflect-metadata": "^0.0.5",`
	`28`	`+ "@types/ignite-ui": "^0.0.4",`
	`29`	`+ "@types/jquery": "2.0.47"`
`28`	`30`	`}`
`29`	`31`	`}`