Using IonicFramework it's possible to open a second submenu from a ion-side-menu?
I know about a similar behavior:
You can see the demo here:
http://codepen.io/ionic/pen/tcIGK
Or this one, http://codepen.io/anon/pen/eCKkm (it's a second menu level)
Basically, works with the default side menu, but when swipe to the right, the menu appears and each one could have an independent sub menu/form, ect., without continue the navigation.
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('eventmenu', {
url: "/event",
abstract: true,
templateUrl: "templates/event-menu.html"
})
.state('eventmenu.home', {
url: "/home",
views: {
'menuContent' :{
templateUrl: "templates/home.html"
}
}
})
.state('eventmenu.checkin', {
url: "/check-in",
views: {
'menuContent' :{
templateUrl: "templates/check-in.html",
controller: "CheckinCtrl"
}
}
})
.state('eventmenu.attendees', {
url: "/attendees",
views: {
'menuContent' :{
templateUrl: "templates/attendees.html",
controller: "AttendeesCtrl"
}
}
})
Related
I am using AngularUI Router to navigate content on my website. I have some webpages that show the header/footer navigation and some that do not. I want to be able to detect what my current page is and insert the HTML for the header/footer if needed.
Here is my current router
angular.module('app', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider',
function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
})
.state('about', {
url: '/about',
templateUrl: 'partials/about.html',
controller: 'aboutCtrl'
})
.state('contact', {
url: '/contact',
templateUrl: 'partials/contact.html',
controller: 'contactCtrl'
})
.state('create', {
url: '/create',
templateUrl: 'partials/create.html',
controller: 'createCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'partials/login.html',
controller: 'loginCtrl'
})
}]);
For the html I have this
<html ng-app="app">
<body>
<!-- *********** HEADER ************* -->
<div ng-include=""></div>
<!-- ********** CONTENT *********** -->
<div ui-view></div>
<!-- **************** FOOTER ****************** -->
<div ng-include="'partials/standard_footer.html'"></div>
</body
</html>
For the webpages create and login I do not want to show the header and footer, but I am not sure how to do that.
I want to do something like this,
<div ng-if="!login && !create" ng-include="'standard_header.html'"></div>
How can I achieve this?
You can expose $state on the $rootScope and that will make it accessible in your webpage.
You can then simply check for state.current.name != 'login'
Like below:
Exposing the current state name with ui router
Edit:
Working Plunker of what i meant: https://plnkr.co/edit/JDpCo3fTePobuX9Qoxjn
You're almost there. Just add a flag in the params of the appropriate states:
.state('create', {
url: '/create',
templateUrl: 'partials/create.html',
controller: 'createCtrl',
params: {
hideHeaderAndFooter: true
}
})
.state('login', {
url: '/login',
templateUrl: 'partials/login.html',
controller: 'loginCtrl',
params: {
hideHeaderAndFooter: true
}
})
And then inject the $stateParams service in your controllers. Every property of the params object will be exposed as a property of the object this service returns:
loginCtrl.$inject = ['$scope', '$stateParams']
function loginCtrl($scope, $stateParams) {
$scope.hideHeaderAndFooter = $stateParams.hideHeaderAndFooter
}
Then you can use ng-if just the way you meant to use it:
<div ng-if="!hideHeaderAndFooter" ng-include="'standard_header.html'"></div>
I have 3 type of user: Trainer, sportsmen, fan.
Each 1 do login on same page. But after login i want to show diffrent dashboard depends on user role
Rignt now I try do domething like
.state('trainerDashboard', {
templateUrl: '/App/ControlPanel/views/templates/trainerDashboard.html',
abstract: true,
})
state('login', {
url: '/login',
templateUrl: '/App/ControlPanel/views/dashboard/dashboard.html',
parent: 'trainerDashboard',
controller: 'DashboardCtrl',
controllerAs: 'vm',
data: {
pageTitle: 'Login_Title',
login: true,
defaultState: 'users'
},
resolve: stateResolve
})
but i dont know how to set different parent here
Any Idea ??
Thank you
In your controller what you can define nested states like this
.state('dashboard', {
templateUrl: "/App/ControlPanel/views/templates/dashboard.html"
controller: ** controllerName ** //your controller name
})
.state('dashboard.trainer', {
url: "/trainer",
templateUrl: "/App/ControlPanel/views/templates/trainer.html"
}
.state('dashboard.sportsman', {
url: "/sportsman",
templateUrl: "/App/ControlPanel/views/templates/sportsman.html"
}
.state('dashboard.fan', {
url: "/fan",
templateUrl: "/App/ControlPanel/views/templates/fan.html"
}
And in your controller file you can use $state.go() function provided by Angular UI router to redirect the user to a state on the basis of the user type for example:
if(userType == 'trainer'){
$state.go(dashboard.trainer)
}
else if(userType == 'sportsman'){
$state.go(dashboard.sportsman)
}
else if(userType == 'fan'){
$state.go(dashboard.fan)
}
And in your dashboard.html file you will have to bind a div with ui-view like this
<div ui-view></div>
Hope it helps
Cheers
Just starting Ionic, I used the following command with the IOS simulator:
ionic start myApp tabs
All of this is working fine, but now I want to have a login page (no tabs down the bottom, no header on the top), and after the user logs in here, they can then access the tabs.
I'm currently having trouble implementing this login page. This is what I've got:
$stateProvider.state('login', {
url: '/login',
views: {
'login': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
}).state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
}).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'
}
}
}).state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
Notice the first part - .state('login', but for some reason, that will not work with the following line of code:
$urlRouterProvider.otherwise('/login');
It works for any other URL I try (e.g. /tabs/dash), but I can't seem to get /login working.
You need to set routing for login page as following:
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
Here is the codepen example.
How I spend a parameter title of the post, to display the browser's title?
I use pageTitle parameter on my route, but if put directly: slug as a value, not works.
.state('posts',{
url : '/blog/:slug',
templateUrl : 'content/templates/single.html',
controller : 'SinglePostController',
data: {
pageTitle: 'title'
},
access: {
requiredLogin: false
}
})
The data : {} setting is static.
see similar:
Accessing parameters in custom data
If you want some dynamic feature use resolve : {}
Some links to examples and Q & A about resolve
Angularjs ui-router abstract state with resolve
EXTEND: A simple (really naive but working) example how to use resolve and $rootScope to manage browser title (check it here):
$stateProvider
.state('home', {
url: "/home",
templateUrl: 'tpl.html',
resolve: {
'title': ['$rootScope', function($rootScope){
$rootScope.title = "Other title";
}],
}
})
.state('parent', {
url: "/parent",
templateUrl: 'tpl.html',
resolve: {
'title': ['$rootScope', function($rootScope){
$rootScope.title = "Title from Parent";
}],
}
})
.state('parent.child', {
url: "/child",
templateUrl: 'tpl.html',
controller: 'ChildCtrl',
resolve: {
'titleFromChild': ['$rootScope', function($rootScope){
$rootScope.title = "Title from Child";
}],
}
})
And this could be the html
<!DOCTYPE html>
<html ng-app="MyApp" ng-strict-di>
<head>
<title>{{title}}</title>
Try it here
A challenge here is - what to do on navigation from child to parent, but it could be done by moving that setting into controller and work with $scope.$on('detsroy'...
Here is adjusted plunker
.state('parent.child', {
url: "/child",
templateUrl: 'tpl.html',
controller: 'ChildCtrl',
// no resolve, just controller fills the target
})
.controller('ChildCtrl', ['$rootScope', '$scope', function ($rootScope, $scope) {
var title = $rootScope.title;
$rootScope.title = "Title from Child";
$scope.$on('$destroy', function(){$rootScope.title = title});
}])
ui-view content not load in ui bootstrap modal .
here my state from ui-router configuration :
.state('home.connexion', {
url: '/connexion',
views: {
"maincontent#home": {
templateUrl: 'app/connexion/connexion.html'
},
"connectionModal#home.connexion": {
templateUrl: 'app/connexion/modal.html'
},
"registerTypeModal#home.connexion": {
templateUrl: 'app/register/modTypeRegister.html'
},
"registerModal#home.connexion": {
templateUrl: 'app/register/modRegister.html'
},
"cguStatement#home.connexion": {
templateUrl: 'app/cgu/statement.html'
}
}
})
my nested view :
<div ui-view="cguStatement" autoscroll="false"></div>
when i put it inside page => OK
when i put it inside modal => KO
I need help :)