I am bit new to ionic development.
I am using ionic's default sidemenu template.
I want to create navigation flow inside modal. Modal is intended to use for login. And login page linked with forgot password and signup page through navigation.
What I have done so far is,
Modified app.js stateprovider and added some new routes. I am partially succeeded in it but when $state.go('loginnav.login'); that code executes I got login view embedded in my app/main navigation flow not inside modal's navigation flow.
Issue : I am not able to give navigation flow inside login Modal.
Any help would be greatly apprecieated.
app.js
.state('loginnav', {
url: '/loginnav',
abstract: true,
templateUrl: 'templates/loginnav.html',
})
.state('loginnav.login', {
url: '/login',
views: {
'logContent': {
templateUrl: 'templates/login.html'
}
}
})
.state('loginnav.signup', {
url: '/signup',
views: {
'logContent': {
templateUrl: 'templates/signup.html'
}
}
})
loginnav.html
<ion-nav-bar>
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="logContent" ng-controller="LoginNavCtrl"></ion-nav-view>
controller.js -> AppCtrl
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/loginnav.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
controller.js -> LoginNavCtrl
$state.go('loginnav.login');
Related
I have an Ionic application that has 4 tabs menu and one of tabs is actual menu page that has some links of it's own, so quick snippet:
.state('menu', {
url: '/menu',
params: {user: null},
views: {
'tab-menu': {
templateUrl: 'menu.html',
controller: 'menuCtrl'
}
}
})
.state('user-profile', {
url: '/menu/profile',
params: {user: null},
views: {
'tab-menu': {
templateUrl: 'user-profile.html',
controller: 'menuCtrl'
}
}
})
So when user taps "Menu" Ionic tab, and then taps on profile page, everything works fine. Then user clicks "Home" tab and that also works fine. But after that, when user taps on "Menu" tab again it will go to profile page, and not to actual Menu page.
How do I make it go to menu page?
Solution to this problem as follows:
Tabs have ui-sref property:
ui-sref="main.live.tabs.ranking"
And this is causing the problem with redirection. Instead, just create controller with method
$scope.goToState = function () {
$state.go('state');
}
And modify tab by removing ui-sref and replacing it with
ng-click="goToState()"
Is it possible to link from one tab to a nested view in another tab? I've tried two different methods and neither seem to work.
Here's my router config:
.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.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
In templates/tab-dash.html I have a link to a particular chat detail page:
<ion-view view-title="Dashboard">
<ion-content class="padding">
<h1>My Chats</h1>
Chat #1
</ion-content>
</ion-view>
From here I can navigate the chat detail page, however if I click the "Chats" tab button at the bottom nothing at all happens. I'd like it to bring me to the main Chats page.
Another method I tried was using ui-sref instead of href:
<ion-view view-title="Dashboard">
<ion-content class="padding">
<h1>My Chats</h1>
<a ui-sref="tab.chat-detail{chatId:1}">Chat #1</a>
</ion-content>
</ion-view>
In this case I receive an error Could not resolve 'tab.chat-detail{chatId:1}' from state 'tab.dash'
What's the best way to link to a "detail" view from within another tab? My main is to make sure that clicking the tab button at the bottom always brings me to the parent page for that tab. Right now, in the first example, it gets stuck on the "detail" view.
I got a workaround. I am hiding the tab bar when navigating to nested view of another tab.
And showing it again when user navigates back to the root tab.
To know how to hide and show tab bar programmatically, check this link:-
https://stackoverflow.com/a/45002644/4527624
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
I want to temporarily change the browser url when the ui bootstrap modal is opened ( The page behind should remain as is, only the url changes ). When the modal is closed the url should be reverted back to the original one.
Steps :
User loads the page
url : xyz.com/home
User clicks a link opens a modal
url : xyz.com/detail/123
possible solution : changing url with html5 push state
problem : Angular ui-router tries to run its routes as per the changed url, eventually changing the background page.
User closes the modal
url : xyz.com/home
possible solution : html5 pop state
problem : Reloads the background page, which kills the purpose
Example implementation : Pinterest pins and their pin details popup.
You can use ui-router-extras sticky state to solve your problem. There is simple example with modal by the link. You should create two named views, one for main content (background) and one for modal.
<div ui-view="app"></div>
<div ui-view="modal"></div>
Mark the state, from what you want to access to modal as sticky: true in route definition.
.state('main', {
abstract: true,
url: '/',
templateUrl: '_layout.html'
})
.state('main.index', {
url: '',
sticky: true,
views: {
'app': {
templateUrl: 'index.html'
}
}
})
.state('main.login', {
url: 'login/',
views: {
'modal': {
templateUrl: 'login.html'
}
}
})
Also add an event for stateChangeSuccess:
$rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
if ((from.views && !from.views.modal) || !from.views) {
$rootScope.from = from;
$rootScope.fromParams = fromParams;
}
});
so, when you need to close modal, you can just
$state.go($rootScope.from, $rootScope.fromParams);
There is small problem for that solution. If you reload page on the modal state, then the app ui-view will be empty.
This can be achieved by having a nested state and triggering the modal using onEnter callback:
$stateProvider
.state('contacts', {
url: '/home',
templateUrl: 'home.html',
controller: function($scope, MyService){
$scope.contacts = MyService.getContacts();
}
})
.state('contacts.details', {
url: "^/details/:id", // using the absolute url to not have the "/home" prepended
onEnter: function($state, $uibModal) {
var modal = $uibModal.open({
templateUrl: 'details.html',
controller: function($scope, $stateParams, MyService) {
// get data from service by url parameter
$scope.contact = MyService.getContact($stateParams.id);
}
});
modal.result.finally(function() {
$state.go('^'); // activate the parent state when modal is closed or dismissed
});
}
});
This technique is described in the ui-router's FAQ.
Here the plunk. In this example the modal's scope is created as a child of the $rootScope - the default $uibModal's behavior when no scope is passed to it. In this case we should use the service in the modal's controller to obtain the data by url parameter.
To have master and details URLs look like these - xyz.com/home and xyz.com/detail/123 - we should use the absolute URL (^/details/:id) in the child state.
Using this solution you can open the detail URLs directly and still have both, master and detail states, activated properly, so sharing the detail URL is possible.
I think you can achive that with ngSilent module
https://github.com/garakh/ngSilent
using $ngSilentLocation.silent('/new/path/');
(once you open modal and again after closing it)
Managed to implement this using https://github.com/christopherthielen/ui-router-extras/tree/gh-pages/example/stickymodal
My ionic back button doesn't do anything when it is being clicked even though, when I print out the version history, it shows that there is a back view. Also for some reason $ionicHistory.enabledBack() is returning false, even though the back view exists and the back view and current view have the same id. Does anyone know how to fix the problem?
Here's a snapshot of the console.
Use ui-router nested views to create states that will replace an ion-nav-view tag in the HTML.
Use ion-view, not ion-nav-view, inside the template html for each nested view.
Example:
Parent (Nav) View HTML:
<ion-nav-view name="navView"></ion-nav-view>
Nested View Level 1 HTML:
<ion-view view-title="Nested View Level 1">
<ion-content></ion-content>
</ion-view>
Nested View Level 2 HTML:
<ion-view view-title="Nested View Level 2">
<ion-content></ion-content>
</ion-view>
ui-router:
$stateProvider
.state('app.navView', {
url: '/nav-view',
views: {
'menuContent': {
templateUrl: 'app/navView.html',
controller: 'NavViewCtrl as vm'
}
}
})
.state('app.nestedViewL1', {
url: '/nested-view-L1',
views: {
'navView': {
templateUrl: 'app/nestedViewL1.html',
controller: 'NestedView1CtrL1 as vm'
}
}
})
.state('app.nestedViewL2', {
url: '/nested-view-L2',
views: {
'navView': {
templateUrl: 'app/nestedViewL2.html',
controller: 'NestedViewL2Ctrl as vm'
}
}
})