From 34609201d4e3586a186ead18373961dd97ea6690 Mon Sep 17 00:00:00 2001 From: viterobk Date: Mon, 6 Feb 2017 16:41:30 +0300 Subject: [PATCH 1/2] The "Add DevExtreme to Ionic 2 Application" guide is added --- docs/add_devextreme_to_ionic2_application.md | 91 ++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 docs/add_devextreme_to_ionic2_application.md diff --git a/docs/add_devextreme_to_ionic2_application.md b/docs/add_devextreme_to_ionic2_application.md new file mode 100644 index 000000000..0e31a2d1e --- /dev/null +++ b/docs/add_devextreme_to_ionic2_application.md @@ -0,0 +1,91 @@ +# Add DevExtreme to Ionic 2 Application + +## Create an Application + +Create an Ionic 2 application as described in the [Ionic 2 Tutorial](http://ionicframework.com/docs/v2/getting-started/tutorial/). + +## Install DevExtreme Angular 2 Integration + +Once the application is created, install DevExtreme Angular 2 integration npm package. Run the following command in the command prompt. + +``` +npm install --save devextreme devextreme-angular +``` + +## Import DevExtreme Modules + +To use DevExtreme within the Ionic 2 application, import the required separate modules or entire DevExtreme to this application within the "src\app\app.module.ts" file. + +``` +//Imports a separate module +import { DxButtonModule } from 'devextreme-angular/ui/button'; + +//Imports the entire DevExtreme +import { DevExtremeModule } from 'devextreme-angular'; +``` + +Add the imported modules to application imports: + +``` +@NgModule({ + ... + imports: [ + ... + DevExtremeModule, + ... + ] +}) +``` + +## Copy DevExtreme Stylesheets + +DevExtreme style sheets are stored in the "node-modules\devextreme\dist\css" folder. You should copy them to the "www\assets\css" folder. You can do it manually, or use [ionic build tools](https://ionicframework.com/docs/v2/resources/app-scripts/) to copy style sheets during the build process. In the second case, copy the "copy.config.js" file from the [Ionic repository](https://github.com/driftyco/ionic-app-scripts/blob/master/config/copy.config.js) to the application root folder. + +Add the following item to the "copy" configuration. + +``` +module.exports = { + . . . + copyStyleSheets: { + src: ['{{ROOT}}/node_modules/devextreme/dist/css/**/*'], + dest: '{{WWW}}/assets/css' + } +} +``` + +Reference the created config within the package.json file by adding the "config" section. + +``` +"config" : { + "ionic_copy": "./copy.config.js" +}, +``` + +Add links to the required stylesheets to the head section of the "src\index.html" file. + +``` + + +``` + +## Add a DevExtreme Component + +After you have performed all steps described above, you can use DevExtreme controls on application views. To try how it works, add a button widget to the "src\pages\hello-ionic\hello-ionic.html" file. + +``` +. . . + +

Welcome to your first Ionic app!

+ +. . . +``` + +For more information on working with DevExtreme controls in Angular 2 approach, refer to the [DevExtreme-Angular library description](https://github.com/DevExpress/devextreme-angular). + +## Run the Application + +Run the app using the following command + +``` +ionic serve +``` \ No newline at end of file From 4f5ef2deb8a5be93a641fe9ef79b65bd07a86d09 Mon Sep 17 00:00:00 2001 From: viterobk Date: Mon, 6 Feb 2017 17:53:55 +0300 Subject: [PATCH 2/2] Rename "Using Ionic 2" doc and add links to README --- README.md | 2 ++ ...dd_devextreme_to_ionic2_application.md => using-ionic2.md} | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) rename docs/{add_devextreme_to_ionic2_application.md => using-ionic2.md} (92%) diff --git a/README.md b/README.md index 3c2a82ab8..14623d4aa 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,7 @@ The further configuration steps depend on which build tool, bundler or module lo * [Configuring Angular CLI](https://github.com/DevExpress/devextreme-angular/blob/master/docs/using-angular-cli.md#configuration) * [Configuring Webpack](https://github.com/DevExpress/devextreme-angular/blob/master/docs/using-webpack.md#configuration) * [Configuring Rollup](https://github.com/DevExpress/devextreme-angular/blob/master/docs/using-rollup.md#configuration) +* [Configuring Ionic 2](https://github.com/DevExpress/devextreme-angular/blob/master/docs/using-ionic2.md#configuration) ### Create a new Angular 2 Application ### @@ -111,6 +112,7 @@ Depending on your requirements you can choose one of the following ways to start * [Start with Angular CLI](https://github.com/DevExpress/devextreme-angular/blob/master/docs/using-angular-cli.md) * [Start with Webpack](https://github.com/DevExpress/devextreme-angular/blob/master/docs/using-webpack.md) * [Start with Rollup](https://github.com/DevExpress/devextreme-angular/blob/master/docs/using-rollup.md) +* [Start with Ionic 2](https://github.com/DevExpress/devextreme-angular/blob/master/docs/using-ionic2.md) ### Running the Local Examples ### diff --git a/docs/add_devextreme_to_ionic2_application.md b/docs/using-ionic2.md similarity index 92% rename from docs/add_devextreme_to_ionic2_application.md rename to docs/using-ionic2.md index 0e31a2d1e..1539a928c 100644 --- a/docs/add_devextreme_to_ionic2_application.md +++ b/docs/using-ionic2.md @@ -1,4 +1,4 @@ -# Add DevExtreme to Ionic 2 Application +# Using the DevExtreme Angular 2 Integration with Ionic 2 ## Create an Application @@ -12,7 +12,7 @@ Once the application is created, install DevExtreme Angular 2 integration npm pa npm install --save devextreme devextreme-angular ``` -## Import DevExtreme Modules +## Configure Ionic 2 for DevExtreme To use DevExtreme within the Ionic 2 application, import the required separate modules or entire DevExtreme to this application within the "src\app\app.module.ts" file.