avoid routing of hash-less urls with ng-route - javascript

Say, I am browsing localhost/index.html#/view1, and I have a link pointing to localhost/index.html . When I click it, angular process it through its ng-route module and it falls into my redirect clause.
this is an extract from the route config:
$routeProvider
.when( "/view1", route1 )
.otherwise({redirectTo:'/view1'}); // localhost/index.html clicks fall here
I could use a ng-click and then redirect javascriptly with location.href, but this is not a desirable solution because I would lose the href link(SEO, bookmark, tabs).
tl;dr
How do I tell angularJs ng-route not to process urls without hash ?
EDIT: I do not user html5 mode and do not plan on using it.

If you are asking about angular routing service ignoring the url links. See documentation of $location
In cases like the following, links are not rewritten; instead, the
browser will perform a full page reload to the original link.
Links that contain target element
Example: link
Absolute links that go to a different domain
Example: link
Links starting with '/' that lead to a different base path when base is defined
Example: link

Related

How change URL and don't reload page in AngularJS

My AngularJS project uses html5mode, I do these codes to open html5mode
In HTML:
...
<base href="/features-A/">
...
In JS:
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5mode(true)
}])
NOTE: the /features-A/ is not an actual folder in my project, it is just a behavior defined in AWS CloudFront, Because we also have some URL /features-B point to other projects, We only need to know that: Whether it is accessed via "http://myhost.com" or "http://myhost.com/features-A/" is the entry file for my project: index.html
Here is what the browser does:
when going to my "Sign In" page, The URL in the address bar is
http://myhost.com/features-A/signin
When going to "Home" page, The URL in the address bar is
http://myhost.com/features-A/ome
As we see, AngularJS changed the URL via History API add /features-A/ inside to the URL
What I want
when people access "Sign In", The URL does not have /features-A/:
http://myhost.com/signin
When people access the "Home" page, The URL has /example:
http://myhost.com/features-A/home
This will make our website looks like the Sign In page is a system that is independent and outside /features-A/.
What I tried
I have tried some solutions however they haven't worked:
Set base href Dynamically In stateChangeSuccess event but URL still changed
Use HTML5 history API pushState and replaceState function, this way would cause page refresh indefinitely
So, Is there any solution to solve this problem?
how do not you create a new virtual host?
via php
php -S localhost:8080
type this Command in your folder's project

angularjs route to match $window.location

I want to reload the page with different html page using angularjs $window, the documation says:
Page reload navigation
The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API, $window.location.href.
So I set the loaction to the page $window.location.href = '/transaction';
and the matching route on config block:
app.config(function($routeProvider) {
$routeProvider
.when('/transaction', {
templateUrl : 'JavaScript/directives/modelHTML/Transaction.html',
controller : 'endProcessModelController'
});
});
But instrad of Transaction.html page I get Error 404: SRVE0190E: File not found: /transaction with the route mydomain.com/UI/transaction.
BTW - templateUrl url's works fine in other place like UImodel so the problam is the navigation I think.
Set the location to the page $window.location.href = '#/transaction'; .
'#' indicating location the startpage which is normally index.html. so the link will be index.html#/transaction.Since its a single page app
i think in your config do
'/UI/transaction' instead of `/transaction`
and in the link do $window.location.href = '#/UI/transaction'
Is the mydomain.com/UI/transaction address correct (you use html5 mode)?
Does the problem occur when you try to enter directly into mydomain.com/UI/transaction?
If so, the problem is wrong server configuration (eg .htaccess file).
Try this
$location.path($window.location.origin +'/transaction');
And if you feel all the routes have something extra after the origin you can set a <base href="..."> for that and tell angular from where to take the rest amount of text for route purpose.
If you redirect the page with your_origin/transaction your browser will make a request to the server of /transaction, which the server will be not able to understand and 404 will come. But the route is client side (browser) routeing, so If you are routing to route /abc your javascript code is interpreting that, and invokes the corrosponding operations, (might be a different call to server for the html template or some data dependency, and then instantiating the controller and attach to view). So the moment you are trying to route your javascript code should be loaded.
Either you go for a ui-router where the route comes after # and this allow the browser to play after the text of (#) and not to reloading.
Or, make your server such a way, If a unidentified request comes you should return the base (index) page, so it will load all the scripts and that js will do the rest. (But obviously you will loose all the existing data in that state)

