Develop Reference

three level nested url in angular

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

angular-ui-routing doesn't change the view

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"

want to go to home page when clicked on back button in mobile?

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"
}
}
})

Ionic controller not called after $state.go

I have a controller the get data from my back-end application when opening the state for the first time from the first controller it loads the data, but when it tries to open it again it does not load the new data
Here is how:
if (selectedServiceID == "000")
{
$state.go('balanceInquery');
};
Here is the called balanceInquery state controller:
.controller('BalanceInqueryController', function($scope, getAccountBalanceService, $state, $ionicLoading, $ionicPopup) {
getAccountBalanceService.get(username, pass, customerID, serviceAccID, langID)
.success(function(data) {
$scope.custBalance = data;
})
.error(function(data) {
var alertPopup = $ionicPopup.alert({
title: 'Error!',
template: 'Sorry something went wrong'
});
});
})

I had a similar problem. The first time was shown only after reload. The reason is view caching. Disable it with cache: false, like in my specific case:
$stateProvider
.state('login', {
url: '/login',
controller: 'LoginCtrl as vm',
templateUrl: 'app/login/login.html'
})
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html',
cache: false
})

This is due to view caching, which can be disabled in a variety of ways. See http://ionicframework.com/docs/nightly/api/directive/ionNavView/ for more details.

angular-ui-router nested views the page doesn't loading when direct url is used or refresh

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.