How do I implement `$locationProvider.html5Mode(true); - javascript

From what I understand doesn't $locationProvider.html5Mode(true); remove the hash from your URL?
While it does that for me only the home page seems to be ok when you refresh the page.
Isn't that what redirectTo: supposed to handle?
var rustyApp = angular.module('rustyApp', ['ngRoute','viewController',
'mm.foundation','angular-flexslider','ui.router'],
function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/partials/home.html',
controller: 'HomeController'
});
// When you put /home, it also automatically handles /home/ as well
$routeProvider.when('/work', {
templateUrl: '/partials/work.html',
controller: 'WorkController'
});
$routeProvider.when('/contact', {
templateUrl: '/partials/contact.html',
controller: 'ContactController'
});
$routeProvider.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true).hashPrefix('!');
});
And this is my html:
This is in the head:
<base href="/"/>
This is the naviagation...
<section class="top-bar-section uk-navbar-flip">
<ul class="uk-navbar-nav ">
<li my-active-link="/"><i class="uk-icon-home uk-icon-medium "> </i>home</li>
<li my-active-link="/#work"><i class="uk-icon-photo uk-icon-medium "></i> work</li>
<li my-active-link="/#contact"><i class="uk-icon-envelope-o uk-icon-medium "></i> contact
</ul>
</section>
UPDATE
I changed this in my app.js file.
$locationProvider.html5Mode(true).hashPrefix('!'); //changed this
to
$locationProvider.html5Mode(true);
And added this to a .htaccess file.
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
</IfModule>
However, this seemed to work when I was running a server via apache.
I suppose my problem was the static server which gulp spawns was not configured to handle that request. I am sure there is some add-on to gulp-open etc...

This is because the webserver will handle the request first, so if you don't have URL Rewriting in any form set up it will just look for a folder in the webserver with the name you have put in your 'route'.
If you're using a Node Express webserver, you can set the rewrites like this:
app.all('/*', function(req, res) {
res.sendfile(__dirname + '/index.html'); // Or whatever your public folder is
});
For Apache servers you could use a .htaccess, with something like this:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) /index.php/#/$1 // Might have to fiddle with the hash and/or other prefix you want to use
</IfModule>

From the docs on $location, it says that you need to have server-side rewriting for HTML5 mode to work with page refreshes. This page details the different server configurations.

Related

Uncaught SyntaxError: Unexpected token < in chunk.js

I need your help please!
I have made deploy and build of aplication. but when i redirect for any page i have this error:
Uncaught SyntaxError: Unexpected token <
I think it was because the browser await .html archive and chunk.js is open like this img
print from error
the route is fine, he finds the route, but don't open file.
before some search i found things like a .htaccess and i have tryied but doesn't works.
i have tryied these two models of .htacess on public/.htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
but it doesn't works too.
Server
const root = require('path').join(__dirname, 'client', 'build')
app.use(express.static(root));
app.get("*", (req, res) => {
res.sendFile('index.html', { root });
})
i don't have any webserver, sorry, but im a student, and im still learning...
please help guys!
If you using Create React App check your build/asset-manifest.json if have correct paths to the files. If not, change them manually or - what is better - change or set "homepage" value in package.json to proper one. And last tip - read carefully whole output of npm run build - it helped me. Whole bugfinding spends me 3 hours :(
you add the line of code below to index.html in the public folder
<base href="your root path">
Or you can refer to the link below:
https://skryvets.com/blog/2018/09/20/an-elegant-solution-of-deploying-react-app-into-a-subdirectory/

In angular js after reloading page it say error on server 404 can not found the page after using $locationProvider.html5Mode(true);

I use
$locationProvider.html5Mode(true); to remove # from url
http://seagullinteractive.com/#/about :-its work after reload
to
http://seagullinteractive.com/about :- its not work dont now the problem
You need to create .htaccess file in your root directory.
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
Need to put above rewrite rules. Then it will be fine. When you call http://seagullinteractive.com/about then your server will look for directory with name "about" which actually will not exist and you will get 404 as a result. You need to redirect to index.html(or whichever is your page that contains ng-app) if there is no resource found on server with requested URI.

AngularJS - Remove hash # using $locationProvider

I used $locationProvider to remove hashtag # from this url
http://localhost/angular-phonecat/app/#/phones
using the following code:
phonecatApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: 'PhoneListCtrl'}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: 'PhoneDetailCtrl'}).
otherwise({redirectTo: '/phones'});
$locationProvider.html5Mode(true);
}]);
and in index.html added this in the head
<base href="/angular-phonecat/app/">
this worked and my current url is:
http://localhost/angular-phonecat/app/phones
But when I directly access this url it is not showing the webpage because it is not calling the index.html file. Instead, it is showing the contents of /app/phones directory
I tried by creating an .htaccess file also
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ./index.html [L]
There is a small error in your rule, the rewrite rule requires one more parameter.
Furthermore, when you write RewriteCond %{REQUEST_FILENAME} !-d you prevent redirection if a directory with this name exists. Since /anular-phonecat/app/phones exist you need to also remove this line.
You dont need the RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico) condition, since files won't be redirecte thanks to the RewriteCond %{REQUEST_FILENAME} !-f condition
The result is:
RewriteEngine On
RewriteBase /angular-phonecat/app/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* ./index.html [L]
Edited response based on comments

AngularJs Routes and Refreshing

Routes is what I am using in AngularJs to load dynamic content through an ajax calls asynchronously. This is how I do that:
var $app = angular.module('app', ['ngRoute']);
$app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
$routeProvider
.when("/pop", {controller: "popCtrl", templateUrl: "partials/pop_test.html"})
.when("/dashboard", {controller: "dashBoardCtrl", templateUrl: "partials/dashboard.html"})
.otherwise({redirectTo: "/"})
$locationProvider.html5Mode(true);
}])
I also have a mini nav set up so that when I click on my links it loads those partials through the templatrUrl parameter
<ul>
<li>Home</li>
<li>Pop</li>
<li>Dashboard</li>
</ul>
This is all working great, when I click on my links it loaded the content I have set up in pop_test.html and dashboard.html
Now the problem that I am having.
When you click on the link for lets say dashboard the content loads just fine through ng-view and the routes work great BUT if the user reloads or refreshes the page and you're on lets say localhost/dashboard it will actually try to go to that link and locate a file named after whatever you have after / which in this case is a directory called dashboard.
So how can I make it so when the user refreshes or reloads the page he doesn't actually reload the /dashboard page therefor not getting a server error page not found.
As Alberto mentioned, the server needs to know what to do. In Angular's case, everything needs to be routed through the index.html when using $locationProvider.html5Mode(true); otherwise you'll run into what you are now.
To fix this you need to add a Server Rewrite rule which you can find an explanation of it, along with the different server versions, in ui-router's docs here.
You can also add a .htaccess file with the rewrite rules for index.html like so:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]

fuelphp routes to angular routes

I have routes and request handling mechanism written in fuelphp to calculate the template in server side.
Computing templates on server side is slower in my understanding and I would like to covert all routes to angular routing.
Most of the fuelphp code outputs angularjs views.
Is there a direct or quicker way to convert all php routes to angular routes.
Try this:
In your public folder make a .htaccess file and fill it with the following
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

Categories