Angular adding a hashtag at the end of file path url in $location

So, some quick context: I'm building an electron app, so all paths/urls are from file system. Web window starts with a small form, with user/password, and then it redirects to the main app that uses angular. The form is using GET, by the way.
After the redirect, the plan was to get the query parameters with $location, but angular is adding a hashtag and slash at the end of it, and when I try to $location.search() it gives me an empty object.
$location.absUrl() is returning: file:///C:/blablabla/main.html?user=abc&password=123#/
So my guess is that hashtag at the end is ruining all my plans. And it's weird, because I'm not using any $route/$location/$state configuration. By the way, the window.location object has the correct path without the hashtag, so I'm guessing this is angular's fault.
I did some search and found some recommendations to use html5Mode, but after trying it seems to not work the way I need, since it needs a baseurl tag with a path.
Any help is going to be appreciated, thanks

hard refresh of browser page and then redirect to a url using javascript

I am trying to reload the page and redirect it to another one,
or just redirect it to another one but I can't do that by
window.location.href
or
windown.location
as I have an Angular Single Page app which catches the route and instead of reloading the page opens the partials directly
I did try -
window.location.reload(true)
but it reloads the page and cannot change the url
I have also tried -
window.location.assign
and
window.location.replace
Is there any way to do this?
There are three cases where AngularJS will perform a full page reload:
Links that contain target element
Example:
link
Absolute links that go to a different domain
Example:
link
Links starting with '/' that lead to a different base path when base is defined
Example:
link
Updated:
Using javascript:
The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API: $window.location.href.
See:
https://docs.angularjs.org/guide/$location
https://docs.angularjs.org/api/ng/service/$location
For redirect to different page you should use
$window.open('url', '_self')
Which will load your page again.
try
window.location = url;
do remember that the url must have a protocol i.e http:// or https://
So you need to change the hash on the end of the URL? i.e. from #/ to #/otherpage/ ?
If so, location.hash = "/otherpage/";
According to https://docs.angularjs.org/guide/$location, if AngularJS is using HTML5 mode, it never performs a full page reload in a modern browser.
HTML5 mode
In HTML5 mode, the $location service getters and setters interact with the browser URL address through the HTML5 history API. This allows for use of regular URL path and search segments, instead of their hashbang equivalents. If the HTML5 History API is not supported by a browser, the $location service will fall back to using the hashbang URLs automatically. This frees you from having to worry about whether the browser displaying your app supports the history API or not; the $location service transparently uses the best available option.
Opening a regular URL in a legacy browser -> redirects to a hashbang URL
Opening hashbang URL in a modern browser -> rewrites to a regular URL
Note that in this mode, Angular intercepts all links (subject to the "Html link rewriting" rules below) and updates the url in a way that never performs a full page reload.
(Emphasis mine)
Since Hashbang mode is the default, the code must be setting HTML5 mode somewhere.

How to refresh page with angular.js view?

I have a homepage link that loads /register html page. But when I change css on the /register page and want to see it I have to go back to my localhost and then click the link again so the page loads again with new css. This is painfully time-consuming, is there a way to link /register with the page/route? Or at least remove /register from URL (so that localhost is only url for the whole app) so when the user refreshes the homepage welcomes him?
Homepage link:
REGISTER
View gets loaded like this
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when("/register", {
templateUrl: "/register",
controller: "registerController"
})
.otherwise("/");
$locationProvider.html5Mode(true);
}]);
This is an angular mechanic and is explained more in a recent question that I answered AngularJS + UI-Router - Manually Type URLs in HTML5 Mode without HashBang
Easy work around: use localhost/#/register instead to get to the page.
Since you are using
$location.html5mode(true);
This issue is directly related to how the files are being served to the browser. Your angular app itself only has one access point and that is your index.html page. When you type into your browser localhost/register, it is looking for the register directory, not the actual angular route. Since you've enabled html5 mode, it removed the hash bangs, which looks nice, but that requires additional configuration to be able to access the views individually without them.
Additional: If you want to remove the route URLs altogether, you will need to use stateProvider instead of routeProvider
Related article regarding stateProvider: Angular ui-router: Can you change state without changing URL?
Set in you html
<head>
<base href="/yor base url">
</head>

Categories

Resources