Here is my app.js
.state('dashboard', {
url: '/dashboard',
templateUrl : 'resources/components/dashboard/dashboard.html',
controller : 'dashboardController',
}).state('dashboard.profile', {
url: '/profile',
templateUrl : 'resources/components/clinicprofile/profile.html',
controller : 'profileController',
}).state('dashboard.setting', {
url: '/setting',
templateUrl : 'resources/components/setting/settings.html',
controller : 'profileController',
}).state('dashboard.setting.user', {
url: '/user',
templateUrl : 'resources/components/setting/user.html',
controller : 'profileController',
Note that my three level nested url is working fine when i am puttin ng-view in setting.html page
but i dont want to show the content of setting.html when a user is on
dashboard/setting/user
it is showing setting page content as well as user page content
i dont want to show the content of setting.html when a user is on user page
i want to show only user content on this url dashboard/setting/user how can i do that?
If you do not want the user page to be included in the settings page, it cannot be a child of settings, so a possible solution would be using an abstract state and changing the settings URL to something like setting/main:
.state('dashboard', {
url: '/dashboard',
templateUrl: 'resources/components/dashboard/dashboard.html',
controller: 'dashboardController',
}).state('dashboard.setting', {
abstract: true,
url: '/setting',
template: '<ui-view></ui-view>',
}).state('dashboard.setting.main', {
url: '/main',
templateUrl: 'resources/components/setting/settings.html',
controller: 'profileController',
}).state('dashboard.setting.user', {
url: '/user',
templateUrl : 'resources/components/setting/user.html',
controller : 'profileController',
})
UI Router documentation
Related
I have a problem with ionic and ui-routing, when I go in a child state the url is updated but the view remains the same.
this is my routing.js
.config(function($stateProvider, $urlRouterProvider, $locationProvider, $ionicConfigProvider) {
$ionicConfigProvider.views.maxCache(0);
$stateProvider
.state('app', {
url: "/",
abstract: true,
templateUrl: "menu.html",
controller: "menuCtrl"
})
.state('app.home', {
url: "home",
cache: false,
views: {
'menuContent': {
templateUrl: "home.html",
controller: "homeCtrl"
}
}
})
.state('app.search', {
url: "search",
views: {
'menuContent': {
templateUrl: "search.html",
controller: "searchCtrl"
}
}
})
.state('app.search.product', {
url: "/product/:id",
views: {
'menuContent': {
templateUrl: "productPage.html",
controller: "singleProductCtrl"
}
}
})
.state('app.search.product.market', {
url: "/product/:id",
views: {
'menuContent': {
templateUrl: "market.html",,
controller: "marketCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');
});
in this example when I try to go in app.search.product the view doesn't change, even if I go there directly inserting the right url in the browser. I've also tryed with ui-sref-opts="{reload: true} option but nothing change.
Here's a plunker that shows the problem (after search the view doesn't change) https://plnkr.co/edit/JrNFkV50klZItOQS18Iu
I don't have experience with Ionic, but based on the ui-router config angular expects a nested view, but your page has only single view. Meaning, the second level (product) has no view to load into. Since Ionic I suppose doesn't allow nested ionic views (would be funny if it did) you can use normal ui-view as nested one.
<ion-view view-title="Search">
<ion-content>
<h1>Search</h1>
<a ui-sref=".product({id: 1})">Go to product</a>
<ui-view name="secondLevel"></ui-view>
</ion-content>
Check your code with modifications here: https://plnkr.co/edit/LdgmoAEo1pS9spi1Su1z.
Not sure if this is what you were looking for. Based on your plunkr it looks like you've defined nested view accidentally. In which case solution would be to remove .search from *.product state names: https://plnkr.co/edit/PGICsBhzyCOTSe9af4yu
.state('app.product', {
url: "/product/:id",
views: {
'menuContent': {
templateUrl: "productPage.html"
}
}
})
.state('app.market', {
url: "/product/:id",
views: {
'menuContent': {
templateUrl: "market.html"
}
}
});
Use this configuration:
$stateProvider
.state('app', {
url: "/",
abstract: true,
templateUrl: "menu.html",
})
.state('app.home', {
url: "home",
views: {
'menuContent': {
templateUrl: "home.html"
}
}
})
.state('app.search', {
url: "search",
views: {
'menuContent': {
templateUrl: "search.html"
}
}
})
.state('app.product', {
url: "/product/:id",
views: {
'menuContent': {
templateUrl: "productPage.html"
}
}
})
.state('app.market', {
url: "/product/:id",
views: {
'menuContent': {
templateUrl: "market.html"
}
}
});
When you declare 'app.search.product' by example, this means that in the template of the search state (search.html) should be have a view for load the children state, and this it's not the case, your views has been moving in the same "level"
try to put in ui-sref name of the product state in Go To product link tag.
that is ui-sref="app.product"
I am developing a mobile app on ionic framework. It has a side menu with subcategories. Whenever I go to the subcategory more than once and click on the back button in android mobile, it retraces whole of the states it went through which I don't want.
.state('eventmenu', {
url: "/event",
abstract: true,
templateUrl: "templates/event-menu.html"
})
.state('eventmenu.home', {
url: "/home",
views: {
'menuContent' :{
templateUrl: "templates/home.html",
controller: "HomeCtrl"
}
}
})
.state('categorymenu', {
url: "/category",
abstract: true,
templateUrl: "templates/event-menu.html"
})
.state('categorymenu.compound', {
url: "/compound",
views: {
'menuContent' :{
templateUrl: "templates/categories.html",
controller: "CategoriesCtrl"
}
}
})
.state('categorymenu.research', {
url: "/research",
views: {
'menuContent' :{
templateUrl: "templates/categories.html",
controller: "CategoriesCtrl"
}
}
})
.state('categorymenu.product', {
url: "/product",
views: {
'menuContent' :{
templateUrl: "templates/product.html",
controller: "CategoriesCtrl"
}
}
})
$urlRouterProvider.otherwise("/event/home");
})
I want the back button to redirect user to the home page. Here categorymenu.compound and categorymenu.research are the contents of sidemenu, which has got many subcategories that would redirect to categorymenu.product page.
redefine backbutton function on each controller loading, you can use :$ionicPlatform.registerBackButtonAction(function(){$state.go('targetView')}, priority, [actionId])
but you need clear cache when you reload views (for redefine backbutton each time and have SEVERAL possible return).
you can add param in each redirect :
$state.go('targetView',{cache: false});
or add param in state description
.state('eventmenu.home', {
cache: false
url: "/home",
views: {
'menuContent' :{
templateUrl: "templates/home.html",
controller: "HomeCtrl"
}
}
})
I have this plunker which works fine it's better seeing here but there's one bug in there, when navigating to nested state through a clickable link I get the desired behavior, but when refreshing the page or writing the URL and pressing enter the page the page doesn't load for some states.
I have the 4 States:
profile.about
profile.feed
profile.user.about
profile.user.feed
For the first 2 refreshing the page or selecting the URL and pressing enter will load the profile view but not the about view, the second 2 works fine.
the router configuration is like this:
$urlRouterProvider.otherwise("/home");
// route 1
$stateProvider.state('home' , {
url: "/home",
templateUrl: "home.html"
});
// route 2
$stateProvider.state('profile' , {
controllerAs: "Profile",
url: "/profile",
templateUrl: "profile.html",
controller: "ProfileController"
});
// user route
$stateProvider.state('profile.user' , {
controllerAs: "Profile",
url: "^/:username",
controller: "ProfileController",
template: "<div ui-view></div>",
resolve: {
username: ['$stateParams', function ($stateParams) {
return $stateParams.username;
}]
}
});
// route 3
$stateProvider.state('settings' , {
url: "/settings",
templateUrl: "settings.html"
});
// user about route
$stateProvider.state('profile.about', {
controllerAs: "About",
url: "^/about",
templateUrl: "about.html",
controller: "AboutController2"
});
// user about route
$stateProvider.state('profile.user.about', {
controllerAs: "About",
url: "/about",
templateUrl: "about.html",
controller: "AboutController"
});
// user about route
$stateProvider.state('profile.user.feed', {
controllerAs: "Feed",
url: "/feed",
templateUrl: "feed.html",
controller: "AboutController"
});
$stateProvider.state('profile.feed', {
controllerAs: "Feed",
url: "^/feed",
templateUrl: "feed.html",
controller: "AboutController2"
});
I'm not in html5mode as seeing in the plunker and I sow this SO but no answer there.
Any help on how to fix this, thanks in advance.
The problem that I found seconds after posting the question is that the route definitions are not ordered correctly.
the state profile.user have a dynamic url parameter so defining the profile.feed or profile.about after the profile.user will result to this error, therefore defining the profile.about and profile.feed hould be before the profile.user like this:
$urlRouterProvider.otherwise("/home");
// route 1
$stateProvider.state('home' , {
url: "/home",
templateUrl: "home.html"
});
// route 2
$stateProvider.state('profile' , {
controllerAs: "Profile",
url: "/profile",
templateUrl: "profile.html",
controller: "ProfileController"
});
// route 3
$stateProvider.state('settings' , {
url: "/settings",
templateUrl: "settings.html"
});
// user about route
$stateProvider.state('profile.about', {
controllerAs: "About",
url: "^/about",
templateUrl: "about.html",
controller: "AboutController2"
});
$stateProvider.state('profile.feed', {
controllerAs: "Feed",
url: "^/feed",
templateUrl: "feed.html",
controller: "AboutController2"
});
// user route
$stateProvider.state('profile.user' , {
controllerAs: "Profile",
url: "^/:username",
controller: "ProfileController",
template: "<div ui-view></div>",
resolve: {
username: ['$stateParams', function ($stateParams) {
return $stateParams.username;
}]
}
});
// user about route
$stateProvider.state('profile.user.about', {
controllerAs: "About",
url: "/about",
templateUrl: "about.html",
controller: "AboutController"
});
// user about route
$stateProvider.state('profile.user.feed', {
controllerAs: "Feed",
url: "/feed",
templateUrl: "feed.html",
controller: "AboutController"
});
Hope this help someone else to not waste time on such a simple error.
So I have these routes:
state('app.editProject', {
url: '/projects/:projectId/edit',
templateUrl: 'app/modules/projects/views/edit-project.client.view.html'
}).
state('app.viewExpense', {
url: '/expenses/:expenseId',
templateUrl: 'app/modules/projects/views/view-expense.client.view.html'
}).
state('app.viewIncome', {
url: '/incomes/:incomeId',
templateUrl: 'app/modules/projects/views/view-income.client.view.html'
}).
state('app.editProjectTab', {
url: '/projects/:projectId/edit/:currentTab',
templateUrl: 'app/modules/projects/views/edit-project.client.view.html',
reloadOnSearch: false
}).
I'm on
/app/projects/22/edit/expenses
I have a link like this
<a data-ng-href="#!/app/expenses/{{ expense.id }}">{{ expense.description }}</a>
When I click this link this sends me to the right link but instantly after that sends me to /app/projects/undefined/edit/documents (documents is the last tab)
I found a "workaround" when I see that :projectId is undefined I go back in history.
Does anyone know why this is happening?
Thanks in advance!
I'm making a MEAN reddit clone and currently working on authentication using Passport
I'm using ui-router as my angular routing module and the inline templating is giving me problems. Specifically, when I pass the {failureRedirect: "/signup" } object to the passport authentication route (included below, along with the angular module) it looks up and fails to find a view called "signup"
How can i successfully redirect it to another inline template (or, failing that, abstract the view into seperate files?
// Login form authentication
app.post("/login"
,passport.authenticate('local',{
successRedirect : "/",
failureRedirect : "/signup",
})
);
//Angular
app.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl',
resolve: {
postPromise: ['postFactory', function (postFactory) {
return postFactory.getAll();
}]
}
})
.state('login', {
url: '/login',
templateUrl: '/login.html',
controller: 'MainCtrl'
})
.state('signup', {
url: '/signup',
templateUrl: '/signup.html',
controller: 'MainCtrl'
})
.state('profile', {
url: '/profile',
templateUrl: '/profile.html',
controller: 'MainCtrl'
})
.state('new', {
url: '/new',
templateUrl: '/new.html',
controller: 'MainCtrl'
})
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl',
resolve: {
post: ['$stateParams', 'postFactory', function ($stateParams, postFactory) {
return postFactory.get($stateParams.id);
}]
}
});
$urlRouterProvider.otherwise('home');
}]);