I want to be able to reload just the nested view of my application and attached a route parameter on so that I can have URL routing in my application. I cannot figure out how to do this, I initially had it working with a query like this:
$location.search('userId', user._id);
//http://localhost:9000/#/user/?userId=123456789
My desired URL is below, with the userId = 123456789
http://localhost:9000/#/user/123456789
My app.js file
$stateProvider
.state('index', {
url: '/',
views: {
'#' : {
templateUrl: 'views/layout.html'
},
'top#index' : {
templateUrl: 'views/top.html',
controller: function($scope, $state) {
$scope.userLogOut = function() {
$state.go('login');
};
}
},
'left#index' : { templateUrl: 'views/left.html' },
'main#index' : { templateUrl: 'views/main.html' }
}
})
.state('index.user', {
url: 'user:userId',
templateUrl: 'views/user/user.html',
controller: 'UserCtrl'
})
.state('index.user.detail', {
url: '/',
views: {
'detail#index' : {
templateUrl: 'views/user/details.html',
controller: 'DetailCtrl'
}
}
})
In my controller:
$state.reload('index.user.detail', {userId: $scope.user._id});
As you are using ui-router you can use $state.go('index.user', { userId: {{yourid}} });
To allow the query string parameter to work using ui-router write your state like this,
.state('index.user', {
url: 'user/?userId=:param',
templateUrl: 'views/user/user.html',
controller: 'UserCtrl'
})
That would allow this to work,
//http://localhost:9000/#/user/?userId=123456789
Without the query string parameter (your desired URL) would be this,
.state('index.user', {
url: 'user/:userId',
templateUrl: 'views/user/user.html',
controller: 'UserCtrl'
})
http://localhost:9000/#/user/123456789
Related
I want to pass a hidden value or some optional parameter which not part of URL to change between the states based on the param. So i tried like
<a ui-sref="state2({key:'value', optional: 'B'})">Send param and go to page 2</a>
In the route provider
$stateProvider
.state('state2', {
url: "/:key",
templateUrl: "state1.html",
params: {
optional: null
},
controller: 'contollerA'
})
.state('state3', {
url: "/:key",
templateUrl: "state3.html",
controller: 'contollerB'
})
.state('state4', {
url: "/:key",
templateUrl: "state4.html",
controller: 'contollerC'
})
In the controller
.controller('contollerA', function($scope, $stateParams, $state) {
if ($stateParams.optional === 'B') {
$state.go('state3');
} else {
$state.go('state4');
}
})
but this is not working as the error showing on browser console some thing like
invalid state reference
What is the way to achieve this?
Because state2 doesn't contain the param "key" in config. Replace
.state('state2', {
url: "/:key",
templateUrl: "state1.html",
params: {
optional: null
},
controller: 'contollerA'
})
with
.state('state2', {
url: "/:key?optional",
templateUrl: "state1.html",
params: {
optional: null,
key: null
},
controller: 'contollerA'
})
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'm trying to load a navbar according to the user.
To do this, I need to set a dynamic template, but I can't see my $rootScope
$stateProvider
/*Login*/
.state('login', {
url: '/',
data: {pageTitle: 'Inicio de sesión.'},
resolve: {},
views: {
'navbar': {
templateUrl: null,
controller: null
},
'body': {
templateUrl: "views/login.html",
controller: 'LoginController'
}
}
})
.state('home', {
url: '/home',
data: {pageTitle: 'Home.'},
views: {
'navbar': {
templateUrl: "views/navbar.html", //here dynamic template
controller: null
},
'body': {
templateUrl: "views/inicio.html",
controller: null
}
}
})
.state('perfil', {
url: '/perfil',
data: {pageTitle: 'Perfil de usuario.'},
views: {
'navbar': {
templateUrl: function (sessionProvider) {
var sessionFactory = sessionProvider.path();
return sessionFactory;
}, // this return a tring, but don't load anything
controller: null
},
'body': {
templateUrl: "views/usuario/perfil.html",
controller: 'UsuarioController'
}
}
});
i've tried use a service to load the data, but it didnt work, also tried to load it from the localStorageService, but don't display anything.
is there a single way to load it ?
There are features for this, like templateUrl and templateProvider. See all details here:
Trying to Dynamically set a templateUrl in controller based on constant
E.g. this could be an example of templateProvider used isntead of the 'templateUrl' static path
templateProvider: function(CONFIG, $templateRequest) {
console.log('in templateUrl ' + CONFIG.codeCampType);
var templateName = 'index5templateB.html';
if (CONFIG.codeCampType === "svcc") {
templateName = 'index5templateA.html';
}
return $templateRequest(templateName);
},
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 try to create an app with angular, and somehow the child state in not loading.
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url : "/",
templateUrl: "/admin/home/"
})
.state('users', {
url : "/users/",
templateUrl: "/admin/users",
controller : function ($stateParams) {
console.log($stateParams);
console.log("users");
}
})
.state('users.new', {
url : "^/users/user/",
templateUrl: "/admin/users/new",
controller : function () {
console.log("users.new");
}
})
.state('users.user', {
url : "^/users/user/:uuid",
templateUrl: function ($stateParams) {
console.log($stateParams);
return "/admin/users/" + $stateParams.uuid
},
controller : function () {
console.log("users.user");
}
});
When I visiting the page
/users/user/55d8b1c706387b11480d60c1
I see the request to load the page, but only the "users" controller got executed.
This problem appears only with child states, switching between parent state working without problems.
I Using the latest versions of angular and ui-routes.
any ideas?
Please read this DOC
You mistake is in hierarchy. Child states use parent template as root and try find nested <ui-view>
You may add abstract state user without url, with empty template <ui-view></ui-view>, for nested viws. Then rename user, to E.G. user.index, it works for me
1st (It may works)
$stateProvider
.state('home', {
url : "/",
templateUrl: "/admin/home/"
})
.state('users', {
template: "<ui-view></ui-view>",
})
.state('users.index', {
url : "/users/",
templateUrl: "/admin/users",
controller : function ($stateParams) {
console.log($stateParams);
console.log("users");
}
})
.state('users.new', {
url : "^/users/user/",
templateUrl: "/admin/users/new",
controller : function () {
console.log("users.new");
}
})
.state('users.user', {
url : "^/users/user/:uuid",
templateUrl: function ($stateParams) {
console.log($stateParams);
return "/admin/users/" + $stateParams.uuid
},
controller : function () {
console.log("users.user");
}
});
2nd way is USE absulutly named views E.G.
views: {
"": { templateUrl: 'pages/menu.html' }, // relative noName view
"header": { templateUrl: "pages/header.html"}, //relative named view
"content#": { // Absolute name
template: "<ui-view></ui-view>",
controller: 'AuthController'}
}