How to config UI Router to reenter or reload the state by default?
E.g. user wants to refresh page, so he clicks the link that follows to that page. But currently the link isn't clickable, as it goes to the same page and the state doesn't change. Refreshing with browser button does work, so it reloads entire SPA again - isn't desirable.
This question - Reloading current state - refresh data - describes similar effect. Is it possible to change this solution - https://stackoverflow.com/a/23198743/404099 - to define the default behavior?
By the way, probably my approach is incorrect and I'm missing some basic idea in UI Router. Please point out if this is the case.
I second what #Sabacc said, but if you still instead, here you go:
angular.module('app')
.config(function($provide) {
$provide.decorator('$state', function($delegate)
{
$delegate.go = function(to, params, options)
{
return $delegate.transitionTo(to, params, angular.extend(
{
reload: true,
inherit: true,
relative: $delegate.$current
}, options));
};
return $delegate;
});
});
Related
I am migrating an app from AngularJs to Angular 7. In the old ui-router I was able to update the location without reloading the state with below code.
this.syncLocation = function (paramObj) {
var params = _.clone($state.params);
params = _.merge(params, paramObj);
$state.transitionTo($state.current.name, params, {
location: true,
notify: false
});
};
However with new Angular & UI-Router I am unable to get this done. Not sure if it is due to Change Detection Strategy or changes to UI-Router itself.
syncLocation(paramObj) {
console.log("syncLocation", paramObj);
let params = _.clone(this.stateService.params);
params = _.merge(params, paramObj);
this.stateService.go(this.stateService.current.name, params, {
reload: false
});
}
I have created plunker to reproduce the problem. The problem is described in the component colors.component.ts link. In this plunker I don't want to reload the page even though I check/uncheck the checkbox.
The idea is that I have a complicated page where I cannot afford to lose the contents by reloading the page but still be able to update the location. It is a simplified page with the problem.
Any help is appreciated.
You can update the url with Location.replaceState()
See: replaceState()
Inject Location with di and use like this:
constructor(private location: Location) {
...
private syncLocation(){
this.location.replaceState(`whatever/state/or/path/you/need`);
}
}
There are other useful methods in Location such as Path you may want to reference.
I'm trying to make my ionic app transition within the same state but with different URL. I have a the following state:
.state('app.profile.id', {
url: '/profile/:id',
data : {
id: -1
},
views: {
'menuContent': {
templateUrl: 'templates/pages/profile.html',
controller: 'ProfileCtrl'
}
}
})
This is the profile page of a user. What I'm trying to do is to have a link from the profile page to other users profile pages. I'm making the transition with the following code:
$state.go('app.profile.id', {id: id}, {reload: true});
If I don't add the reload: true part, then the data on the page won't refresh since I'm not changing the state. What I understand from reload: true is that it forces transition between states.
However my problem is, the back button acts weird after the transition. The back transition doesn't happen at first few levels: It changes the id (which is noticeable after a manual refresh), and after one or two level, $ionicHistory.goBack() breaks completely.
I think this is a bug in UI router, any idea how to fix this ?
Thanks in advance.
I'm performing an operating in a modal on a page within AngularJS. Once the operation is completed, I am calling the routing mechanism as follows:
$state.go('pagename', { id: someid});
Effectively I'm trying to navigate from /pagename/1 to /pagename/2. However, when I call $state.go, it does not navigate to the new page, presumably because I am already technically on it. Is there a way to update/refresh the current view with the new URL parameters?
$state.go('pagename', { id: someid }, { reload: true });
If you look at this github.io page, at the go(to, params, options) section there's a bit on the 'options'. In your case the params -have- changed, so that's why I suggest including the reload: true options.
I try to do some functionality that accepts a state navigation (using $state.go(otherState)), refreshing the associated url in the adress/url bar but it blocks (or redirects to not allowed page) if user directly puts this url in the adress/url bar.
Could it be done by ui-router rules or something inside ui-router module?
I put the example code:
$stateProvider.state("main", {
url: "/index.html",
templateUrl: "main.html"
}).state("notAccessibleScreenByBar", {
url: "/private/example.html",
templateUrl: "example.html"
});
From main view (index.html), the next angular code will be executed:
$state.go("notAccessibleScreenByBar");
This action changes the view, loading example.html and refreshing the url bar to /private/example.html.
If user puts /private/example.html in the adress/url bar, ui-router must block this request (or redirect to not-allowed page).
What you are trying to do seems very similar to any web authentication standard, but, if you don't want that, you could use $locationChangeSuccess (docs here)
A basic example inspired by this sample:
$rootScope.$on('$locationChangeSuccess', function(e, newUrl, oldUrl) {
// Prevent $urlRouter's default handler from firing
e.preventDefault();
if(isThisTransitionValid(newUrl, oldUrl)) {
// Ok, let's go
$urlRouter.sync();
});
});
In our app, we actually have two Backbone SPA applications. The first one is for login, registration and other features for unauthenticated users. The URL for this would be something like http://www.example.com/registration#signin. Once you login, you are redirected to our main Backbone app at http://www.example.com/ui#home.
In my main UI app, I am using Backbone.history without pushState. The App file looks something like:
define(function (require) {
var App = new Marionette.Application();
App.addInitializer(function (options) {
...
});
...
App.on('initialize:after', function () {
$(function(){
if (Backbone.history) {
Backbone.history.start({ root: '/ui' });
}
});
$.log("**WebApp**: Marionette app started.");
});
return App;
});
Of course, everything works flawlessly in any browser except IE 9 (and maybe 10, I need to check). In IE 9, all the routing works fine. Clicking links such as http://www.example.com/ui#anotherpage works. However, when the user clicks the Back button in their browser, they are not sent back to the last route fired. Instead, they are sent to http://www.example.com/registration#signin, which is the last page served by Node, our web server. As I click through links, I can see that history.length and Backbone.history.history.length are not updating.
All routes are fired from links/URL's. I'm not using router.navigate() within the code. Here are examples of our Router:
define(function (require) {
var Backbone = require('backbone'),
Marionette = require('marionette');
return Backbone.Marionette.AppRouter.extend({
appRoutes: {
"": "showHome",
"home": "showHome",
"foo": "showFoo"
}
});
});
And Controller:
define(function (require) {
var Backbone = require('backbone'),
Marionette = require('marionette');
return Backbone.Marionette.Controller.extend({
showHome: function () {
require(['webapp','modules/home'], function (WebApp) {
WebApp.module("Home").start();
WebApp.module("Home").controller.showModule();
});
},
showFoo: function () {
require(['webapp', 'modules/foo'], function (WebApp) {
WebApp.module("Foo").start();
WebApp.module("Foo").controller.showModule();
});
}
});
});
UPDATE:
On further research, it turns out the problem is that older versions of IE don't record hash changes in their history. See - Change location.hash and then press Back button - IE behaves differently from other browsers. But I'm still not sure what the workaround for this would be. I'm guessing it would somehow involve manually handling hash change events with a plugin such as jQuery Hashchange and doing... something? Manually setting IE's history? Or crafting a custom history object and using it when we detect a Back button in IE?
I was having the same problem in one of our apps for IE.
Starting backbone history like below works.
Backbone.history.start({
pushState: true,
hashChange: false
});
Update: As mentioned By T Nguyen,
When you set pushState to true, hash URL's no longer trigger routes. Unless you add server-side support for all your Backbone routes, you need to add an event handler on the client side which captures appropriate links and calls .navigate() on the route