CODEWITHSUNDEEP
javascriptweb-applicationsangularcross-platformionic2
pwborodich
pwborodich

Reputation: 382

Shared Angular 2 application, web/mobile-web/Ionic 2

I can't seem to find an answer to using the same angular 2 code across all platforms like Angular 2 is pushing on their site. If I have an existing website(bare bones just node.js server and Angular 2) how can I go about incorporating ionic 2 without having to keep a separate ionic application? Or vice versa(ionic application that I need to be a web-app)?

There are various answers out there like copying the www folder of the ionic app but, I do not find that to be a best practice answer because you could not reuse 100% of that code. It seems to go against the argument of cross-platform to maintain two completely separate code bases with a lot of identical code.

Upvotes: 1

Views: 533

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

It seems to go against the argument of cross-platform to maintain two completely separate code bases with a lot of identical code.

You could use exactly the same code, and decide how the layout is going to be shown by using the platform information:

Platform Name   Description
android on a device running Android.
cordova on a device running Cordova.
core    on a desktop device.
ios on a device running iOS.
ipad    on an iPad device.
iphone  on an iPhone device.
mobile  on a mobile device.
mobileweb   in a browser on a mobile device.
phablet on a phablet device.
tablet  on a tablet device.
windows on a device running Windows.

Using the underlying platform information you could show or hide things if its a core platform (web app) or not (mobile app) by just simply doing:

this.isWebapp = this.platform.is('core');

And then by using *ngIf or whatever you need in you application.

Regarding the styles:

Ionic2 uses modes to customize the look of components. Each platform has a default mode, but this can be overridden.

So again, you have control over how your app is going to be styled according the device where it's being shown. Like you can read here, in your body element a class will be added (coreif it's a web app, or ios/ android / windows if it's a mobile app). so you can create custom styles for each platform and they are going to be automatically applied.

So I think you could (and should) use the same code for creating both a Mobile and a Web app, and even to adapt that app to work fine in other devices like tablets or phablets.

Upvotes: 2

Related Questions