Adapt one main script with ionic and desktop


#1

I try to migrate the mobile app to a normal web application without changing the main application. I created a manager to handle this. The mobile application is working just fine.

On the desktop I have the following situation:

  • Run ist getting executed
  • In my console I can see that angular loads the templates (templates/tab.html and templatest/rooms/index.html)
  • The controller is not getting executed
  • The template doesn’t appear in my <div ui-view></div>

I have 3 javascript files:

/js/main.js (getting included on both platforms)

/js/web-manager.js (getting included on web)

/js/app-manager.js (getting included in hybrid app environment)
I have different html files for both platforms.

With Ionic I use <ion-nav-view></ion-nav-view> and with the web version I use <div ui-view></div>.
The code:

main.js

angular
.module('smarthome', [
    'manager'
])
.run(function($rootScope) {
  //...
})
.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('tab',
        {
               abstract:    true,
           templateUrl:     'templates/tabs.html'
        })

    .state('tab.home',
    {
        url:            '/home',
        views:
        {
            'tab-home':
            {
                templateUrl:    'templates/rooms/index.html',
                controller:     function($scope, $http, $rootScope)
                {
                    alert("working");
                }
            }
        }
    });
    $urlRouterProvider.otherwise('/home');
});

/js/web-manager.js

angular

.module('manager', [
    'ui.router'
])
.run(function($rootScope) {
    $rootScope.alerts       = [];
    $rootScope.closeAlert   = function(index) {
      //...
    };
});

/js/app-manager.js

angular
.module('manager', [
    'ionic'
])
.constant('$ionicLoadingConfig', {
    template: '<i class="icon ion-looping" style="font-size:300%"></i>'
});

Any idea?


#2

Any ideas? Would be a great help guys…


#3

Do you have the same routing for both your webview and app ?

if so, why not using a proxy? basically, all you have to do is creating states this way :

.state('base', {
      url: 'base',
      views : {},
      proxy : {
        mobile : 'base.mobile',
        desktop : 'base.desktop'
      },
        resolve: {}
    })
    .state('base.desktop', {
      views: {
        "modal@": {
          templateUrl: 'partials/desktop/base.html'
        }
      },
      resolve: {}
    })
    .state('base.mobile', {
      views: {
        "@": {
          templateUrl: 'partials/mobile/base.html'
        }
      },
        resolve: {}
    })

and in your run.js

$rootScope.$on("$stateChangeStart", function(evt, toState, toStateParams, fromState, fromStateParams) {
  if(toState.proxy) {
    evt.preventDefault();

    if(check if device is mobile) {
      $state.go(toState.proxy.mobile, toStateParams);
    }
    else {
      $state.go(toState.proxy.desktop, toStateParams);
    }
  return;
  }
}

Is it what you were looking for?


#4

Yes. Sorry, I forgot to say that it is solved now. The views solved it.