Recently, I delved into the world of Angular and encountered an issue with routing not working correctly when using anchor tags. Here's the snippet of code causing trouble:
(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");
}
})();
Surprisingly, accessing pages directly via browser URLs works seamlessly. However, when attempting to render them using 'href' within anchor tags, glitch arises.
<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: Clicking on anchors generates URLs like: http://localhost:3000/module2-solution/index.html#!/#%2Fpassword
If anyone has a solution or insight to offer, it would be greatly appreciated.