Is it possible to redirect to index.html page from any other module page in an application using angular 7?
Well, this is not the "Angular way" to do it, but it is works.
Create a new typescript file (e.g. locationUtils.ts) and add this function to it
export function goToIndexPage(){
let index = ""; //location of your index page
window.location.href = window.location.origin + window.location.pathName + index;
}
Then just use it from anywhere
In addition, you should take care about # sign in your path if you are using it
Related
Im new to nextjs, and Im checking if it will be good for the app that will have pretty complex and messy internal navigation. Just checked their documentation and I see that they recommend usage
of Link component like this <Link href="/your_path">Path</Link>. A bit scary is that I have to provide 'your_path' as a string so every time i change page file name I have to manually update code that redirects to this page. Is there any solution that allows me to define routing on my own so I can write something like (pseudocode)
routes = [
...
{
page : 'page_name',
path : 'path_to_page'
}
...
]
So instead of using string I can do <Link href="{route.path}">Path</Link> or Im condemned to use this file-system based router with all consequences?
The simple answer is yes!
When you want to change a user route in NextJs you have 2 options,
The first is with the <Link> Element that you can specify a href to where it directs.
And you also have a useRouter hook for more complex routing for example if the user does an action that requires moving him into a different route you can do it internally in your handlers.
For more information about useRouter hook.
What I usually do is storing my routes in an object
const ROUTES = {
HOME: "/",
ABOUT: "/about"
}
and wherever you call routes you just use the object so F.E
With Link tag
<Link href={ROUTES.ABOUT}>ABOUT PAGE</Link>`
with useRouter hook
// Inside a React Component
const router = useRouter();
const handleNavigateToAbout = () => {
router.push(ROUTES.ABOUT);
}
return (
// SOME JSX
<button onClick={handleNavigateToAbout}> Go to about page! </button>
)
I'm trying to create a nested route inside my nextjs project, but i'm receiving a 404 page not found when trying to request the page.
I have a route named /dashboard/repository/blender where blender is a dynamic name that the user can input and that works fine.
But the next step is then to create a subpage for that dynamic route which is named tags, and that's where I receive the 404. (/dashboard/repository/blender/tags)
Here's a screenshot of what i've tried to achieve the tags nested routing
Secondly I have also tried doing the following
What can I do to achieve this ?
Try that structure please
dashboard (folder)
-repository (folder)
--[blender] (folder)
----tags.tsx (file)
example urls
/dashboard/repository/blender/tags
/dashboard/repository/surrender/tags
...
In your component, you can get it like below
tags.tsx
import { useRouter } from 'next/router'
const C = () => {
const router = useRouter()
const { blender } = router.query;
console.log(blender)
}
Solved it with
- /dashboard/repository/[repository]/index.js
- /dashboard/repository/[repository]/tags.js
I have a SPA, I want to use routing for ng-view.
I have the code included in a page at domain.com/folder/dashboard.aspx
This is just a piece of that existing page, I can't move it elsewhere.
When I use route /list it alters my url to domain.com/folder/list/ which works, but breaks the ability to refresh the page (and gives a 404 since dashboard.aspx is not a default page, nor can it be)
How can I keep the url as domain.com/folder/dashboard.aspx/list?
I did try to setup my routes as dashboard.aspx/list and other various similar adjustments, but didn't have any luck.
Just like what #Claies said, it should be handled in your server config, just gonna drop my route config here in case you haven't tried this yet
var routeWithoutResolving = function (template: string, title?: string, style?: string) {
var name;
var slashIdx = template.indexOf('/');
if (slashIdx !== -1) {
name = template.substring(0, slashIdx);
template = template.substring(slashIdx + 1);
} else {
name = template;
}
var templateUrl = '/folder/' + template + '.aspx/';
return {
templateUrl: templateUrl,
title: title,
style: style,
area: _.capitalize(name),
page: template,
reloadOnSearch: false
}
}
Usage
.when('/domain.com/folder/dashboard.aspx/list', routeWithoutResolving ('folder/dashboard.aspx'))
I figured it out.
You can't use HTML5 mode, you have to be using Hashbang.
I set my routes as normal, /list and /list/item
For my links, I just used full urls, with the Dashboard.aspx#!/list/item and /list
I also removed the base tag from the html page
I was hoping anyone could give some input on this,
I'm creating a meteor app in which I would like to use bootstrap to creating the admin environment, but have the visitor facing side using custom css. When I add the bootstrap package to my app using meteor it's available on every page, is there a way to restrict the loading of bootstrap to routes that are in '/admin' ?
When you add bootstrap package it's not possible. You can, however, add bootstrap csses to public directory and then load them in a header subtemplate that will only be rendered when you're in the dashboard.
EDIT
But then how would you go about creating seperate head templates?
Easy:
<head>
...
{{> adminHeader}}
...
</head>
<template name="adminHeader">
{{#if adminPage}}
... // Put links to bootstrap here
{{/if}}
</template>
Template.adminHeader.adminPage = function() {
return Session.get('adminPage');
}
Meteor.router.add({
'/admin': function() {
Session.set('adminPage', true);
...
}
});
DISCLAIMER: I am unsure of a 'meteor way' to do this, so here is how I would do it with plain JS.
jQuery
$("link[href='bootstrap.css']").remove();
JS - Credit to javascriptkit
function removejscssfile(filename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
var allsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
}
}
removejscssfile("bootstrap.css", "css")
However, doing that would complete remove it from the page. I am not sure whether meteor would then try to readd it when a user goes to another page. If that does not automatically get readded, then you have an issue of bootstrap not being included when someone goes from the admin section to the main site, which would break the look of the site.
The way I would get around that would be to disable and enable the stylesheets:
Meteor.autorun(function(){
if(Session.get('nobootstrap')){
$("link[href='bootstrap.css']").disabled = true;
}else{
$("link[href='bootstrap.css']").disabled = false;
}
});
There my be other bootstrap resources which may need to be removed, take a look at what your page is loading.
To use jQuery in the same way but for the javascript files, remember to change link to script and href to src
From my tests, Meteor does not automatically re-add the files once they have been removed so you would need to find some way of re-adding them dynamically if you want the same user to be able to go back and forth between the main site and the admin site. Or simply if the http referrer to the main site is from the admin, force reload the page and then the bootstrap resources will load and everything will look pretty.
P.s. make sure you get the href correct for the jQuery version
If somebody is interested in including any js/css files, I've written a helper for it:
if (Meteor.isClient) {
// dynamic js / css include helper from public folder
Handlebars.registerHelper("INCLUDE_FILES", function(files) {
if (files != undefined) {
var array = files.split(',');
array.forEach(function(entity){
var regex = /(?:\.([^.]+))?$/;
var extension = regex.exec(entity)[1];
if(extension == "js"){
$('head').append('<script src="' + entity + '" data-dynamicJsCss type="text/javascript" ></script>');
} else if (extension == "css"){
$('head').append('<link href="' + entity + '" data-dynamicJsCss type="text/css" rel="stylesheet" />');
};
});
}
});
Router.onStop(function(){
$("[data-dynamicJsCss]").remove();
});
}
Then simply use:
{{INCLUDE_FILES '/css/html5reset.css, /js/test.js'}}
in any of your loaded templates :)
I am using routing in asp.net 4 webforms. I have a theme dll which contains all the images, css and js files required for look and feel. I have only 1 page which dynamically loads the control in the page. I use routing to distinguish the request. Following routes are defined:
routes.Ignore("{resource}.axd/{*pathInfo}");
routes.MapPageRoute("Default-All-Pages", "Pages/{*OtherParams}", "~/Default.aspx", false);
Handler for managing the embedded resources is already defined. When the application is executed it by virtue of code, redirects the request to default.aspx. it then goes ahead to load the css file and again routes the request to default.aspx.
I want it to route the css/jpg request to virtual path handler and not the page. What route should I define so that the request for files will not be handled by default.aspx page?
routes.Ignore("{*allaspx}", new { allaspx = #".*\.aspx(/.*)?" });
routes.Ignore("{*allcss}", new { allcss = #".*\.css(/.*)?" });
routes.Ignore("{*alljpg}", new { alljpg = #".*\.jpg(/.*)?" });
routes.Ignore("{*alljs}", new { alljs = #".*\.js(/.*)?" });
This solved my problem.
The same way you're ignoring HttpHandlers, you can add ignore rules for css and jpg files:
routes.Ignore("{resource}.css/{*pathInfo}");
routes.Ignore("{resource}.jpg/{*pathInfo}");
These will be excluded from the route table and will be handled by any registered handlers/modules/ISAPI filters.