I\'m learning AngularJS and there\'s one thing that really annoys me.
I use $routeProvider
to declare routing rules for my application:
The following information is from:
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag
It is very easy to get clean URLs and remove the hashtag from the URL in Angular.
By default, AngularJS will route URLs with a hashtag
For Example:
http://www.example.com
http://www.example.com/#/about
http://www.example.com/#/contact
There are 2 things that need to be done.
Configuring $locationProvider
Setting our base for relative links
$location Service
In Angular, the $location service parses the URL in the address bar and makes changes to your application and vice versa.
I would highly recommend reading through the official Angular $location docs to get a feel for the location service and what it provides.
https://docs.angularjs.org/api/ng/service/$location
$locationProvider and html5Mode
We will do this when defining your Angular application and configuring your routes.
angular.module('noHash', [])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/home.html',
controller : mainController
})
.when('/about', {
templateUrl : 'partials/about.html',
controller : mainController
})
.when('/contact', {
templateUrl : 'partials/contact.html',
controller : mainController
});
// use the HTML5 History API
$locationProvider.html5Mode(true); });
What is the HTML5 History API? It is a standardized way to manipulate the browser history using a script. This lets Angular change the routing and URLs of our pages without refreshing the page. For more information on this, here is a good HTML5 History API Article:
http://diveintohtml5.info/history.html
Setting For Relative Links
<base>
in the <head>
of your document. This may be in the
root index.html file of your Angular app. Find the <base>
tag, and
set it to the root URL you'd like for your app.For example: <base href="/">
Fallback for Older Browsers
In Conclusion
In Router at end add html5Mode(true);
app.config(function($routeProvider,$locationProvider) {
$routeProvider.when('/home', {
templateUrl:'/html/home.html'
});
$locationProvider.html5Mode(true);
})
In html head add base tag
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
thanks To @plus- for detailing the above answer
You could also use the below code to redirect to the main page (home):
{ path: '', redirectTo: 'home', pathMatch: 'full'}
After specifying your redirect as above, you can redirect the other pages, for example:
{ path: 'add-new-registration', component: AddNewRegistrationComponent},
{ path: 'view-registration', component: ViewRegistrationComponent},
{ path: 'home', component: HomeComponent}
If you are wanting to configure this locally on OS X 10.8 serving Angular with Apache then you might find the following in your .htaccess file helps:
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
RewriteBase /~yourusername/appname/public/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpg|jpeg|gif|txt)
RewriteRule (.*) index.html [L]
</IfModule>
Options +FollowSymlinks if not set may give you a forbidden error in the logs like so:
Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden
Rewrite base is required otherwise requests will be resolved to your server root which locally by default is not your project directory unless you have specifically configured your vhosts, so you need to set the path so that the request finds your project root directory. For example on my machine I have a /Users/me/Sites directory where I keep all my projects. Like the old OS X set up.
The next two lines effectively say if the path is not a directory or a file, so you need to make sure you have no files or directories the same as your app route paths.
The next condition says if request not ending with file extensions specified so add what you need there
And the [L] last one is saying to serve the index.html file - your app for all other requests.
If you still have problems then check the apache log, it will probably give you useful hints:
/private/var/log/apache2/error_log