AngularJS routing without the hash

Question

I m learning AngularJS and there s one thing that really annoys me   I use  routeProvider to declare routing rules for my application    routeProvider when   test       controller  TestCtrl    templateUrl   views test html      otherwise   redirectTo    test        but when I navigate to my app in browser I see app   test instead of app test   So my question is why AngularJS adds this hash   to urls  Is there any possibility to avoid it

User · Answer

try    locationProvider html5Mode true    More info at   locationProvider Using  location

User · Answer

In fact you need the    hashtag  for non HTML5 browsers   Otherwise they will just do an HTTP call to the server at the mentioned href  The   is an old browser shortcircuit which doesn t fire the request  which allows many js frameworks to build their own clientside rerouting on top of that   You can use  locationProvider html5Mode true  to tell angular to use HTML5 strategy if available   Here the list of browser that support HTML5 strategy  http   caniuse com  feat history

User · Answer

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 use the  locationProvider module and set html5Mode to true  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   To link around your application using relative links  you will need to set the  lt base gt  in the  lt head gt  of your document  This may be in the root index html file of your Angular app  Find the  lt base gt  tag  and set it to the root URL you d like for your app    For example   lt base href     gt    There are plenty of other ways to configure this  and the HTML5 mode set to true should automatically resolve relative links  If your root of your application is different than the url  for instance  my-base  then use that as your base    Fallback for Older Browsers   The  location service will automatically fallback to the hashbang method for browsers that do not support the HTML5 History API  This happens transparently to you and you won   t have to configure anything for it to work  From the Angular  location docs  you can see the fallback method and how it works    In Conclusion   This is a simple way to get pretty URLs and remove the hashtag in your Angular application  Have fun making those super clean and super fast Angular apps

User · Answer

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    lt IfModule mod rewrite c gt      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   lt  IfModule gt    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

User · Answer

Using HTML5 mode requires URL rewriting on server side  basically you have to rewrite all your links to entry point of your application  e g  index html   Requiring a  lt base gt  tag is also important for this case  as it allows AngularJS to differentiate between the part of the url that is the application base and the path that should be handled by the application  For more information  see AngularJS Developer Guide - Using  location HTML5 mode Server Side     Update  How to  Configure your server to work with html5Mode1  When you have html5Mode enabled  the   character will no longer be used in your urls  The   symbol is useful because it requires no server side configuration  Without    the url looks much nicer  but it also requires server side rewrites  Here are some examples   Apache Rewrites   lt VirtualHost   80 gt      ServerName my-app      DocumentRoot  path to app       lt Directory  path to app gt          RewriteEngine on            Don t rewrite files or directories         RewriteCond   REQUEST FILENAME  -f  OR          RewriteCond   REQUEST FILENAME  -d         RewriteRule   -  L             Rewrite everything else to index html to allow html5 state links         RewriteRule   index html  L       lt  Directory gt   lt  VirtualHost gt    Nginx Rewrites  server       server name my-app       index index html       root  path to app       location             try files  uri  uri   index html            Azure IIS Rewrites   lt system webServer gt     lt rewrite gt       lt rules gt          lt rule name  Main Rule  stopProcessing  true  gt           lt match url        gt           lt conditions logicalGrouping  MatchAll  gt             lt add input   REQUEST FILENAME   matchType  IsFile  negate  true    gt             lt add input   REQUEST FILENAME   matchType  IsDirectory  negate  true    gt           lt  conditions gt           lt action type  Rewrite  url       gt         lt  rule gt       lt  rules gt     lt  rewrite gt   lt  system webServer gt    Express Rewrites  var express   require  express    var app   express     app use   js   express static   dirname     js     app use   dist   express static   dirname        dist     app use   css   express static   dirname     css     app use   partials   express static   dirname     partials      app all       function req  res  next           Just send the index html for other files to support HTML5Mode     res sendFile  index html     root    dirname          app listen 3006     the port you want to use   See also   Advantages Disadvantages of HTML5 mode vs Hash mode AngularJS AngularJS - How to turn off hashbang mode

User · Answer

In Angular 6  with your router you can use   RouterModule forRoot routes    useHash  false

User · Answer

It is recommended to use the HTML 5 style  PathLocationStrategy  as   location strategy in Angular      Because   It produces the clean and SEO Friendly URLs that are easier for users to understand and remember  You can take advantage of the server-side rendering  which will make our application load faster  by rendering the pages in the server first before delivering it the client       Use Hashlocationstrtegy only if you have to support the older   browsers       Click here to know more

User · Answer

If you enabled html5mode as others have said  and create an  htaccess file with the following contents  adjust for your needs    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    Users will be directed to the your app when they enter a proper route  and your app will read the route and bring them to the correct  page  within it   EDIT  Just make sure not to have any file or directory names conflict with your routes

User · 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

User · Answer

Lets write answer that looks simple and short     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    lt html gt   lt head gt       lt meta charset  utf-8  gt           lt base href     gt   lt  head gt    thanks To  plus- for detailing the above answer

[javascript] AngularJS routing without the hash '#'

Examples related to javascript

Examples related to angularjs