I want to navigate from one url /projects to url /projects/{name} , but I need to resolve resource by $stateParams.id. How can I do it?
Now I have something like this:
$stateProvider.state('project.detail', {
...
url: '/projekt/{name}/{id}',
...
resolve: {
project: ['$stateParams', 'ProjectService', function($stateParams, ProjectService) {
return ProjectService.get({id : $stateParams.id}).$promise;
}]
}
...;
But when I remove {id} from the url: '...', it does not work.
My front end navigation is :
ui-sref="project.detail({name: project.name, id: project.id})"
And I do not want to have url .../projects/hyperloop/5462
but only .../projects/hyperloop
Thank you!
You can use parameters without specifying them in state URLs. You can specify them in params property in state config:
$stateProvider.state('project.detail', {
...
url: '/projekt/{name}',
params: {
id: null
},
resolve: {
project: ['$stateParams', 'ProjectService', function($stateParams, ProjectService) {
return ProjectService.get({id : $stateParams.id}).$promise;
}]
}
...
})
Please check ui-router docs for more details
Related
got some question for you guys.
How can i retrieve data passed as parameter and use it as object/string in my resolve so i can pass it to my controller.
here is my code(not working)
var thisState = {
name: 'category',
url: '/category/:category',
templateUrl: 'resources/templates/views/category.html',
resolve: {
category: function(params) {
return params.category;
}
},
controller: 'CategoryCtrl'
}
$stateProvider
.state(thisState);
this is how i pass param
ui-sref="category({category:'food'})
thanks in advance
You need to use $stateParams with ui-router
var thisState = {
name: 'category'
url: '/category/:category',
templateUrl: 'resources/templates/views/category.html',
resolve: {
category: ['$stateParams', function($stateParams){
return $stateParams.category;
}]
},
controller: 'CategoryCtrl'
}
$stateProvider
.state(thisState);
AngularJS 1.5, using ui-router and components.
How do I pass a parameter inside a component using the ui-sref directive?
header.html:
<a ui-sref="dashboard({contentType: 'company'})">Company</a>
app.js:
.state('dashboard', {
url: "/dashboard",
component: "dashboard",
resolve: {
}
})
dashboard-component.js:
angular.module('myModule').component('dashboard', {
templateUrl: '/views/admin/dashboard.html',
controller: DashboardController,
binding: {
contentType: '<' // This is not working...
}
});
dashboard.html: (Expects to see contentType in here - but No...)
contentType: {{$ctrl.contentType}}
You need to tell your state that it could be called with some params. There are two ways you can have params. Here's a simple explanation:
Params that are part of URL
.state('dashboard', {
url: "/dashboard/:contentType",
component: "dashboard",
resolve: {
...
}
})
Params that are not part of URL
.state('dashboard', {
url: "/dashboard",
params: {contentType: null},
component: "dashboard",
resolve: {
...
}
})
EDIT: If you see, In the plunker I provided in comments, they are not directly trying to use the param value in controller, but they are using it to get something resolved.
Now, coming to your problem's solution,
One way is, you can inject $stateParams in controller and use $stateParams.tester.
Or, if you want, you can also use resolve to directly get the passed value, like:
$stateProvider.state('userlist', {
url: '/users',
params: {
tester: null
},
component: 'users',
resolve: {
tester: function($stateParams) {
return $stateParams.tester;
}
}
});
second example plunker
Add url param contentType in the state
.state('dashboard', {
url: "/dashboard/:contentType",
component: "dashboard",
resolve: {
}
})
Because I have to build my urls SEO friendly and because I can't trust the user output. I want redefine this input when the resolve function returns me success.
Example :
The user writes : http//mydomain.com/city/Newcastle upon Tyne .
The API returns me the correct slug : newcastle-upon-tyne-0191 and loads the template.
I want reverse the user inputs with this slug like this before the templates load :
http//mydomain.com/city/newcastle-upon-tyne-0191.
I'm using UI router, it is a way for do this ($state, $stateparams) ?
Here is the part of my router code which work with :
.state('villes.ville', {
url: "/:ville",
cache: false,
parent: 'villes',
templateUrl: "partials/ville.tpl.html",
metaTags: {
title: '{{city.label}} ({{city.zip_code}})',
},
resolve: {
city: function(City, $state, $stateParams){
return City.get({
slug: $stateParams.ville,
shape: true,
details: true
}).$promise.then(
function(data){ return data },
function(error){ $state.go('/404') });
}
},
controller : 'villeCtrl'
})
I am not able set up and maintain an route param. When I set the param. It goes to the correct place. However, if I change the route the content does not change. I tried to make one view object, but home.name state does not render with this approach. I can only get templates to show using two absolute paths.
Could not resolve '#/home/Adam Harvey' from state 'home'
I found a great link https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service
To start: I created a simple list with ng-repeat. Here is a shortened example
$scope.iterants =
[
{
name: 'Adam Harvey',
type: 'Hotel',
dates: '01/21/2015-01/22/2015',
location: 'Rockville Maryland',
status: 'Confirmed'
},
{
name: 'Jana Harvey',
type: 'Hotel',
dates: '01/21/2015-01/22/2015',
location: 'Rockville Maryland',
status: 'Confirmed'
}
];
In my html template I want to place a ui-sref on top of each person's name as a link to view them on another template.
<td><a ui-sref="itinerary.name{{name:person.details}}">{{person.name}}</a></td>
In my config I set up like so with the controller getting passed the $stateParams
.config(function config( $stateProvider ) {
$stateProvider.state( 'home.name', {
url: '/home/:name',
views: {
"main": {
controller: 'AboutCtrl',
templateUrl: 'src/app/about/about.tpl.html'
}
},
data: {pageTitle:'About'}
});
})
.controller( 'AboutCtrl', function AboutCtrl( $scope, $stateParams ) {
$stateParams.name;
});
In the home controller. I have set up my config and controller like so...
.config(function config( $stateProvider ) {
$stateProvider.state( 'home', {
url: '/home',
views: {
"main#": {
controller: 'HomeCtrl',
templateUrl: 'src/app/home/home.tpl.html'
},
resolve: [{
name: ['$stateParams', function($stateParams){
return $stateParams.name;
}]
}]
},
data:{ pageTitle: 'Home' }
});
})
Updates
The issue is your usage of the ui-sref directive. You have to pass the state name and then parameters as an object, like so:
<td><a ui-sref="home.name({ name: person.name })">{{person.name}}</a></td>
I an trying to list out all the URL's that exist in the stateprovider (angularjs 1.2.26).
given the example below, (very much cut down state list):
angular.module('app')
.config(function ($stateProvider) {
$stateProvider
.state('app.vendors', {
url: '/vendors',
templateUrl: 'app/vendor/list.html',
controller: 'Vendor.ListController as vm',
})
.state('app.vendor', {
url: '/vendor/{vendorId}',
templateUrl: 'app/vendor/details.html',
controller: 'Vendor.DetailsController as vm',
data: {
subnav: [
{ title: 'Details', icon: 'fa-align-left', state: 'app.vendor', permissions: 'get-vendor', exactStateOnly: true },
{ title: 'Sites', icon: 'fa-archive', state: 'app.vendor.sites', permissions: 'get-site' },
{ title: 'NCRs', icon: 'fa-copy', state: 'app.vendor.ncrs', permissions: 'get-vendor' }
],
requiredPermissions: ['get-vendor']
}
})
.state('app.vendor.sites', {
url: '/sites',
templateUrl: 'app/vendor/site/list.html',
controller: 'Vendor.Site.ListController as vm',
data: {
requiredPermissions: ['get-site']
}
})
.state('app.vendor.site', {
url: '/site/{siteId}',
templateUrl: 'app/vendor/site/details.html',
controller: 'Vendor.Site.DetailsController as vm',
data: {
requiredPermissions: ['get-site']
}
})
.state('app.vendor.ncrs', {
url: '/ncrs',
templateUrl: 'app/vendor/ncr/ncrList.html',
controller: 'Vendor.NCR.NCRListController as vm',
data: {
requiredPermissions: ['get-vendor']
}
});
});
to get to a particular vendor you would use state:
app.vendor({vendorId: 1})
to get to its site
app.vendor.site({vendorId: 1, siteId: 2})
if I pass in the $state object to a controller I can list all the states with state.get().
If I list them the urls only contain the last part (i.e. what is in the config, and relative to its parent). I can use $state.href('app.vendor.site') which will give me almost the whole url, but misses out the parameters. I am trying to find a way at runtime to know what or at least how many parameters it requires.
My goal is to try and create a basic smoke test for every page in our Angular app to ensure it loads something and doesn't through errors in the console. I dont want to have to manually maintain a list of urls with params. (all our params are int IDs so I can simply use "1" in the params to test the url).
The private portion of the state contains params and ownParams objects. You can use a decorator to access those internal variables. See my previous answer regarding exposing the entire internal state object using a decorator: UI-Router $state.$current wrapper for arbitary state
After decorating your state objects, use the $$state() function to retrieve the private portion. Then query the state for its params and generate the href.
angular.forEach($state.get(), function(state) {
var paramKeys = state.$$state().params.$$keys();
var fakeStateParams = {};
angular.forEach(paramKeys, function(key) { fakeStateParams[key] = key; });
console.log($state.href(state, fakeStateParams));
});