Angular 1.5 Components and Tabs

ionic-v1
1

So I am using Ionic 1 with AngularJS 1.5+ to allow use of components. For the most part this is working great but there is one issue I am having. I have two tabs at the moment, the first tab is loading everything fine but when I click on the second tab, it loads the state but never the component/template. I am wondering if anyone has any insights. Just to reiterate, the tabs and home components are loading fine in the below code.

App Config:

(function () {
  'use strict';
  angular.module('app').config(['$ionicConfigProvider', '$stateProvider', '$urlRouterProvider', 'globalConfigProvider', function ($ionicConfigProvider, $stateProvider, $urlRouterProvider, globalConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');

    $stateProvider.state('tabs', {
      url: '/tabs',
      abstract: true,
      views:{
        'tabs': {
          template: '<tabs></tabs>'
        }
      }
    }).state('tabs.home', {
      url: '/home',
      views: {
        'tab-home': {
          template: '<home></home>'
        }
      }
    }).state('tabs.options', {
      url: '/options',
      views: {
        'tab-options': {
          template: '<gorn-options></gorn-options>'
        }
      }
    });

    $urlRouterProvider.otherwise('/tabs/home');
  }]);
})();

Component: (Same for home except the name and home is working fine)

(function () {
  'use strict';
  angular.module('app').component('gorn-options', {
    selector: 'gorn-options',
    bindings: {},
    controller: function () {
      console.info("Gorn options loaded");
    },
    controllerAs: 'gorn-options',
    templateUrl: 'views/pages/gorn-options/gorn-options.html'
  });
})();
2

So we don’t suggest using angular 1.5 just yet, as there are some issue that need to be fixed in ionic 1x first

3

I assume those issues have to do with ion-nav-view? Is there no solution at the moment that I can hack in?

I am trying to make a collection of code that will allow faster development by me for apps. I would have loved to use Ionic 2/Angular 2 and tried it out but it is of course not finished. I move back to Ionic 1 but really wanted the module like ability components give. Yes I could come up with something via directives but I would rather not.

4

If you’re just after the style of creating components, you could checkout

Which back ports the angular.component method.

Though I would caution you on trying to squeeze components out of ion-views.

5

I will look into that link, thanks for the information.

6

After upgrading to 1.3 and refactoring to use Angular 1.5 components, I’ve found critical issues with the navbar. Navigation bar is displayed empty missing back button, title and custom buttons. With some workaround I’ve managed to make it work with simple pages introducing an intermediate template that acts as a shell hosting the top level component. But I cannot make it work with tabs.

Reading your last sentence makes me shiver. Could you please tell if there is any way to effectively use 1.5 components in Ionic 1.3 or do I have to rollback all the refactoring?

Thanks in advance.

7

Could you provide a small demo? With the latest, 1.3.1, we haven’t found any issues that sound anything like you’ve described.

8

If you’ve upgraded to 1.3.1, I’m running into similar problems with the navbar and back buttons when dealing with tabs (and, probably relatedly, getting $ionicView.enter events triggered). I believe Ionic is already working on that problem here:

I’m not using Angular 1.5 though, so I’m not sure a downgrade to 1.3.0 will work for you like it does for me. But you might want to give it a try.

9

So issue seems to be worse.

It is reproduced defining the tabs as components, in this Codepen:

Home tab is displayed since it is a regular template. The rest of tabs are defined as top level components and they’re not even displayed.

10

Is it still recommended to not upgrade form 1.3 to 1.5. I want to use component.
Thank you