I'm new to Ionic and AngularJS so I'm struggling with (hopefully) something simple. I have these two states:
.state('menu', {
url: '/mobile/beer',
controller: 'beerCtrl',
templateUrl: 'templates/beer-menu.html'
})
.state('detail', {
url: '/mobile/beer/:id',
controller: 'beerDetailCtrl',
templateUrl: 'templates/beer.html',
resolve: {
beer: function($stateParams, beerService) {
return beerService.findBeerById($stateParams.id)
}
}
})
The 'menu' state fetches all beers from a server and hand the list over to 'beer-menu.html' that contains an ion-list to display the list. When the user selects a beer in the list, the 'detail' states steps in to display more details about the beer.
It's all working but I want to improve it a bit by using an abstract state:
.state('beer', {
abstract: true,
url: '/mobile/beer'
})
.state('beer.menu', {
url: '',
controller: 'beerCtrl',
templateUrl: 'templates/beer-menu.html'
})
.state('beer.detail', {
url: '/:id',
controller: 'beerDetailCtrl',
templateUrl: 'templates/beer.html',
resolve: {
beer: function($stateParams, beerService) {
return beerService.findBeerById($stateParams.id)
}
}
})
It looks totally OK to me - esp because this is based on one of the 'Formulas' from the Ionic Framework website. Nevertheless the app stops working when I structure the states like that. I've tried to tweak it in various way but couldn't get it working. Do you see what's wrong?
As the UI-Router documentation you have to define also a template for abstract state 'beer':
Remember: Abstract states still need their own <ui-view/> for their children to plug into. So if you are using an abstract state just to prepend a url, set resolves/data, or run an onEnter/Exit function, then you'll additionally need to set template: "<ui-view/>".
See:
https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views#abstract-states
Related
I'm trying to migrate a native app to Ionic but I'm experiencing one major issue which is almost certainly a blocker if I can't at least work around it.
Basically, I have an application with multiple tabs and each of them has a split view. I attached a plunker to demonstrate what a simplified app version would look like. My problem is that when switching tab, ion nav views do not keep their history. To be more specific about my example: after selecting a playlist from the side menu and switching tab to "Search" and then back to "Playlists", the navigation history on that tab is not preserved and gets reset to its "root" state.
I think this happens when the ion-nav-view element is not a direct child of the ion-tab element (as in my case, since it's inside a ion-side-menu-content), but I'm not quite sure.
Overall, I feel the app states in the example might need some love as well. What am I doing anything wrong? Is it a known Ionic limitation?
State provider configuration follows, below is the link for the full plunker example:
$stateProvider
.state('tabs', {
url: '/app',
abstract: true,
templateUrl: 'tabs.html',
controller: 'AppCtrl'
})
.state('tabs.search', {
url: '/search',
views: {
'search': {
templateUrl: 'search.html'
}
}
})
.state('tabs.playlists', {
url: '/playlists',
views: {
'menu': {
templateUrl: 'playlists.html',
controller: 'PlaylistsCtrl'
},
'menuContent': {
templateUrl: 'empty.html'
}
}
})
.state('tabs.playlist', {
url: '/playlists/:playlistId',
views: {
'menu': {
templateUrl: 'playlists.html',
controller: 'PlaylistsCtrl'
},
'menuContent': {
templateUrl: 'playlist.html',
controller: 'PlaylistCtrl'
}
}
});
Here's a plunker with the app: http://plnkr.co/edit/UZp3EE3l6X5IIdvpu477
Thank you!
According to This other question, every time you navigate through a tab, it creates a new history, so there's no back. You would need to handle this with your own code. They propose to use the goBack() directly. Something like:
$ionicHistory.viewHistory().backView
Also, you would need to handle the case when there's no backView because you just logged in into the app.
I am doing my routing with ui-router and have a nested view that loads up some menu options for the item that is selected. My question is, is it possible to have nested views within a nested view with ui-router?
The code here works:
.state('settings', {
url: '/settings',
views: {
'': {
templateUrl: './templates/settings.html',
controller: 'settingsCtrl'
},
'details#settings': {
templateUrl: './templates/details.html',
controller: 'detailCtrl'
}
}
})
But say I wanted to load something attached to the details#settings view. How would I go about that? I have tried
.state('settings', {
url: '/settings',
views: {
'': {
templateUrl: './templates/main/settings.html',
controller: 'settingsCtrl'
},
'detail#settings': {
url: '',
views: {
'': {
templateUrl: './templates/detail.html',
controller: 'detailCtrl'
},
'contact#detail#settings': {
templateUrl: './templates/contactpref.html'
}
}
}
}
})
I don't get any errors in the console on this, but it does break my original nested view. From what I have found the docs aren't really clear on if this is even possible.
It is not possible. Check the: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider
and section views:
an optional map<string, object> which defined multiple views, or targets views manually/explicitly.
Examples:
Targets three named ui-views in the parent state's template
views: {
header: {
controller: "headerCtrl",
templateUrl: "header.html"
}, body: {
controller: "bodyCtrl",
templateUrl: "body.html"
}, footer: {
controller: "footCtrl",
templateUrl: "footer.html"
}
}
That is it. That's what UI-Router will see and resolve for us. And why are not you provided with any error?
Because expect value of the map<string, object> is object. It is iterated for known properties (controller, templateUrl) - and any uknown is ignored, not used, not found... skipped
Solution:
After some experience with UI-Router I would suggest:
if there are some features related - place them in state
if there are some more features related, but only with some conditions - place them into child state.
That structure will bring many benefits, mostly: stable parent (not reloading always) and dynamic child - placing new and new content into some targets/anchors/ui-views whenever parameter is changed. Check:
Trying to have one subview call another subview using ui-router
No errors.
I'm able to access a list of teams at /teams and a specific team at /teams/2 where 2 is the id of a team.
$stateProvider.state('app.teams.team', {
url: '/:team',
templateUrl: 'templates/teams/team.html',
controller: 'TeamCtrl',
resolve: {
team: function($stateParams, TeamsService) {
return TeamsService.getTeam($stateParams.team)
}
}
})
I'm not able to access the roster at /teams/2/roster.
$stateProvider.state('app.teams.team.roster', {
url: '/roster',
templateUrl: 'templates/teams/roster.html'
})
The page loads without errors, and shows templates/teams/team.html instead of templates/teams/roster.html
The problem is the way you treat your states inheritance.
With the current configuration:
app.teams.team state expect the url http://app.teams url/:team
and
app.teams.team.roster state expect the url http://app.teams.team url/roster
each child expect the parent state to hold a ui-view directive so the templateUrl can get injected to.
This mean that for the roster state you have the app.teams htmls, contains the team html, contains the roster html.
To load a diffrent html under same level stay in same hirerchial level ->
app.teams.team
app.teams.roster
I ended up making roster its own state, which works as intended.
$stateProvider.state('app.roster', {
abstract: true,
url: '/teams/:team/',
views: {
content: {
template: '<ion-nav-view></ion-nav-view>'
}
},
resolve: {
team: function($stateParams, TeamsService) {
return TeamsService.getTeam($stateParams.team)
}
}
})
$stateProvider.state('app.roster.index', {
url: 'roster',
templateUrl: 'templates/roster/index.html',
controller: 'TeamCtrl',
})
I currently have a root index.html with a single ui-view which gets replaced depending on which "page" the user is on, e.g. Books, Games etc. Taking the Books page as an example, this view has content that I'd like to display on all pages which are part of the "Books" space, but the central content will differ depending on if the user is on the Books "homepage" or looking at a specific book. To facilitate this, my books.html has a nested state which either includes books_list.html or books_detail.html.
The url structure I'd like to have is:
/books - Shows left/right sidepanels plus a list of books in the middle of the page.
/books/1 - Shows left/right sidepanels plus the details for the book with ID 1 in the middle of the page (list of books is not displayed).
How can I set up my states to have the books.html template AND books_list.html template in the nested view when navigating to /books, but have books.html AND books_detail.html when navigating to /books/1 ?
I'm currently getting round this problem by having a "home" sub-state, but this means that I have to have /books/home, and /books displays no central content so is currently useless.
.state('books', {
url: '/books',
templateUrl: CONFIG.static_url + '/html/books.html',
...
})
.state('books.home', {
url: '/home',
templateUrl: CONFIG.static_url + '/html/books_list.html',
...
})
.state('books.detail', {
url: '/:bookId',
templateUrl: CONFIG.static_url + '/html/books_detail.html',
...
})
I achieved what I needed by declaring an abstract state:
.state('books', {
abstract: true,
url: '/books',
templateUrl: CONFIG.static_url + '/html/books.html',
...
})
.state('books.home', {
url: '',
templateUrl: CONFIG.static_url + '/html/books_list.html',
...
})
.state('books.detail', {
url: '/:bookId',
templateUrl: CONFIG.static_url + '/html/books_detail.html',
...
})
This means that /books loads both 'books' and 'books.home' states, and /books/1 loads both 'books' and 'books.detail' states, which is what I needed.
I created working example here. This is following your needs, because there are only two levels of nesting.
books is a parent for both children
books.home fills the middle erea - and is NOT parent of books.detail
books.detail replaces the list view - but that means that its $scope (books.home) is lost
State definition:
.state('books', {
url: '/books',
views: {
'#' : {
templateUrl: 'layout.html',
},
'left#books' : { templateUrl: 'tpl.left.html',},
'right#books' : { templateUrl: 'tpl.right.html',},
},
})
.state('books.home', {
url: '/home',
templateUrl: 'list.html',
})
.state('books.detail', {
url: '/:bookId',
templateUrl: 'detail.html',
controller: 'DetailCtrl'
})
Check it here
But there is also a different approach, which I like more. The list view, is parent of its child, and therefore it could keep its $scope, while navigating among details. Similar stuff discussed here
maybe try it
$urlRouterProvider.otherwise('/');
.....
.state('index', {
url: '/',
templateUrl: CONFIG.static_url + '/html/index.html',
...
})
I started building ionic app on top of the sidemenu starter app. The starter app has a base state 'app' which is abstract and all the sidemenu pages are children of the app for example app.search, app.browse, app.playlists etc.
I have similar hierarchy. However, I want the start page to be some other page, which means it is at the app level.
The states look like this:
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('join', {
url: "/join",
views: {
'menuContent' :{
templateUrl: "templates/join.html",
controller: 'joinCtrl'
}
}
})
.state('app.search', {
url: "/search",
views: {
'menuContent' :{
templateUrl: "templates/search.html",
controller: 'searchCtrl'
}
}
})
.state('app.results', {
url: "/results",
views: {
'menuContent' :{
templateUrl: "templates/results.html",
controller: 'resultsCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/join');
When I run the app, the url defaults to
http://192.168.1.4:8100/#/join
and shows a blank page. Obviously, the join.html is not blank. Also, the console.log messages in joinCtrl are not outputted.
I am not able to figure out why is it not loading the join page. When I change the otherwise to point to '/app/search', everything works.
Any idea what's going on? How do I load the initial page by default and then navigate to the 'app.search' state?
I would expect that because the app is abstract - it is there for a reason. To be parent/layout state. In its template should most likely live all other states.
If yes - check this working example I created to demonstrate that. What we need is to mark the join as a child of the app state. Then the 'menuContent' placeholder will be properly searched in the app template:
.state('join', {
parent: 'app',
url: "^/join",
views: {
'menuContent': {
templateUrl: "tpl.join.html",
controller: 'joinCtrl'
}
}
})
There is a working plunker
The definition url: "^/join", is there to support the idea, that the url defined like this:
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/join');
will work even for nested state (join is child of app). See:
Absolute Routes (^)
If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.
This is just one way... we can do the similar stuff if the join is not nested state, but then it should target the unnmaed view '' instead of 'menuContent'