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.