I have angular app working well under /app#/index and another page on /newapp#/about
So my question is is there anyway, i can switch from url1 to url2?
Because I have different layouts for /app and /newapp
I know that i can use $location.path to change view, but that will change it to
/app#/index => /app#/about, which I don't want.
Any Ideas?
$location is only useful for observing the current location, and changing it to paths the app can route to. If you need to navigate the user to a location outside of the app, you'll need to $window.location.href = '/newapp#/about'.
If you are providing links via <a>, you should be alright. There are three scenarios (See "Html Link Rewriting") where AngularJS will let the browser navigate to the new URL normally:
There is a target attribute: Refresh /app
There is an absolute URI in href to another domain: Redirect to google
The absolute path (one beginning with /) has a different base than the current app: Redirect to /newapp
Related
I have a react app that's deployed that has multiple routes for different purposes. If I want to send a link to someone with a route (domain.com/route) it just redirects to the root url of domain.com.
I think it's something to do with SPAs in general, but I can't figure out what to add or where to add. Is it an issue with DNS? My site is deployed on Digital Ocean, but my domain is from google and it redirects from a subdomain (app.domain.com) so maybe that's the issue.
I had a similar issue with a different react app and I was able to fix it by adding this to my index.html:
<!-- Start Single Page Apps for GitHub Pages -->
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// MIT License
// https://github.com/rafgraph/spa-github-pages
// This script checks to see if a redirect is present in the query string,
// converts it back into the correct url and adds it to the
// browser's history using window.history.replaceState(...),
// which won't cause the browser to attempt to load the new url.
// When the single page app is loaded further down in this file,
// the correct url will be waiting in the browser's history for
// the single page app to route accordingly.
(function (l) {
if (l.search[1] === "/") {
var decoded = l.search
.slice(1)
.split("&")
.map(function (s) {
return s.replace(/~and~/g, "&");
})
.join("?");
window.history.replaceState(
null,
null,
l.pathname.slice(0, -1) + decoded + l.hash
);
}
})(window.location);
</script>
<!-- End Single Page Apps for GitHub Pages -->
But it still redirects from domain.com/route to app.domain.com without the route, which makes me think it's because of the app..
EDIT: However when I do app.domain.com/route it works, so I think the issue is with domain.com always redirecting to app.domain.com because of the way I set up my DNS. Which sort of changes the question, but I still don't know why that happens.
I have a url with paramenters in my react routes.
I can access the route via {Link} from react router dom as shown below. The page loads upon button click.
However when I refresh the page or try to access the URL via the address bar, I get a blank page and this error message
It works fine locally but the blank page comes up in production. I am hosting the website on heroku.
The best way to handle it is to add a base tag in your index.html.
<base href="/" />
I fixed the problem using the solution in the link below. I initially set my homepage to "." in my package.json and eventually changed it to my app domain
https://stackoverflow.com/a/66950806/6542175
The problem: When i go to any internal root, and press f5, it broke, givin 404. Like for example:
https://josuevalrob.github.io/jeval-web/sign-in. But if I go to the root it works fine: https://josuevalrob.github.io/jeval-web
I don't know how to solve this problem. There is a bunch of documentation about this, and I cant handle it.
This is the github repo: https://github.com/josuevalrob/jeval-web
This is the github Page: https://josuevalrob.github.io/jeval-web
And you can see, the package json have the home key:
"homepage": "https://josuevalrob.github.io/jeval-web",
Also the .env is currently empty, but i can add this:
PUBLIC_URL = "https://josuevalrob.github.io/jeval-web"
Nevertheless, it doesn't work.
I had added the homepage or the public_url, neither work.
Github pages doesn't really support single page applications. Single page applications require a server that serves the same page at every url and then the client renders the appropriate content based on the url. Hence the "single page". Github does not allow you to run server side code, so you can't write a server to serve your index.html at every route.
There is, however, a hack you can use to make this work. When you navigate to a route other than the root url, Github will serve a 404 page as you can see. Github allows you to customize this 404 page. So, you can make the custom 404 page your single page application and then it will be served at every route as required.
This repo explains the required steps to serve your single page as a custom 404 page on Github pages.
Basically it amounts to...
Copy this 404.html page to your repo as is
Add this redirect script to your index.html page
The only drawback is that the url is forced to redirect and quickly flashes the incorrect URL before redirecting. You can see an example of this by refreshing this page. If you want to avoid this, you need to look for hosting somewhere else that allows you to edit server side code and serve your index.html at every route
I had a similar issue with react app. I fixed it by using HashRouter instead of BrowserRouter in App component
I'm having trouble getting path lookup to work with a AngularJS v1.2.0 and PhoneGap/Cordova Android application. I've come pretty far with html5mode(true) by setting <base href="."/> in index.html and then changing $routeProvider.when('/') to $routeProvider.when('/android_asset/www/index.html'). After that I am able to get redirectTo('login') to reach $routeProvider.when('/login') and there render templateUrl: 'static/partials/login.html' as expected.
The problem I have is that if I instead try to redirect to the login page from my Javascript code with $location.path('/login');, the route is found but templateUrl loading fails with an insecurl exception.
I've tried whitelisting access to file:// by using the new angular-sanitize module, but that does not help.
How can I make $location.path() do the same things as redirectTo so that the partial is loaded? Or is there some other way to solve this problem?
UPDATE: I got a bit forward by adding a call to replace() after the path function, e.g.:
$location.path('/login').replace();
but that seems like a hack, and it still causes the templateUrl in the otherwise route to fail with the same exception.
Any ideas on what might be wrong? Is it that html5mode(true) just does not work at this moment with Phonegap and the only way to fix this is to set it to false and add hashtags to every path (like is done in the angular phonegap seed project)?
For future reference, this is how I managed to solve the problem:
AngularJS currently does not seem to support html5mode(true) inside a Cordova application because of the insecurl problem I reported. What I had to do is add
var h5m = (typeof html5Mode !== 'undefined') ? html5Mode : true;
$locationProvider.html5Mode(h5m);
which gives me the possibility to explicitly set html5Mode in the PhoneGap index.html with a global variable:
<script>
var html5Mode = false;
</script>
So now $location.path('/login') as well as redirectTo: 'login' works, but links in html files, don't. To get those working in PhoneGap, with html5Mode disabled, I had to add #/ in front of every link, e.g. login.
That makes PhoneGap work, but breaks the web page which uses History API with html5Mode(true). The last piece of the puzzle was to add <base href="/"/> to the web page's index.html (and leave it out of the index.html of the PhoneGap project.) So now even though I have a link that says #/login in the web page, I get to the url http://example.com/login and don't see any hashes in the address bar.
**
So in the end I have History API working in my web page and History API disabled in the PhoneGap project (where there really is no need for History API as there is no address bar). The only downside is the extra #/ I have to put in each template html file, but that is a minor annoyance compared to the ability to use all of the same html and javascript files for both web and mobile.
I had this same problem as well. I managed to fix it by skipping the leading slash in the route config:
$routeProvider
// route for the foo page
.when('/foo', {
templateUrl: 'foo.html', //previously: '/foo.html'
controller: 'fooController'
}) //etc.
I uploaded an AngularJS site to my gh-pages branch and pointed the DNS A records to 204.232.175.78. Now the site is live but I see a hash tag as part of the URL structure. Here are the two URLs one can see the home page of the site at
http://www.maxmythic.com/#/
http://siddhion.github.io/maxmythic_angular/#/
The URL I want visitors to enter and see in the address bar is simple maxmythic.com. If one enters maxmythic.com it redirects to http://www.maxmythic.com/#/.
How would I make the URL of the home page just maxmythic.com with out the www. and trailing /#/
In the app's main module's config function, use the html5mode() function of the $locationProvider. Read these docs for more info: http://docs.angularjs.org/api/ng.$locationProvider and http://docs.angularjs.org/guide/dev_guide.services.$location.
Example:
angular.module('myApp', []).
config(function($locationProvider) {
$locationProvider.html5Mode(true);
});