Angular routing not working on anchors

Question

I have just started working with Angular. Routing is not working with anchor tag. My code is

    (function(){
    'use strict';
    angular.module("PHC",["ngRoute"])
           .controller("AuthController", AuthController).
         config(function($routeProvider) {
           $routeProvider
          .when("/", {
              templateUrl : "templates/email.html",
              controller : "AuthController"
          })
          .when("/password", {
              templateUrl : "templates/password.html",
              controller : "AuthController"
          })
          .when("/confirm-password", {
              templateUrl : "templates/confirm-password.html",
              controller : "AuthController"
          })
          .when("/name", {
              templateUrl : "templates/name.html",
              controller : "AuthController"
          });
});

    function AuthController(){
        var auth=this;
    console.log("Hello");

    }   
})();

If I access my pages via browser URLs directly, it works fine but when I render them using 'href' of anchor tag, it does not work

<button class="next-step-button mt20"><a href="#password">Next</a></button>
<button class="next-step-button mt20"><a href="#email">Go to email</a></button>

Edit: when I click on anchors,it makes URLs like: http://localhost:3000/module2-solution/index.html#!/#%2Fpassword

Any help would be appreciated..

Answer 1

Hi try to do this in your routing definition:

 (function(){
    'use strict';
    angular.module("PHC",["ngRoute"])
           .controller("AuthController", AuthController).
         config(function($routeProvider,$locationProvider) {


    $routeProvider.otherwise({ redirectTo: "/" });

    $locationProvider.hashPrefix('!');


           $routeProvider
          .when("/", {
              templateUrl : "templates/email.html",
              controller : "AuthController"
          })
          .when("/password", {
              templateUrl : "templates/password.html",
              controller : "AuthController"
          })
          .when("/confirm-password", {
              templateUrl : "templates/confirm-password.html",
              controller : "AuthController"
          })
          .when("/name", {
              templateUrl : "templates/name.html",
              controller : "AuthController"
          });
});

    function AuthController(){
        var auth=this;
    console.log("Hello");

    }   
})();

and in your links ..

<button class="next-step-button mt20"><a  data-ng-href="#!password">Next</a></button>
<button class="next-step-button mt20"><a  data-ng-href="#!email">Go to email</a></button>

Answer 2

See if this works, change in href value

<button class="next-step-button mt20"><a  href="#!password">Next</a></button>
<button class="next-step-button mt20"><a  href="#!email">Go to email</a></button>

Answer 3

you are missing a / in your hrefs

Answer 4

You need add href like

href= "#/password"