Skip to content

Commit

Permalink
Merge pull request IgniteUI#154 from dkamburov/master
Browse files Browse the repository at this point in the history 
Add AoT support
  • Loading branch information
@kdinev
kdinev authored May 10, 2017
2 parents 9f6af30 + 1e1ea59 commit e9363ca
Show file tree
Hide file tree
Showing 18 changed files with 5,324 additions and 287 deletions.
117 changes: 101 additions & 16 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
#Ignite UI components for Angular 2
# Ignite UI components for Angular

[![NPM version](https://img.shields.io/npm/v/igniteui-angular2.svg?style=flat)](https://www.npmjs.com/package/igniteui-angular2)
[![Build Status](https://travis-ci.org/IgniteUI/igniteui-angular2.svg?branch=master)](https://travis-ci.org/IgniteUI/igniteui-angular2)
[![Coverage Status](https://coveralls.io/repos/github/IgniteUI/igniteui-angular2/badge.svg?branch=master)](https://coveralls.io/github/IgniteUI/igniteui-angular2?branch=master)

Use the components found in `src\igniteui.angular2.ts` to use [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

#Running the samples
# 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:

Expand All @@ -22,10 +22,10 @@ Afterwards, from your terminal run the following commands:
3. `npm install`
4. `npm start`

#Getting Started
# 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.
Expand Down Expand Up @@ -259,25 +259,110 @@ Component methods can be called by accessing the component from the view. For ex
template: '<ig-grid #grid1
[(options)]="gridOptions">
<features>
<paging [pageSize]="'2'"></paging>
</features>
<paging [pageSize]="'2'"></paging>
</features>
</ig-grid>',
directives: [IgGridComponent]
})
export class AppComponent {
private gridOptions: IgGrid;
@ViewChild("grid1") myGrid: IgGridComponent;
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");
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:

Expand All @@ -303,7 +388,7 @@ Since we need the code coverage of the `igniteui.angular2.js` file itself, we us

---------------------------------------

##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.
Expand Down
7 changes: 2 additions & 5 deletions dist/npm/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "igniteui-angular2",
"version": "1.0.9",
"description" : "A packaged version of Ignite UI components for Angular2",
"description" : "A packaged version of Ignite UI components for Angular",
"license": "MIT",
"typings": "igniteui.angular2.d.ts",
"repository": {
Expand All @@ -16,16 +16,13 @@
"ignite ui",
"igniteui",
"angular2",
"angular",
"infragistics",
"jquery widgets",
"jquery controls",
"data visualization",
"data grids"
],
"peerDependencies": {
"@angular/common": "2.0.0",
"@angular/core": "2.0.0"
},
"dependencies": {
"@types/reflect-metadata": "^0.0.5"
}
Expand Down
3 changes: 2 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

<!-- 1. Load libraries -->
<script src="http://code.jquery.com/jquery-1.12.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
Expand Down Expand Up @@ -209,6 +209,7 @@ <h2>Samples</h2>
<li><a href="samples/igGrid-ComplexOpts/igGrid-ComplexOpts.html">Complex template options</a></li>
<li><a href="samples/igGrid-HTTPClient/igGrid-HTTPClient.html">Grid with HTTP client</a></li>
<li><a href="samples/igGrid-callingMethods/igGrid-callingMethods.html">Calling API methods</a></li>
<li><a href="samples/igGrid-AoT/igGrid-AoT.html">Grid AoT</a></li>
</ul>
</div>
<a class="btn btn-default" href="samples/igHierarchicalGrid/igHierarchicalGrid.html">igHierarchicalGrid</a>
Expand Down
25 changes: 14 additions & 11 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@
"url": "https://github.com/IgniteUI/igniteui-angular2.git"
},
"dependencies": {
"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/forms": "~4.0.0",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/router": "~4.0.0",
"@angular/upgrade": "~4.0.0",
"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/forms": "~4.0.0",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/router": "~4.0.0",
"@angular/upgrade": "~4.0.0",
"angular-in-memory-web-api": "~0.3.0",

"core-js": "^2.4.1",
Expand All @@ -28,6 +28,7 @@
"bootstrap": "^3.3.6"
},
"devDependencies": {
"@angular/compiler-cli": "~4.0.0",
"concurrently": "^3.2.0",
"gulp-watch": "^4.3.5",
"jasmine-core": "^2.4.1",
Expand All @@ -53,8 +54,10 @@

"watch": "node node_modules/typescript/bin/tsc -w",
"build": "node node_modules/typescript/bin/tsc",
"bundle": "node node_modules/typescript/bin/tsc -d && npm run prepare-dist",
"prepare-dist": "cp src/igniteui.angular2.js dist/npm/index.js && cp src/igniteui.angular2.d.ts dist/npm/index.d.ts && cp src/igniteui.angular2.ts dist/npm/igniteui.angular2.ts && cp src/igniteui.ts dist/npm/ && cp src/igniteui.js dist/npm/ && cp src/igniteui.js.map dist/npm/ && cp src/jquery.d.ts dist/npm/",
"build-aot": "ngc -p tsconfig-aot.json",
"build-aot-samples": "ngc -p tsconfig-aot-samples.json",
"bundle": "npm run build-aot && npm run prepare-dist",
"prepare-dist": "cp src/igniteui.angular2.js dist/npm/index.js && cp src/igniteui.angular2.d.ts dist/npm/index.d.ts && cp src/igniteui.angular2.metadata.json dist/npm/index.metadata.json && cp src/igniteui.angular2.ts dist/npm/igniteui.angular2.ts && cp src/igniteui.ts dist/npm/ && cp src/igniteui.js dist/npm/ && cp src/igniteui.js.map dist/npm/ && cp src/jquery.d.ts dist/npm/",

"pretest": "npm run build",
"test": "karma start tests/karma.conf.js && npm run remap-istanbul",
Expand Down
Loading

0 comments on commit e9363ca

Please sign in to comment.