Using different client code base for a meteor app

问题:

I know there are other (rather old) questions on this subject but I haven't seen any answer with meteor 1.0. I am building an app targeting both mobile and desktop.

I ported an existing mobile client created with ionic and it's working great. Now I would like to setup the desktop client part and don't want to add "if (Meteor.isCordova) {" clauses everywhere. I could share some of my custom Angular directives or services but Ionic is mobile targeted only so I want clear code separation.

Any suggestions ?

回答1:

How about using a package for the shared logic and have two different meteor projects or packages? One for web (e.g. meteor+bootstrap) and the other for mobile (e.g. meteor+ionic)?

Perhaps something like this: https://github.com/Compy/meteor-mobile-desktop

回答2:

You might be able to do something like what I have below. The basic idea is to have three angular modules. One main module will have all your shared angular code that is common across the desktop and mobile versions. Then you need another two modules, one each for the desktop and mobile versions that have the main module as a dependency.

You only need to run Meteor.isCordova() once when the page loads the first time. Depending on the outcome, you can then bootstrap the main module and either the desktop or mobile version.

This means that you only load things that you need in each version. E.g. I haven't done it because the snippet won't run, but you should inject Ionic into the mobile module only if it is not being used in the desktop application.

Apologies if I am misunderstanding your setup, but it's hard to figure out without seeing it.

// Module for web and mobile application (common functionality).
angular.module('App', []);

// Module for web application.
angular.module('WebApp', ['App'])
  .controller('TestController', function ($scope) {
    $scope.message = 'This is the web application.';
  });

// Module for mobile application.
angular.module('MobileApp', ['App'])
  .controller('TestController', function ($scope) {
    $scope.message = 'This is the mobile application.';
  });


(function () {
   
  // Simulate Meteor.isCordova().
  var isCordova = true;
  
  // Bootstrap correct version of the application.
  if (isCordova) {
    angular.bootstrap(document, ['App', 'MobileApp']);
  } else {
    angular.bootstrap(document, ['App', 'WebApp']);
  }

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="TestController">
  {{ message }}
</div>  

回答3:

I've also asked this question before and didn't get an answer.

You could use two different routers. One for Web and one for mobile. That way you'd only need one if isCordova statement. Then just separate the web and mobile client side files into different folders.