Normally with JavaScript you can use the following to manipulate the history, but it does not work.
Example: What I want to achieve is to go to /clients/:id and then when I go back, I want to go to /blog/, doesn't matter which page i was on before.
$scope.changeView = function(clientId){
history.pushState({}, null, '/#/blog');
$location.path('/client/' + clientId);
};
However, this does not work in Angular.
Any idea how this could be solved?
As I am confused about what your question is.. (Are you just trying to find an Angular way of manipulating the history? Or are you trying to redirect?)
Something that may be of interest to you is the $location service on AngularJS.
I just used history.pushState(), null, '/aboutus') while on a page within my app, clicked a link, then went back and it seemed to load that '/aboutus' link just fine, so long as your Angular app is configured to route that path somewhere.
Related
I am building a simple MVP of an idea in jQuery and Rails 5. I would like to avoid introducing a front end framework for the purposes of the simple project.
In order to let users navigate with the forward/back button I made different templates with "routes" such as /profile and /network as follows.
I use popstate to change which handlebars template I render (in the onPopState function):
window.addEventListener('popstate', onPopState, true);
I use pushState when I navigate to a new page (I navigate just by swapping which handlebars template and event handlers I am showing):
history.pushState({page: 'home'}, 'Page Title | Home', app.client + '/home');
I have most of the functionality working. The only problem is that if I refresh the page or type in a URL like myapp.com/profile in the address bar directly I get logged out and/or see an error, either a 404 if the app is deployed, or a Cannot GET /profile if I am running on localhost.
I think the issue is that I need to implement some kind of routing on the front end, but I am not sure how / which to use. Are there simple ways to implement this with just jQuery / JavaScript?
Thanks!
I have created a mvc project but found I need to add a webforms page. I have tired a few variations of this but have only gotten 404 errors. Seen a few suggestions elsewhere and settled on this:
function ViewRunSheet() {
var route = document.getElementById('Route').value;
var routeDate = $("#RouteDate").find("input").val();
window.location.href = "./RunSheet.aspx?route=" + route + "&date=" + moment(routeDate).format('YYYYMMDD');
}
Has anyone got any ideas as to:
Why this method doesn't appear to work
If there is a better solution I should be using
Also its my first question so if I have missed anything major I will edit it in
EDIT This is Running locally on my system and is not deployed via IIS
EDIT Since posting I have been playing around and decided to test moving the web form out of my views folder directly into the root folder and now the code works. This is good however I am intrigued to know why if anyone knows
You may need to add below in route.config file to ignore the routing for aspx page
routes.IgnoreRoute("{resource}.aspx/{*pathInfo}");
This question may seem a duplicate and it can be. But I have tried the below solutions which do not seem to work:
$location.search('lang', null)
$location.url($location.path());
$location.$$search = {};
Question:
When I first redirected to my angular app Url looks like:
http://subdomain.domain.com/?lang=en-US#/UserList
As it hits my Asp.Net controller(on BeginExecuteReady) I process the language and set culture. And now want to remove the param and question-madrk i.e. "?lang=en-US".
And I have HTML5Mode off for the app. Some angular threads suggests its not possible as:
changing anything but the hash without html5 history will result in a
browser reload.
Please guide me towards light.
$window.location.search = ''
This is the code that worked for me.
In my backbone application I trying to tidy my URLs up a little bit, I am wanting something that looks like this,
http://develpoment.dev/dashboard
htttp://development.dev/project/create
What is happening at the moment is that if I navigate too, http://develpoment.dev/#dashboard then the hash gets stripped out and the page loads as I would expect it too.
However if I directly access http://develpoment.dev/dashboard then I get a 404 page not found, this it not great for users who want to bookmark or return an URL later, have I set something up incorrectly?
Here is how I initialize my Router.
$(function(){
App.Routes.Application = new App.Routes.app();
Backbone.history.start({ pushState: true });
});
404 is expected result as you dont have any page under http://develpoment.dev/dashboard URL
In case of single page application, all URLs under site domain should be mapped to one page, the bootstrap page you start application with.
I am working on an AngularJS app with several directives. The directive's templates are stored in a separate html file. When editing these template, my browser does not detect any changes after a reload and always uses a cached version. Any other changes to the source code are detected and lead to a reload.
I guess the problem is somewhat the $templateCache which seems to be used by AngularJS when loading the template.
What I found in the source code of AngularJS 1.0.2 is the following from line 4317 which is part of the compileTemplateUrl():
$http.get(origAsyncDirective.templateUrl, {cache: $templateCache})
I am wondering if anyone else had this kind of problem and if there is a way to tell AngularJS when to cache and when not.
I know this is an old question, but here's a simpler fix, although it's a bit of a hack, it works for me, and doesn't require you to do anything to $templateCache.
Whenever I run into this problem (I see it in directive templates, but also static JSON files), I add a query parameter to the end of the URL being loaded, like this:
...
templateUrl: "partials/template.html?1",
...
Whenever I make a changes to the template, and it's not reloading, I increment that number at the end. As the browser doesn't know if this might mean something special to the server, it should attempt to reload that changed URL whether it's cached or not. This will also make sure the file is reloaded in the production environment.
The template cache is stored in your browser, as this is a javascript app. You can actually feed the $cache manually or stop your browser from caching the templates (as it would seem that for production, cache won't be a problem), using developer tools.
For force feeding the cache:
function Main($cache) {
$cache.data['first.html'] = {value: 'First template'};
$cache.data['second.html'] = {value: '<b>Second</b> template'};
}
Main.$inject = ['$xhr.cache'];
See it working in this fiddle.
To stop your browser from caching the templates (cited from this Google Groups post, about this problem, exactly):
My team and I have ran into this same issue. Our solution for
development while using Chrome was to open Developer Tools, and select
the gear in the bottom right hand corner. Then select Network -
Disable cache.
This fixed all our partial/template caching issues.
app.controller('someCtrl', function ($scope, $cacheFactory, templateRequest)
{
$scope.refreshTemplate = function ()
{
var tpl = "<template name>";
$cacheFactory.get('templates').remove(tpl);
$templateRequest(tpl).then(function ok(){
console.log("Template "+tpl+" loaded.");
});
}
...
}
then when you call the refreshTemplate function you cause a re-load