0

In my angular app, I want to move to another html page after click on buton but it cannot move to the html page that i expected, I configed in route like that:

angular.module("abc", ["ngRoute"])
        .config(function ($routeProvider) {   
            $routeProvider.when("/checkout", {
                templateUrl: "/checkoutPage.html"
            });           
        });

In page html :

<a href="#/checkout" class="btn btn-default navbar-btn">Checkout</a>

After I hit on checkout button the link address show like this: http://localhost:12312/Index.html#!#%2Fcheckout

Thanks for your help.

Amit
  • 30,756
  • 6
  • 57
  • 88
Jane2
  • 67
  • 7
  • 1
    AFAIK your href should be like `checkout ` meaing it hsould not have hash.Also add `$locationProvider.html5Mode(true);` to config. – Navoneel Talukdar Dec 22 '16 at 07:18
  • @Marc **html5mode** requires some serverside setting in config file of a particular server. One other thing is that it will be broken if user refreshes the page if server handling is not done. – Jai Dec 22 '16 at 07:24

3 Answers3

1

Change your href url from <a href="#/checkout"> to <a href="#!/checkout"> Hope this will solve your issue.

Look here for more details.

Community
  • 1
  • 1
Nitheesh
  • 19,238
  • 3
  • 22
  • 49
0

Don't use hash in href.

<a href="checkout">checkout</a>

Aside from that better to include otherwise in routeconfiig.

angular.module("abc", ["ngRoute"])
        .config(function ($routeProvider) {   
            $routeProvider.when("/checkout", {
                templateUrl: "/checkoutPage.html",
                controller: "..."
            })
            .otherwise("/");
            $locationProvider.html5Mode(true);           
        });
Navoneel Talukdar
  • 4,393
  • 5
  • 21
  • 42
0

Its reading the state not the href tag so don't need to use hash tag for that.

<a href="/checkout" class="btn btn-default navbar-btn">Checkout</a>
Ahmer Khan
  • 747
  • 1
  • 10
  • 31