I'm a newbie to Angular. Currently I've a challenge I'm been working for hours. I thought of posting here. The problem is how can I preserve the query string value when the route changes in Angular. I'm using the ui router. The querystring has an uid that will be send in each request which I could able achieve through httpinterceptor. But I really got struck up in preserving the uid in querystring whenever the route changes. Can anyone give some insights on this please?
When using ui router you (usually) specify the url, template and controller for that state:
.state('mystate', {
url: "/mystate",
template: "<p>Some template content using scope: {{title}}</p>",
controller: function($scope) {
$scope.title = "State 1";
}
});
To preserve the query string between states you can add a state param to your states:
.state('mystate', {
url: "/mystate?myParam",
...
...
},
You can then access the parameter in the state controller with $stateParams.myParam.
Note: You have to pass myParam when changing state:
$state.go("mystate", {myParam: "yourValueGoesHere"});
Read more in ui router doc
Related
I am new to angular js and I am trying to add the custom filter to alter the dynamic url inside a state provider.
can't get it to work though,
can anyone let me know where am i going wrong or is the approach correct
I have attached the code for my state provider where I have tried to add the filter
.state('app.gotoPropertyDetails', {
url: 'property-details/:property_id/(:seo_details | camelCaseToHyphens)',
templateUrl: 'views/propertyDetails.html',
controller: 'propertyDetailsCtrl',
params: {property_id: null,seo_details:null}
})
I am using the state in Angular Js. I want to add some field like date in url without reloading the state. So I have seen related link AngularJS UI Router - change url without reloading state
But I am still stuck in this problem.
HTML
<button class="btn btn-md btn-primary" ng-click="dumy()">Apply</button>
CONTROLLER
$scope.dumy=function(){
$scope.startDate="2017-07-26T09:30:00Z";
$scope.endDate="2017-07-26T18:30:00Z";
}
MODEL.JS
.state('app.shine', {
url: '/showData',
params:{
View:null,
Edit:null,
Enable:null,
Delete:null
},
views: {
"content#app": {
templateUrl: 'view/view.html',
controller: 'controller'
}
},
})
I want to set $scope.startDate value in the URL as a state or query parameter. If I reload the page then These parameter should be there in URL , But these parameter should be set after click on the Apply button. I am new in the angular js. Please share your ideas. Thanks in advance.
Make sure you are injecting $location into your controller, then you can use $location.search to update the url without a page refresh.
$location.search( { object with query parameter values })
For example, I use something like this in one of my apps:
this.$location.search({ key: this.linesQuery.order, id: this.lineIndex })
I'm building a small search engine using Angular and UI Router. I'm trying to figure the best way to transition from the home page (search submission) to the results page.
I have this for my home page route(state in UI Router)
.state('home', {
url: '/',
And then I this for my search results page
.state('search', {
url: '/search?q',
I want to have the user's search term that is submitted on the home page to be in the url of the search results page. How can I best do that with UI Router? It seems that abstract state might be necessary here to pre-load the home page(template, controller and url) and then have another state such as
.state('home', {
url: '?q',
Where q is used for query parameter... however it doesn't quite seem to work. Is my thinking here way off or do I have an error in my code somewhere that I don't see?
You can pass query params to UI Router via the $state.go API like so:
via controller
var params = { q: <user-input> }
$state.go( 'search', q )
via directive
<a ui-sref="search({ q:<user-input> })">Search</a>
$state API docs - link
angular.module('articles').config(['$stateProvider',
function($stateProvider) {
$stateProvider.
state('viewArticle', {
url: '/articles/:articleId',
templateUrl: 'modules/articles/views/view-article.client.view.html'
});
}
]);
my angular UI router is like this. I want to substitute the articleId stateparams as article title for SEO purposes.
it's not important what is going to be written in the url address. you can just use this style url: '/articles/:articleTitle' and simply use a variable which contains your article title
I want to show 404 error page, but also I want to save wrong url in location.
If I'll do something like that:
$urlRouterProvider.otherwise('404');
$stateProvider
.state('404', {
url: '/404',
template: error404Template
});
url will change to /404. How I can show error message on wrong urls without changing actual url?
There is solution for this scenario. We'd use 1) one ui-router native feature and 2) one configuration setting. A working example could be observed here.
1) A native feature of ui-router state definitions is:
The url is not needed. State could be defined without its representation in location.
2) A configuration setting is:
otherwise() for invalid routes, which parameter does not have to be a string with default url, but could be a function as well (cite):
path String | Function The url path you want to redirect to or a function rule that returns the url path. The function version is passed two params: $injector and $location
Solution: combination of these two. We would have state without url and custom otherwise:
$stateProvider
.state('404', {
// no url defined
template: '<div>error</div>',
})
$urlRouterProvider.otherwise(function($injector, $location){
var state = $injector.get('$state');
state.go('404');
return $location.path();
});
Check that all in this working example
As of ui-router#0.2.15 you can use $state.go() and send option not to update the location:
$urlRouterProvider.otherwise(function($injector) {
var $state = $injector.get('$state');
$state.go('404', null, {
location: false
});
});