I am working on ui-router. I have a state:
.state('new-personal-orders', {
url: '/orders/new-personal-orders/:catId?',
template: '<new-personal-orders></new-personal-orders>'
})
In my controller i can make the state call with the
$state.go('new-personal-orders',null,{reload:true})
In the Html File i have an anchor tag:
Link
If the tag is clicked the state changes and 'new-personal-orders' turns into the current state with the trailing hash in the url. The url then looks like:
http://localhost:3000/orders/new-personal-orders#12
I want to do the same from the controller file with the $state.go() function of ui-router. But the hash url is not added.
My question is that is there any way that the hash url can be passed by the $state.go() in ui-router?
It seems that you can now put a hash in the state params like so:
$state.go('new-personal-orders', {'#': catId });
And you don't even need a /:catId in the state configuration at all.
See https://github.com/angular-ui/ui-router/pull/1867
You can pass state params as an argument in $state.go :
$state.go('new-personal-orders', {catId: 12}, {reload:true})
// refers to: http://localhost:3000/orders/new-personal-orders/#12
It seems that you are attempting to implement the same inside an ng-repeat, then you should replace 12 by something such as order.catId etc.
Related
Can you somehow receive $stateParams without having a <ui-view>-tag in your html?
Basically, I want this code to work:
.config([
'$locationProvider',
'$stateProvider',
function($locationProvider, $stateProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('schedules_show', {
name: 'edit_schedule',
url: '/schedules/:id/edit'
});
}])
So I can fetch the :id from any other controller that is being called via $stateParams.
Some more clarification: I don't want to use $stateParams to generate links or to move around my application, cause my app is an hybrid of RoR and Angular.js. I change views in server side with common links. I just want to use angular-ui-router to get some values from the URL to use in the Angular.js part of my app (in this case the :id). So because I don't want to navigate via Angular and don't want to use it's state dependent controllers or views, which again is the reason why I don't want to have <ui-view>-tags in my HTML.
Problem solved: I think my approach via angular-ui-router was wrong. I have a solution now, where I just pass the param from the HTML via ng-init to the controller, but it doesn't answer my question, so I think this should be closed.
If I understood you rigth you need state params. And the qnswer is: yes you can. First way is to use url params: /url/suburl/:param1/:param2/:paramN. Second way (if you do not want to see your params in url) use params option in your state. Then just call your state with this params inside. Example:
.state('schedules_show', {
name: 'state1',
url: '/state',
params: {
param1: null,
param2: null
}
});
Here, in state configuration null is for not to assign initial value; and call this state with
ui-sref="state1({ param1: 'test', param2: 10 })"
Then in injected $stateParams object you can get these params' values
Another possible solution is to use resolve in your state to provide specific params to your controller assigned with this state
More info about resolve
Does it makes sense?
On button click I am redirecting to another page using state.go(). the code is
$scope.usercal = function(x,y,z){
$state.go('app.calendar',{employeeName:x,employeeID:y,projectName:z});
}
I want to do the same with `$location.path(/url);
But how to pass the parameters?
hi to pass Parameters for $location.path you should use $location.search() like this:
$location.path('/myURL/').search({param: 'value'});
This will lead to
/myURL/?param=value
If your parameters are the part of url (path) only than you can use
$location.path('/myURL/'+x+'/'+y);
if parameter is query string then go with
$location.path('/myURL/').search({employeeName: x});
We use ngRoute, which operates slightly differently than ui-router.
$stateParams in ui-router is converted to $routeParams, which can contain values in the same way, and is populated using url's as usual like so:
some/path/:a/to/dir/:b results in the params to the resulting page be {a, b}.
I want to get part of a path in URL via Angular.js and i found solution:
http://mywebsite.com/one/HEREiWANT/three
first i do this:
app.config(function($locationProvider){
$locationProvider.html5Mode(true);
});
then i define my controller like this:
app.controller("mainCtrl", function ($scope,$location) {
//...
}
then with this method i can get what i want and it works!:
$scope.getURLPart = function () {
return pId = $location.path().split("/")[3]||"Unknown";
};
But this has a huge problem, right now after this changes, all of my linkes in my website doesn't work. When i click on a link, address in browsers address bar changes but i stay at the same page and redirection process doesn't happen. Why? How i can achieve what i want without with this problem?
In your state if your using state and yor passing params to your state then you can use
$stateparams to get the params
$stae.go("particular state name") to route to states
Having really big JSON object in Angular controller and ui-sref link I want to pass this object to controller of template that would be in ui-view.
I know, that I can pass parameters to state with ui-sref, but I don't want this object to appear in address bar. Also, I know that we can use 'resolve' option in state, but I can't find how to pass data to 'resolve' function from link.
Update
If I use $state.go like that:
router configuration
state('social.feed.detailed',
url: '/:activityID'
templateUrl: 'views/social/detailedactivity.html'
)
in template
<ums-social-activity ng-repeat="record in SOC_FEED_CTRL.records"
activity="record"
ui-sref-active="selected"
ng-click="SOC_FEED_CTRL.goToDetailed(record)">
</ums-social-activity>
in controller
$scope.SOC_FEED_CTRL.goToDetailed = (activity) ->
# here activity is real object
$state.go('social.feed.detailed', {'activityID':activity.id, 'activity':activity})
Then 'activity' param doesn't resolves at all.
Update 2
If I modify route configuration to this:
state('social.feed.detailed',
url: '/:activityID?activity'
templateUrl: 'views/social/detailedactivity.html'
)
Then activity is string "[object Object]"
You can use the ui-router module's $state.go function call to manually pass in $stateParams that won't appear in the URL. So, rather than using the ui-sref attribute, you'd set an ng-click handler that calls $state.go(STATE,{'param':JSON}).
Then, inject $stateParams into your controller, and read
$stateParams.param
To get your JSON object back.
Chances are
ui-sref-active="selected"
Selected represents an object
selected.name
or
selected.id
Selected looks like it represents a key value relationship. That is what I am experiencing anyway.
<a ui-sref="itinerary.name({name:person.id})">
Say, I have a route like: #/path/to/route/:dynamicParamter
Now whenever I click on a link where just that part is changing, angular loads the whole controller.
Is there a way I can avoid this and just let my controller to all UI changes based on URL without having to reload ?
If you are ready to use dynamicParamter as a querystring parameter, then you can use the $routeProvider reloadOnSearch to false. See $routeProvider documentation.
In this case your dynamicParameter changes should only change the querystring parameter and the controller would not get loaded.
To know when the querystring change look at $route#$routeUpdate event.