Angular Js + Ionic: How to add additional view?

Question

This is the situation:

I am using Angular Js into Ionic framework to make a mobile app. I start up the project using the tabs boilerplate. I have three tabs right now: Login - Friends - Map.

I want to add an additional view, named 'member area', that is accessible after the login pass succesfully, but i am not able to do.

In the initial setup of the ionic tabs project, each view is defined as state.

This is the code:

angular.module('starter', ['ionic','AngularGM', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform){
 $ionicPlatform.ready(function(){
  if(window.StatusBar){
  // org.apache.cordova.statusbar required
   StatusBar.styleDefault();
  }
 });
})

.config(function($stateProvider, $urlRouterProvider) {

// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js

$stateProvider

// setup an abstract state for the tabs directive
.state('tab',{
  url: "/tab",
  abstract: true,
  templateUrl: "templates/tabs.html"
})


// Each tab has its own nav history stack:

.state('tab.login', {
  url: '/login',
  views: {
    'tab-login': {
      templateUrl: 'templates/tab-login.html',
      controller: 'LoginController'
    }
  }
})

.state('tab.friends', {
  url: '/friends',
  views: {
    'tab-friends': {
      templateUrl: 'templates/tab-friends.html',
      controller: 'FriendsCtrl'
    }
  }
})
.state('tab.friend-detail', {
  url: '/friend/:friendId',
  views: {
    'tab-friends': {
      templateUrl: 'templates/friend-detail.html',
      controller: 'FriendDetailCtrl'
    }
  }
})

.state('tab.map', {
  url: '/map',
  views: {
    'tab-map': {
      templateUrl: 'templates/tab-map.html',
      controller: 'mapController'
    }
  }
});


$urlRouterProvider

 // if none of the above states are matched, use this as the fallback
.otherwise('/tab/login');

 });

This is what have tried to do:

1. Adding memberArea as .when

  $urlRouterProvider

 .when('/memberArea', {
  templateUrl: 'main/memberArea',
  controller: 'memberAreaController'
      })

  // if none of the above states are matched, use this as the fallback
.otherwise('/tab/login');

});

But in doing this the app crash with this error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to: Error: invalid 'handler' in when()

2. Adding memberArea as a state:

    .state('memberArea', {
    url: '/memberArea',
    views: {
      'memberArea': {
        templateUrl: 'templates/memberArea.html',
        controller: 'memberAreaController'
      }
    }
  });

But is not working, accessing the url #/memberArea gives a blank page (no error in console)

3. Add memberArea as a tab:

   .state('tab.memberArea', {
    url: '/memberArea',
    views: {
      'tab-memberArea': {
        templateUrl: 'templates/memberArea.html',
        controller: 'memberAreaController'
      }
    }
  });

and add the tab itself:

  <!-- memberArea -->
 <ion-tab title="memberArea" icon="icon ion-home" href="#/tab/memberArea">
   <ion-nav-view name="tab-memberArea"></ion-nav-view>
 </ion-tab>

In this way is working.. but is a tab and shouldn't be there the view. If i remove this HTML for the tab menu, then the view is not accessible anymore from the URL address.

This is the question:

How can i properly define an additional view in Angular js + Ionic (with tabs) ?

Thank you very much!

olimungo · Accepted Answer · 2014-05-20 05:50:53Z

1

If you don't want to handle the MemberArea as a tab, you should use the following syntax:

.state('memberArea', {
    url: '/memberArea',
    templateUrl: 'templates/memberArea.html'
    }
);

answered May 20, 2014 at 5:50

olimungo

671 silver badge6 bronze badges

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

Comments

Thinkerer · Accepted Answer · 2014-08-02 04:32:55Z

0

If you place a . before the item in the states, you are saying it should inherit the parent. For example tab.member will mean member inherits from tab.

Also if you use a stateProvider, you can no longer write the format as a urlProvider as per your example 1. It would have to be like your last line, otherwise. ....etc.

I would think a controller is still required, regardless if its on tab or not. (Correct me if Im wrong).

answered Aug 2, 2014 at 4:32

Thinkerer

1,6266 gold badges23 silver badges43 bronze badges

Comments

shruti · Accepted Answer · 2015-03-13 06:46:33Z

0

If u want to properly define an additional view not as a tab, then you should follow option 2, adding memberArea as a state:

.state('memberArea', {
  url: '/memberArea',
  templateUrl: 'templates/memberArea.html'
 }
);

Use ui-sref='memberArea' instead of href in the element, on clicking of which you will show MemberArea. And just check if this view location is available to the app.

answered Mar 13, 2015 at 6:46

shruti

5,9631 gold badge17 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular Js + Ionic: How to add additional view?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related