AngularJS Превращение "/" в% 2F при маршрутизации

Question

Я изучаю AngularJS и сижу здесь, пытаясь заставить работать несколько разных шаблонов.У меня есть две ссылки, которые загружают две отдельные функции, но всякий раз, когда я нажимаю на мою вторую ссылку, она перезагружает первый шаблон, и URL-адрес не соответствует тому, что я установил для тега привязки:

<a href="/">List</a>
<a href="#/add/">Add</a>

Когда я нажимаюна второй ссылке URL становится "http://127.0.0.1:5500/#!/#%2Fadd%2F", но если я наберу" http://127.0.0.1:5500/#!/add/" вручную, я попаду на другой шаблон.Я получаю оригинальный шаблон из-за необычного URL.

Вот мой маршрут:

(function(){
var app = angular.module('pupperApp',['ngRoute']);

app.config(function($routeProvider){
    $routeProvider
        .when('/',{
            controller:'MainController',
            templateUrl: 'app/views/dogs.html'
        })
        .when('/add/',{
            controller:'AddController',
            templateUrl: 'app/views/add.html'
        })
        .otherwise({redirectTo:'/'});
});

} ());

Моя кодовая база доступна на github

edit: я обнаружил, что если я изменю второй якорь на

<a href="#!/add/">Add</a>

Это работает ... Кто-нибудь может помочь объяснить, почему это происходит?