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 })
Related
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
View has controls for selecting cities and selecting params. And this view show selected objects for the selected cities. When view is loaded I parse the url and do request to the server. Url for the view are some as: http://example.com/cities?cityId=3&cityId=33¶m1=value1. My questions:
how can I put that url in location?
how can I handle changed url in location?
in which event I must hang the handler?
You can generate URL with
$location.url('cities?cityId=3¶m1=value1');
and You can handle this in your router config $stateProvider where you define states
.state('cities', {
url: "/cities?cityId¶m1",
templateUrl: "....",
controller: "citiesController"
})
// will match to url of "/cities?cityId=[any id]¶m1=[any value]"
and finally You can have these parameters in the citiesController.js i.e
console.log($stateParams);
//Object {cityId: "3", param1: "value1"}
Hope it helps.
Url generating automatically by $state.go('cities', {/* params */}, {location: true}).
In controller I put handler in $scope.$on('$stateChangeSuccess'..
I am trying to build a simple app, which goes the following way:
I have 2 menu items in the navbar: home and contact.
The home should be a unique URL only once from the server, at initialisation, read from a QR code (i got this covered, that is no problem to me) and the contact should always be the same.
I got the contact done in the following way:
$stateProvider.state('contact', {
url: '/contact',
templateUrl: 'src/views/contact.html',
controller: 'contactController'
})
The problem is with the home, which should keep the unique URL received by the server. How should i write the state for that one?
.state('home', {
url: '/:uid',
templateUrl: 'src/views/home.html',
})
Also, the home should keep it's unique url generated by the server after refresh and while navigating from contact to home.
In the HTML i would have something like
<a ui-sref="home({uid: --some dynamic uid?--})">Home</a>
this is the part which also requires help.
Set the home state to
.state('home', {
url: /{uid},
templateUrl: 'src/views/home.html',
})
and you could grab the parameters by injecting $stateParams into the controller. $stateParams.uid would return the parameters and store that in local storage or cookies.
Check this link out
https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service
UPDATE:
for example, this is the sample controller that is attached to the home page
app.controller('homeCtrl', function($stateParams) {
var id = $stateParams.uid; //this is how you retrieve the uid
});
by going to your home page e.g. http://www.example.com/abcd12345, the above $stateParams.uid would return abcd12345
Now to set the url. simply use ui-sref instead of href on the <a> tag. ui-router will automatically generate href for you.
e.g.
<a ui-sref="home({uid:'abcd12345'})">Home</a>
You have to create a custom provider and inject it into the config.
eg:- .config($stateProvider, $urlRouterProvider,yourprovider) .
I am not sure about this. But please check this way too..
I am using UI Router with html5Mode enabled, states are loaded from JSON.
Expected behavior after F5 or when pasting URL is, respectively, having current state reloaded or navigating to the said state, instead the initial application state is loaded.
For e.g. root/parent/child gets redirected to root/.
By the way, navigating with ui-sref works fine.
So, how can the state be retained after page reload?
In order to retain the state of page after reload app, a url represent the state should be gave. when you include ui-route module, url will be parsed and sent to corresponding state. You don't need to parse the url handly in most cases, ui-route born to do this.
Please can you post your code here? Specifically the $stateProvider.
This is an example of a correct $stateProvider and it works fine:
$stateProvider.state('main.admin', {
url: '/admin',
resolve: {},
views: {
'main-content#main': {
controller: 'AdminController as admin',
templateUrl: 'main/admin/admin.tpl.html'
}
}
});
Seems a bit hacky, but works for now.
app.run(['$location', '$state', function ($location, $state) {
function stateFromUrl () {
var path = $location.path(),
hash = $location.hash();
// do JSON states map parsing and find a corresponding to the URL state
return state;
}
if (stateFromUrl) {
$state.go(stateFromUrl);
} else {
$state.go('home'); // initial state
}
}]);
I have a text box with a search Button as below
On clicking the search button, I am calling SearchController.search method and
my expectation is it will display a new page with the result.
$scope.search = function () {
$http.get('data/results.json').success(function (data) {
$scope.activities = data;
$state.go('results',data);
});
and my app.js looks as below
var myApp = angular.module('MyApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('results', {
url: '/results',
templateUrl: 'result.html',
controller: 'SearchController'
});
$urlRouterProvider.otherwise('/');
});
But when I click on search button, nothing happens and url only changes to l/#/results .
I am not having any ui-view in search page and I want to go results page to display the result. How to get this fixed? what is the mistake I am doing?
You can't send a not mapped object into $state.go.
Looking the API: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state
Another similar problem: AngularJS: Pass an object into a state using ui-router
If you want to display it on a different page, use the "ui-sref" on the html to navigate to the new page and call ng-init on the page e.g
<button type="button" ui-sref="results">
and on result.html, you can call the init on the parent node such as
<section ng-init="search()">
.....
....
</section>
and your controller will look like this now
$scope.search = function () {
$http.get('data/results.json').success(function (data) {
$scope.activities = data;
});
With ui-router, state changes happens and different view is displayed based on state. So , when ui-router is used , moving from one page to another page is a wrong perception . We move from one state to another state and hence parameter passing can be done using "services".