How to config routeProvider and locationProvider in angularJS

Question

I want to active html5Mode in angularJS  but I don t know why it s not working  Is there anything wrong with my code   angular      module  myApp           config function  locationProvider   routeProvider             locationProvider html5Mode true            routeProvider when                   templateUrl   partials home html               controller  HomeCtrl                       routeProvider when   tags  tagId                 templateUrl   partials result html                controller  TagResultCtrl                        routeProvider otherwise  redirectTo    home   controller  HomeCtrl               in html     lt a href  tags   tag id    gt  lt img data-ng-src    tag imageUrl    gt  lt  a gt

User · Answer

Try this  If you are deploying your app into the root context  e g  https   myapp com    set the base URL to      lt head gt     lt base href     gt         lt  head gt    Angular Documentation

User · Answer

Following is how one can configure  locationProvider using requireBase false flag to avoid setting base href  lt head gt  lt base href     gt  lt  head gt    var app   angular module  hwapp     ngRoute      app config function  locationProvider        locationProvider html5Mode           enabled  true          requireBase  false

User · Answer

The only issue I see are relative links and templates not being properly loaded because of this    from the docs regarding HTML5 mode     Relative links      Be sure to check all relative links  images  scripts etc  You must either specify the url base in the head of your main html file   lt base href   my-base  gt   or you must use absolute urls  starting with    everywhere because relative urls will be resolved to absolute urls using the initial absolute url of the document  which is often different from the root of the application    In your case you can add a forward slash   in href attributes   location path does this automatically  and also to templateUrl when configuring routes  This avoids routes like example com tags another and makes sure templates load properly   Here s an example that works    lt div gt       lt a href     gt Home lt  a gt          lt a href   another  gt another lt  a gt          lt a href   tags 1  gt tags 1 lt  a gt   lt  div gt   lt div ng-view gt  lt  div gt    And  app config function  locationProvider   routeProvider       locationProvider html5Mode true      routeProvider      when              templateUrl    partials template1 html          controller   ctrl1              when   tags  tagId           templateUrl    partials template2 html          controller    ctrl2              when   another           templateUrl    partials template1 html          controller    ctrl1              otherwise   redirectTo                If using Chrome you will need to run this from a server

User · Answer

Simple-Solution  I use a simple Python HTTP server   When in the directory of the Angular app in question  using a MBP with Mavericks 10 9 and Python 2 x  I simply run   python -m SimpleHTTPServer 8080  And that sets up the simple server on port 8080 letting you visit localhost 8080 on your browser to view the app in development   Hope that helped

User · Answer

AngularJS provides a simple and concise way to associate routes with controllers and templates using a  routeProvider object  While recently updating an application to the latest release  1 2 RC1 at the current time  I realized that  routeProvider isn   t available in the standard angular js script any longer    After reading through the change log I realized that routing is now a separate module  a great move I think  as well as animation and a few others  As a result  standard module definitions and config code like the following won   t work any longer if you   re moving to the 1 2  or future  release   var app   angular module  customersApp         app config function   routeProvider          routeProvider when                controller   customersController           templateUrl    app views customers html                 How do you fix it    Simply add angular-route js in addition to angular js to your page  grab a version of angular-route js here     keep in mind it   s currently  a release candidate version which will be updated  and change the module definition to look like the following   var app   angular module  customersApp     ngRoute       If you   re using animations you   ll need angular-animation js and also need to reference the appropriate module    var app   angular module  customersApp     ngRoute    ngAnimate       Your Code can be as follows       var app   angular module  app     ngRoute             app config function  routeProvider          routeProvider          when   controllerone                     controller   friendDetails                   templateUrl   controller3 html                                    controller   friendsName                   templateUrl   controller3 html                                 when   controllerTwo                 controller   simpleControoller               templateUrl   views html                      when   controllerThree                 controller   simpleControoller               templateUrl   view2 html                      otherwise               redirectTo

User · Answer

you could try    lt a href    controllerone  gt Controller One lt  a gt     lt a href    controllerTwo  gt Controller Two lt  a gt     lt a href    controllerThree  gt Controller Three lt  a gt    lt div gt       lt div ng-view    gt  lt  div gt   lt  div gt

[angularjs] How to config routeProvider and locationProvider in angularJS?

Examples related to angularjs