I have used tab component in Angular Bootstrap UI and ui-router for routing in my Angularjs app.
Now I want to active one of tabs, after change route. In fact I have a search route and I want to change tabs due to the search options (that users can select where they want to search).
I Solved my problem!
If each tab has exclusive route, we can use angular ui router sticky to handle this.
use bootstrap
users.pug
ul.nav.nav-tabs
li.nav-item(ui-sref-active-eq='active')
a.nav-link(ui-sref="users") users list
li.nav-item(ui-sref-active-eq='active')
a.nav-link(ui-sref="users.newUser") newUser
.tab-content(ui-view="usersTab")
usersList.pug
h1 users list page
newuser.pug
h1 new user page
route.js
.state('users', {
url: '/users',
templateUrl: 'users.html',
controller: 'usersCtrl'
})
.state('usersList', {
url: '/usersList',
sticky: true,
views: {
"usersTab": {
templateUrl: 'usersList.html',
controller: 'usersListCtrl'
}
}
})
.state('newUser', {
url: '/newUser',
sticky: true,
views: {
"usersTab": {
templateUrl: 'newUser.html',
controller: 'newUserCtrl'
}
}
})
And to active each tab can use: ui-sref-active-eq='active' and .active class change active tab style
Related
I've created a starter app with side menu using Ionic based on AngularJS.
The basic navigation layout of the app suppose to be:
main page
ion-side-menu that shows our company's service types as a list. (when item is clicked go to:)
company services list for the chosen type (when item is clicked, go to:)
specific service view
Problem is that when I hit the auto-generated "Back" button from inside a specific service view, and expect to get back to the services list for the chosen type, the app does routes back to the list, he content is seen to about half a second, but then - ALL the content (including the top navbar) is hidden, and though, still clickable!
This also happens not just for the "Back" button but also when clicking a link from the specific service view to any arbitrary services list view.
Since the previous view is seen before disappearing, I conclude that the routing implementation is valid, but yet tried to use ui-route ui-sref and other approaches to navigation but couldn't solve this.
It happens both on chrome browser and android device.
My stateProvider config looks like that:
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.main', {
url: '/main',
views: {
'menuContent': {
templateUrl: 'templates/main.html',
controller: 'MainCtrl'
}
}
})
.state('app.services', {
url: '/services/:tid',
views: {
'menuContent': {
templateUrl: 'templates/services.html',
controller: 'ServicesCtrl'
}
}
})
.state('app.service', {
url: '/service/:sid',
views: {
'menuContent': {
templateUrl: 'templates/service.html',
controller: 'ServiceCtrl'
}
}
})
Would really appreciate any help.
In my Angular app, I have the following sample route definition which uses nested views:
.state('mapping.project', {
authenticate: true,
url: '/:projectId/:projectName',
controller: 'ProjectCtrl as proj',
views: {
'': {
templateUrl: 'app/components/mapping/partials/project.html',
controller: 'ProjectCtrl as proj'
},
'details#project': {
templateUrl: 'app/components/mapping/partials/details.html'
},
'activityTypes#project': {
templateUrl: 'app/components/mapping/partials/activity-types.html'
},
'boundaryPartners#project': {
templateUrl: 'app/components/mapping/partials/boundary-partners.html'
},
'progressMarkers#project': {
templateUrl: 'app/components/mapping/partials/progress-markers.html'
},
'users#project': {
templateUrl: 'app/components/mapping/partials/users/users.html',
controller: 'projectUserCtrl as vm'
}
}
})
Each of these views is loaded within a tab, using Angular Material md-tabs: https://material.angularjs.org/latest/api/directive/mdTabs
The problem is, when I access the route mapping.project, the projectUserCtrl that you can see on my users#project view gets immediately called. I assume the same would be true for each individual controller that I have attached to my nested views.
I'd want to call these nested controllers only when the tab is active and that particular template loaded (in this case: users#project).
How do I do this?
You don't need all these child views, you only need 1, a container for the visible tab. Make separate states for each of the tabs, then route the child view accordingly when your "tabs" are clicked.
I'm not sure on the material design specifics, but in essence your tabs become just links ui-sref links.
Ok, here is the problem. I have an app where user can signup as merchant and can have their own store name and the url I looking for is:
http://localhost:8000/#/storename
This is getting conflict with default homepage subpages such as contactus, aboutus. Following is my implementation of ui-router.
.state('home', {
url: '/', --> http://localhost:8000/#/ [work]
templateUrl: 'views/main_home.html',
resolve: loadSequence('flexSlider','wantCtrl'),
css: 'assets/vendor/style.css'
})
.state('home.contact', {
url: '/contact', --> http://localhost:8000/#/contact [not work]
views: {
'homeView': {
templateUrl: 'partials/contact.html',
}
},
css: ['assets/vendor/style.css']
})
.state('store',{
url: '/:storename', --> http://localhost:8000/#/myshop [work]
templateUrl: 'views/main_store.html'
})
.state('store.list', {
url: '/lists', --> http://localhost:8000/#/myshop/lists [work]
views: {
'primView': {
templateUrl: 'views/store_home.html',
}
}
})
Here the http://localhost:8000/#/contact are accessing the store template as if contact is a store name. Default whatever inherit home.[anything] should be under parent defined template. How can i resolve this issue?
There is dirty way of doing this, which is define new parent for each of the subpages, but that will be repetition of header and footer partial layout.
as far as i know angular follows top to bottom approach while dealing with routes. so define
.state('store',{
url: '/:storename', --> http://localhost:8000/#/myshop [work]
templateUrl: 'views/main_store.html'
})
last after all other routes. In your case when angular reaches /:storename itwill think that contact is a store name and load that page. to avoid it you need to keep it last
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 trying to develop a UI for my designer but have ran into a bit of a problem trying to get UI-Router and Angular to work correctly in this manner. On the Home page I have 2 sections, Users and Groups. The Home page has a URL of /home and I want to be able to select a User OR a Group and have the URL change to either /home/user/:id or /home/group/:id respectively. The problem is that I want the nested view to appear directly below the corresponding section. So if they select a User, it will open up the User view underneath the Users section and vice versa with Groups.
I thought this could be acheived with multiple views like <div ui-view="users"></div> and <div ui-view="groups"></div>, but there is no sense of state when using this. The views just render automatically regardless of the URL (state).
Is there a way to achieve this using ui-router by maintaining state whilst utilizing 2 views?
Plunker: http://plnkr.co/edit/vfz1l4GAdBdhkyC6zMgQ?p=preview
You can create an abstract state to create a layout, then reference that state as parent to other states.
Here's a plunker
$stateProvider.state('home', {
abstract: true,
views: {
'#': {
templateUrl: 'home.html',
},
'user#home': {},
'group#home': {
templateUrl: 'group.html'
}
}
}).state('root', {
parent: 'home',
url: '/',
views: { . . }
}).state('home.user', {
parent: 'home',
url: '/user',
views: {
'user#home': {
controller: 'UserController',
templateUrl: 'user.html'
},
'group#home': {}
}
})