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

Question

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.

sebaferreras · Accepted Answer · 2016-07-06 16:57:39Z

2

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.

edited Jul 6, 2016 at 16:57

answered Jul 6, 2016 at 9:36

sebaferreras

44.7k11 gold badges120 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pwborodich Over a year ago

cool, thanks for that info, do you use this approach to make web/iOS/android apps with angular2? I was looking at NativeScript as well and was trying to make a decision which to use, Ionic does not claim to be for all three like NativeScript does and was starting to lean towards using that going forward. link

sebaferreras Over a year ago

I've just created a few simple apps just for mobile devices, but now I'm being part of a bigger project and we are following that approach. Regarding what you say about NativeScript, both frameworks are great and you will be able to create awesome apps with both of them, it just about what you're looking for when using a framework. In our case, we needed a framework that allowed web developers (like me and the rest of my team) have a less steep learning curve, so Ionic2 (and angular2) was a perfect match for us.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related