Angular Js + Ionic: How to add additional view?

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!

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'
    }
);

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).

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.