If I type website.com/about-us/ in the address bar it breaks.
Says "Not Found" instead of loading the page
If I type website.com/#!/about-us in the address bar, it goes to the right page. // Added hashbang or #!
If I click a link on the page to website.com/about-us/ (without the hashbang), it works. How do I fix it so I can just go to the website without a hash bang from the address bar?
$locationProvider.html5Mode(true);
Update
Here's my server config
app.route('/').get(index.render); // UPDATE: This is why the home page was loading and I could click links
app.get('/.\*', function (req, res, next) {
if(req.url.substring(0,4) === "/api") {
return next();
} else {
res.send(index.render) // render is a function in the index controller
}
});
TL;DR: link clicks work as expected because your JavaScript has already loaded
Since your using a UI router, link clicks are "told" by Angular to go to the appropriate hashbang route unless you use $locationProvider.html5Mode(true);, which you are. So in this case, link clicks know to use html5Mode because the JavaScript in your page has already loaded.
When you enter the link in the address bar manually, the JavaScript hasn't had a chance to load, so it doesn't "know" to map the appropriate non-hashbang route to the correct view in your app.
To get the desired behavior, you'll need to configure your server to route correctly:
app.get('/some-page', doStuff);
Related
I'm currently using window.location.href.indexOf in my current project. I've noticed that it doesn't seem to work properly. For example this code that I made.
$(document).ready(function () {
//Show Sign Up drawer if user clicks on referral link
//It will show the Sign Up drawer once the word "referral" is found in the URL
if (window.location.href.indexOf("?referral") > -1) {
console.log('Sign Up Drawer');
$(".header-form-container.signup").addClass("show"),
}
});
This code what it does is to add a class in an element if the word referral is found in the URL. The add class being inserted will then slide a sign up drawer. Here is what happened during testing.
In my first test, I tried inserting the word referral in the url. After typing in the word and pressing the Enter key, the javascript I'm trying to run did not trigger
But after refreshing the browser or inserting the word again it now works. It currently shows the sign up section.
How can I ensure that the code window.location.href.indexOf will work in the first try or without refreshing the browser again. The website is built on a angular framework
If you only change the URL after the # sign, the page won't reload, since you're only changing the anchor part of the URL.
Your code wrapped in $(document).ready(function () { ... will only run once, when the page loads.
What you want to do is to add a listener for the route change event and run your code in that handler, something like this:
$rootScope.$on("$routeChangeSuccess", function() {
if (window.location.href.indexOf("?referral") > -1) {
console.log('Sign Up Drawer');
$(".header-form-container.signup").addClass("show"),
}
});
It does not work because your script (e.g: main.js) is executed only one time when the page load.
You might want to use window.historyto manipulate the browser history. You can update the query string with pushState()
History API
Hope it helps.
I am developing my first app using angular.js (v 1.6.3) and I am stuck on a very basic problem. I have created a list page for "User Group", and on this list I have a Edit button. On click event of this edit button, I want to redirect the record id to edit page.
Below is code for my button:
<button data-ng-click="editUserGroup(userGroup.id)">✎Edit</button>
Below is the code for editUserGroup
$scope.editUserGroup = function(userGroupId) {
//$location.path("/userGroup.html").search({c:'edit', id:userGroupId});
//$scope.$apply();
$window.location.href = './userGroup.html#/?c=edit&id='+userGroupId;
}
In short, I want to redirect to edit page and also need to pass 2 parameters,
?c=edit&id=<actual id here>
As you can see in my above code, $location.path() not working as it is not reloading new page, rather changing the URL only like <Some URL>/listUserGroup.html#!/userGroup.html?c=edit&id=1. If I use $window.location.href, I can redirect to new page but #/ is getting HTML encoded like below
<Some URL>/userGroup.html#!#%2F%3Fc=edit&id=1
How should I redirect to new page and pass both the parameters using angular.js?
So, taking hint from comments, I used window.location to redirect the page to next, and used window.sessionStorage to store the data I want to send to next page.
I just started playing around with Meteor and Iron Router to create a simple site. There are a few links on the nav bar of the site and one of them is called random. The idea is that when a user clicks it, a random post would display at the page.
Now Iron Router seems to prevent a page from reloading if it's the same link with the current one. That's a great feature except in my case I need it to reload so the user can see a new post.
Here's the relevant code:
Router.route('/random', function() {
console.log("running this!");
this.layout('SinglePostLayout', {
data: function () { return draw(Posts, {}) }
});
this.render('post');
The draw function returns a post in the collection. It's fun from perfect but that's not relevant here. I confirmed the code only ran once by using console.log.
Is there a way around this? I want to preserve the no reloading behaviour for all other links except for the random one. I've searched for answers for a while but couldn't find anything.
Thanks!
Since you are not using dynamic routes to show each post.
You can use the Location.reload() method from the window object, and use pure Javascript.
if(Meteor.isClient){
Template.home.events({
'click #randomHref':function(){
document.location.reload(true);
// Router.go('/') don't work.
}
})
}
I'm using the hot towel template, and I'm trying to understand how to navigate to a different view via a javascript call. When my page loads, it looks like this:
Then, if I click any other button, then click the apps button again, I wrote some test code to just take the user to the ping page. This is in the apps view model:
function activate() {
if (initialized) { router.navigateTo("#/ping"); return; }
// more code here (doesn't get hit the second time through)
}
But what happens is the URL is correctly the ping URL, and the ping button is selected, but the actual content is still showing the applications:
If I want to navigate to another page without clicking in the navbar at the top, how should that be done?
Your 'router.navigateTo('#/ping') is correct.
But when activate method is called, lots of heavy tasks are being done by durandal, it's too late for
your commanding, if you want to prevent opening a page and instead of that You'd like to go to
another page , then you can use 'CanActivate' method as following :
function canActivate() {
if (initialized) { router.navigateTo("#/ping"); return false;
/* return false to prevent opening a page */ }
else return true;
}
Also your application's performance will be boosted too
Good luck.
In facebook, whenever you navigate to a different URL (in some situations), the URL changes but there is no feeling sensed as going to a different page.
For example: when we view pictures in facebook, and when we move to the next image the URL changes in the address bar
FROM >facebook.com/foo?bar=foobar&xxxx=
TO > >>facebook.com/foo?bar=boobar&xxxx=
and this is not hashed change also
like
FROM >facebook.com/xxxxx#xxx=xxxx
TO > >>facebook.com/xxxxx#xxx=yyyy
How is this possible seamlessly. I mean how is that only a container is modified on URL change. URL change is supposed to navigate to a different page which can contain cached information from previous page and THIS navigation by URL change can be seen obviously by browser's screen going blank for a moment.
If using an iFrame, how to implement this ?
I use somehting similar to this
try {
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page", href);
loadPage(href);
}
catch(e) {
window.location.hash = "#!/"+href;
}
If it supports the HTML5 pushState them change URL, but if it doesn't then the fall back is the window hash.
wow. I just asked it few minutes ago ... use search next time ;)
Dynamic favicon when I'm proccessing ajax data
Modify the URL without reloading the page
There's a jQuery plugin called "address" that will watch for changes and call the function you give. I think it's just checking the URL every 100ms or so.
They issue an AJAX request for the data necessary to fulfil the "navigation", then tell the browser to "go to #xxx=yyy". Since such an anchor doesn't exist, the browser doesn't actually scroll down. However, it does record a new history entry, and also updates the URL so that if someone copy-pastes that URL, they will view the same object that the user is seeing, rather than just the original page.