I use this routes controller in order to navigate to page A. At page A it is possible to navigate to page B.
function getRecordReportState() {
var state = {
name: 'auth.recordreport',
url: '/recordreport/:userId/:month/:year',
templateUrl: 'app/recordReport/recordReport/recordReport.html',
In page B I use this command to navigate back to page A:
function cancelAndGoBack() {
$window.history.back();
}
My question now would be if there is a possibility to navigate to page A programmatically where I also can set the parameter /:userId/:month/:year ?
Yes. You can simply do:
$state.go('auth.recordreport', {userId: 'someuser', month: 4, year: 2016});
Related
I built an app using routes in React Js. I have some pages in my app which are in my routes. Also, I have created an array:
const routes = [{
path: "/home",
title: "home"
},
{
path: "/about",
title: "about"
}
];
This array contains my breadcrumbs. The logic is next: if the URL matches the route from routes, I display the title from routes. But, I don't want use the about page. When I will click on about page I want to display also title from home page. The problem is when I click on about page I get the next error:
Cannot read property 'title' of undefined.
How can I hide this error?
You can use conditional (ternary) operator as follows:
const myvar = object ? object.name : undefined;
.when('/index', {
templateUrl: function ($params) {
return '/' + $params['language'] + '/template/home';
},
controller: 'homepagecontroller'
}
})
My web application home page url is index, on page load calling the template(index) and loading the content.
My requirement is on page(home page - index[url]) load index page content will be loaded but as per the router again calling the template call and loading the content, but the same behavior has to happen only on page url change not in page load of home page.
Thanks in advance.
I am assuming this is your problem:
You have a common layout/template for multiple pages and loading each page content using angular / AJAX. You don't want to execute this angular / AJAX loading when customer hits URL first time.
Here is the solution:
Load index / home page content using server side script at very first time and store a flag in JavaScript session storage / cookie.
Add an if condition in your route definition something like this:
.when('/index', {
// Get saved data from sessionStorage
var pageAlreadyLoaded = sessionStorage.getItem('pageAlreadyLoaded');
if (pageAlreadyLoaded) {
templateUrl: function ($params) {
return '/' + $params['language'] + '/template/home';
},
controller: 'homepagecontroller'
} else {
// Do Nothing
}
})
You can store a variable in session like this: sessionStorage.setItem("pageAlreadyLoaded", 1);
Hope this helps.
The backend has created user and needs the email to be confirmed and it has sent out an to the address (see below)
Please confirm your account by clicking
after clicking on the link the user goes to the frontend I have the following route setup using ui.router:
.state('confirmemail', {
url'/confirmemail',
templateUrl: 'client/view/confirmEmail.html' })
how do I get this to route to this state using the above link and how do I access the user and code?
thanks
You can use stateParams:
In the email:
Link
In your config:
.state('confirmemail', { url'/confirmemail/:id', ... })
In your controller:
var myId = $stateParams.id;
// Then lookup user with myId
The link the user clicks on should go to yoursite/confirmemail. Simple as that, just have them navigate to the route that matches the url in your state.
As for passing the information, I can think of a couple options. You could pass a querystring, yoursite/confirmemail?userId=123 or whatever, or you could set up your route to pass some sort of id (or whatever the information may be). Either would have basically the same result. Again, you would define this in your email link then capture it when that path is hit.
Example of passing id using angular:
.state('confirmemail', {
url: '/confirmemail/:id',
resolve: {
id: function ($stateParams) {
return $stateParams.id;
}
}
}
and set the link to yoursite/confirmemail/123 where 123 is the user id.
From there you can inject the id into a controller.
In ExtJs, what is the best way to handle Browser refresh?
Say, I've a page with two tabs A and B
and the token when tab A is active is #mytoken/:someidforA
and the token when tab B is actibe is #mytoken/:someidforB
How do we ensure that the page stays in the same tab when we refresh the browser?
I'm doing something like this using Router in ExtJs5
window.onbeforeunload = function() {
token = // get history token
MyApp.getController('Main').redirectTo(token);
}
and inside the ViewControllers -
routes: {
"#mytoken/:someidforA" : "loadA",
"#mytoken/:someidforB" : "loadB"
}
Is this a good way to do it?
I would personally use the documented routes
Example:
Ext.define('MyApp.view.main.MainController', {
extend : 'Ext.app.ViewController',
routes : {
'user/:id' : 'onUser'
},
onUser : function(id) {
//...
}
});
You can also define the default route with the defaultToken property:
defaultToken : 'home'
It seems like you are already using some of these features. If the URL is something like example.com/#user/4 then on page refresh the application can handle this route as it previously did and show the same page/section.
To restore all the tabs that were open before refresh you'd probably have to look at using something like localstorage to keep state across page refreshes
How do I create a submenu in Backbone? I have a main router and main navigationmenu and i want to add a submenu on for example the third page, with addiotional 3-4 anchors.
how do I approach this? Do i have to create some additional routers and "import/load" them in the specific view?
On the views side, you'd handle the submenu view in your third page view.
About the routes, if they're related to your third page, then try nested urls:
routes: {
"page/3": "thirdPageHome",
"page/3/{subPage}": "thirdPageSub"
}
Then in thirdPageSub, you'd resolve the sub path, and from there I'd dispatch the call to another router method:
Backbone.Router.extend({
routes: {
"page/3": "thirdPageHome",
"page/3/{subPage}": "thirdPageSub"
},
thirdPageSub: function( subRoute ) {
if ( subRoute === "foo" ) return this.thirdPageFoo();
},
thirdPageFoo: function() {
// do your stuff
}
});