CODEWITHSUNDEEP
angularjstwitter-bootstrapcordovaionic-frameworkhybrid
MikaelW
MikaelW

Reputation: 1205

angularJS code sharing across hybrid Ionic app and regular mobile website

Ok, so in our 'innovation lab', there is currently a push to use Ionic, an hybrid app framework built on top of Cordova for native access and angularJS for the ‘web code’.

There are also some projects which are pure mobile web, using Angular + bootstrap for responsive design for example.

The thing is some projects coming up will need to have both a mobile web site and native apps (ionic hybrid). Most features and screens will be the same, sharing back end and most of the UI but there still will be some difference.

So my question is; How to architecture a project so that it can be both an ionic project and a normal angular website with 2 different deployment approaches. Most of the code being reused but some views for the mobile website and some views for the hybrid app (using more native components and conventions), maybe some routing differences as well.

Is that even a good idea?

And in the shared code, is there a simple way to know in which case you are? some IF, some directives inactive outside of their context, etc.

It feels like there is some sort of missing link i may be unaware of.

Thanks in advance.

Upvotes: 2

Views: 751

Answers (1)

Benson
Benson

Reputation: 4391

I'm working on this same problem. The approach I'm taking is to use separate templates, and when possible, key CSS off the device detection classes ionic adds to the body tag.

Desktop version (default)

.your-style

Mobile Version

 .platform-webview .your-style {...}
 .platform-cordova .your-style {...}

There's a repository on on Github that might offer some guidance.

https://github.com/jonathanwax/jw-ionic-desktop

To quote from of the source code from his project, you would create a folder for each view with the mobile version of the template.

For example your bootstrap desktop version of template.html could look like this:

<div class="container">
     <h1 class="text-danger" id="helpHeader">Help Needed?</h1>
    <li ng-repeat="help in vm.service.data"> {{ help.title }} - {{ help.content }}</li>
</ul>
<pre dir="ltr">HelpController: {{vm|json}}</pre>

And a ionic mobile version of this same template could be located at mobile/template.html

<ion-view view-title="Help">
    <ion-content>
        <ion-list>
            <ion-item ng-repeat="help in vm.service.data">
                {{ help.title }} - {{ help.content }}
            </ion-item>
        </ion-list>
</ion-content>

You could create a conditional to work with your router to serve the mobile template if you're in a cordova/mobile environment. I feel like maintaining two templates could be development hell. Which is why ionic snubs its nose at developing for the desktop--this is hard work! And prone to bugs. It's pretty much a flytrap ( ya know for bugs :) ).

We could try writing templates with conditionals, but I suspect different files may have less overhead.

A conditional approach to templating:

Test for mobile environment

var isMobile = ionic.Platform.isWebView();

In the template or view html:

<{{isMobile ? 'ion-container' : ' div class="container"'}}>

Or a use an ng-switch:

     <div ng-switch="expression">
       <div ng-switch-when="isMobile">
       CODE FOR MOBILE HERE
       </div>
       <div ng-switch-default>
         CODE FOR DESKTOP HERE
       </div>
     </div>

Depending on your application, you can get away with using ionic directives for most of your desktop application. You can sprinkle in desktop styling when needed. There's really not a huge amount of code that would actually need to be served by a different mobile/desktop template.

Upvotes: 1

Related Questions