I have 2 states; viewOrder and saveOrder. Their definition looks like this:
$stateProvider.state('viewOrder', {
url: "/orders/:orderNumber",
templateUrl: 'tpl/orders/view.html',
controller: 'ViewOrderController',
controllerAs: 'controller'
});
$stateProvider.state('saveOrder', {
url: '/orders/save?orderNumber',
templateUrl: 'tpl/orders/save/index.html',
controller: 'SaveOrderController',
controllerAs: 'controller'
});
When I use $state.go('saveOrder') it gets confused and thinks I am trying to view an order and believes the /save is the actual order number.
Is there a way I can keep my URL like it is, but stop the confusion?
Try this, I have added the url param in saveOrder with a colon..
$stateProvider.state('viewOrder', {
url: "/orders/:orderNumber",
templateUrl: 'tpl/orders/view.html',
controller: 'ViewOrderController',
controllerAs: 'controller'
});
$stateProvider.state('saveOrder', {
url: '/orders/save/:orderNumber',
templateUrl: 'tpl/orders/save/index.html',
controller: 'SaveOrderController',
controllerAs: 'controller'
});
Your $state.go('saveOrder') is changing without parameter.
change like this $state.go("saveOrder", { "orderNumber": 123});
$stateProvider.state('viewOrder', {
url: "/orders/:orderNumber",
templateUrl: 'tpl/orders/view.html',
controller: 'ViewOrderController',
controllerAs: 'controller'
});
$stateProvider.state('saveOrder', {
url: '/orders/save/:orderNumber',
templateUrl: 'tpl/orders/save/index.html',
controller: 'SaveOrderController',
controllerAs: 'controller'
});
Related
i am working on web app that uses ui-router version 0.3.2 and angular 1.5. i am having an issue with back button, when i hit the back button the url updates to appropriate state url, but does not reloads / renders the page. The controller of the new state (updated url) does not get executed. Following is my state config
$stateProvider
.state('home', {
url: '/',
reloadOnSearch: false,
templateUrl: 'homePage.html',
controller:'homeController'
})
.state('home.overView', {
url:'overView',
reloadOnSearch: false,
views: {
ovSB: {
templateUrl: 'searchParameterBarTemplate.html',
controller: 'searchParameterBarController'
}
}
})
.state('home.overView.result', {
url:'/:docType?abc&xyz&type&user&temp1&temp2',
abstract: true,
reloadOnSearch: false,
templateUrl: 'resultViewTemplate.html',
controller : 'resultPanelController'
})
.state('home.overView.result.dashboard', {
url:'',
reloadOnSearch: false,
views: {
'chart': {
templateUrl: 'chart-template.html',
controller: 'chart-Controller'
},
'oVGrid': {
templateUrl: 'ov-grid-template.html',
controller: 'ov-grid-controller'
},
'filterGrid': {
templateUrl: 'filter-stats-template.html',
controller: 'filter-stats-controller'
}
}
})
.state('home.delta',{
reloadOnSearch: false,
url:'Delta',
views:{
pcSB:{
templateUrl: 'search-parameterbar-delta-template.html',
controller : 'search-parameterBar-delta-controller'
}
}
})
.state('home.delta.result',{
url:'/:docType?xyz_1&abc_1&xyz_2&abc_2',
reloadOnSearch: false,
templateUrl: 'delta-template.html',
controller : 'delta-controller'
})
.state('home.details', {
url: 'details',
views: {
detailsSB: {
templateUrl: 'search-paramBar-details-template.html',
controller: 'search-paramBar-details-controller'
}
}
})
.state('home.details.result', {
url: '/:documentType?abc&xyz&user&temp1&temp2',
abstract: true,
templateUrl: 'details-view-template.html',
controller: 'details-view-controller'
})
.state('home.details.result.dashboard',{
url:'',
views:{
perGraph : {
controller :'per-graph-controller',
templateUrl: 'per-graph-template.html'
},
detailsGrid: {
controller: 'details-grid-controller',
templateUrl: 'details-grid-controller-template.html'
}
}
});
So for example if i navigate from home.overview.result.dashboard (url -> localhost:12345/overview/doctype?abc&xyz&user&temp1&temp2) state to home.details.result.dashboard state with url localhost:12345/details/doctype?abc&xyz&user&temp1&temp2 and hit backbutton, the url updates to localhost:12345/overview/doctype?abc&xyz&user&temp1&temp2 however it does not reloads/renders the page.
I believe I can you use this solution and trigger the reload, but I am looking for a better solution than this which adheres to ui router. is there something i am missing with state config / doing wrong? Any help pertaining to this would be highly appreciated.
Thank you
it will be firing $stateChangeStart event. use location directive to rout it . please refer the below snippet
$rootScope.$on('$routeChangeStart', function (event,next) {
$location.path(next.$$route.originalPath);
});
this can resolve your problem. but its not the perfect solution
I had an issue a few days ago where I would get a random # inside the URL like:
http://localhost:55462/#/forgotpassword
I asked a question about this and added this inside my app.config section:
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Thiss did not remove the # sign but just move it and now the URL looks like this:
http://localhost:55462/#forgotpassword
My current routing looks like:
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('login', {
url: '/',
templateUrl: 'partials/login.html',
controller: 'loginController'
})
.state('forgotpassword', {
url: '/forgotpassword',
templateUrl: 'partials/forgotpassword.html',
controller: 'forgotPasswordController'
})
.state('forgotpasswordcode', {
url: '/forgotpasswordcode',
templateUrl: 'partials/forgotpasswordcode.html',
controller: 'forgotPasswordController'
})
.state('forgotpasswordnewpassword', {
url: '/forgotpasswordnewpassword',
templateUrl: 'partials/forgotpasswordnewpassword.html',
controller: 'forgotPasswordController'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'partials/dashboard.html',
controller: 'calenderController'
})
.state('dashboard.calender', {
url: '/calender',
templateUrl: 'partials/dashboard.calender.html',
controller: 'calenderController'
})
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
//.otherwise({ redirectTo: '/login', controller: 'loginController' })
});
and when i am redirecting to another page i am using:
$location.path('/forgotpasswordcode');
Can anyone help me out with this issue?
Use $state.go() instead of $location.path(). Make sure to inject $state wherever you want to use it also
$state.go(stateName[,params]) // example $state.go('dashboard.calender')
$state is a service provided by ui-router
I need to handle dynamic params in angular ui-router and load templates according also if someone use link to come on my site, he should be able to reach at desired page. I need to use it for multiple parameters and get the value form server to related values.
.state('home', {
url: '/:shop',
views: {
"mainbox": {
templateUrl: "app/shop/main.html",
controller: "shopMainCtrl",
controllerAs: "shop"
}
// xyz.com/wallmart should be landed here
}
})
.state('course', {
url: '/:shop/:area',
views: {
"mainbox": {
templateUrl: "app/area/nav.html",
controller: "areaNavCtrl",
controllerAs: "areaNav"
}
//xyz.com/wallmart/california should be landed here
}
})
.state('area.food', {
url: '/food',
views: {
"mainboxcontent": {
templateUrl: "app/area/food.html",
controller: "foodMainCtrl",
controllerAs: "food"
}//xyz.com/wallmart/california/food should be landed here
}
}).state('area.cloths', {
url: '/cloths',
views: {
"mainboxcontent": {
templateUrl: "app/area/cloths.html",
controller: "clothsCtrl",
controllerAs: "cloths"
}
//xyz.com/wallmart/california/cloths should be landed here
}
})
.state('buy', {
url: '/:shop/:area/:buy',
views: {
"mainbox": {
templateUrl: "app/buy/buynow.html",
controller: "buyMainCtrl",
controllerAs: "buyNow"
}
//xyz.com/wallmart/california/iphone should be landed here
}
})
https://github.com/angular-ui/ui-router/wiki
templateProvider is something you may try.
stackoverflow: Angular UI Router: decide child state template on the basis of parent resolved object
I have the following:
.state('account', {
abstract: true,
url: '/account',
templateUrl: 'pages/templates/account.html',
controller: 'account'
})
.state('account.settings', {
url: '/settings',
templateUrl: 'pages/templates/account.settings.html',
controller: 'account.settings'
})
.state('account.user', {
url: '/user',
templateUrl: 'pages/templates/account.user.html',
controller: 'account.user'
})
I am trying to make it so if I go to:
/account => it goes to /account/settings
/account/setting => goes to /account/settings
/account/user => goes to /account/user
Basically making account.settings the default.
Is there a way to do this?
The big reason I want to do this is because of the following (maybe someone has a better suggestion for a work around)
I have a link like so:
<a ui-sref="account.settings" ui-sref-active="active">Account<a>
I'd like it to have the active class regardless of what nested view (settings or user). But I want this link to always send the user to account.settings.
If anyone could help me out, it'd be greatly appreciated.
Try:
.state('account', {
abstract: true,
url: '/account',
templateUrl: 'pages/templates/account.html',
controller: 'account'
})
.state('account.settings', {
url: '',
templateUrl: 'pages/templates/account.settings.html',
controller: 'account.settings'
})
.state('account.settings2', {
url: '/settings',
templateUrl: 'pages/templates/account.settings.html',
controller: 'account.settings'
})
.state('account.user', {
url: '/user',
templateUrl: 'pages/templates/account.user.html',
controller: 'account.user'
})
Or redirect from the abstract to the concrete state... the code snippet removes the specified 'account' controller reference, but the code in the snippet can be added to the controller if needed:
.state('account', {
abstract: true,
url: '/account',
templateUrl: 'pages/templates/account.html',
controller: ['$scope', '$state',
function( $scope, $state) {
$state.go('account.settings');
}],
})
i've an application that has multiple modules and it's using ui-view to switch between those modules.
My idea is to have within these parent $stateProvider, another $stateProvider inside each of these modules, so it can navigate inside those modules without the page reloading.
The outer $stateProvider is:
$stateProvider
.state('core',{
url: '/core'
})
.state('thing', {
url: '/core/thing',
templateUrl: './modules/thing/views/base.html'
})
.state('people',{
url: '/core/people',
templateUrl: './modules/people/views/list.html'
})
})
This is an example, but this system could scale a lot. And i want to use $stateProvider inside the module that is responsible for people state, for example. And inside the module 'app.people', using this config:
$stateProvider
.when('list',{
url: 'list/',
templateUrl: 'views/list.html',
controller: 'ListController',
controllerAs: 'list'
})
.when('insert',{
url: 'insert/',
templateUrl: 'views/form.html',
controller: 'FormController',
controllerAs: 'form'
})
.when('edit',{
url: 'edit/:id',
templateUrl: 'views/form.html',
controller: 'FormController',
controllerAs: 'form',
resolve: {
entity: ['EntityService', '$stateParams', function (EntityService, $stateParams) {
return EntityService.load($stateParams.id);
}]
}
})
Is this possible?
It's kinda easy to do that. Sorry about the question, but you just have to do this:
$stateProvider
.state('thing.list', {
url: '/list',
templateUrl: './modules/thing/views/list.html',
controller: 'ListController',
controllerAs: 'list'
})
.state('thing.insert', {
url: '/insert',
templateUrl: './modules/thing/views/form.html',
controller: 'FormController',
controllerAs: 'form'
})
.state('thing.edit', {
url: '/edit/:id',
templateUrl: './modules/thing/views/form.html',
controller: 'FormController',
controllerAs: 'form'
})
in the module that is on the inside.