Angular перенаправление на другое без обнаружения вида, но оно работает, когда я нажимаю кнопку "Назад"

Обновление Ни один из ответов или комментариев ниже не помогает, я хочу, чтобы кто-то дал мне правильный ответ.

Когда я помещаю этот url ниже в моем браузере - он берет меня за мой взгляд на фрукты и прекрасно работает,

http://localhost:53052/AppTest.aspx#/fruits

НО, когда я перехожу к home view и нажимаю кнопку и пытаюсь перейти к представлению 'fruits', тогда он перенаправляет меня на http://localhost:53052/AppTest.aspx#/routeNotFound

НО, когда я нажимаю кнопку браузера, он возвращается к просмотру фруктов, а затем, если я снова нажимаю, он возвращается к домашнему виду.

Итак, вот что происходит в древовидной структуре,

- > Нажмите кнопку "Просмотр дома" (следует перейти к fruits view, но вместо этого перейти к представлению routeNotFound)

- > Когда я нажимаю кнопку "Назад" в браузере, она переходит в fruits view, а затем, когда я нажимаю кнопку "назад", она переходит в home view

Вот мои маршруты,

(function () {
    'use strict';
    var app = angular.module('fruitApp');
    app.constant('routes', getRoutes());
    app.config(['$routeProvider', 'routes', routeConfigurator]);

    function routeConfigurator($routeProvider, routes) {
        routes.forEach(function (route) {
            $routeProvider.when(route.url, route.config);
        });
        $routeProvider.otherwise({ redirectTo: '/routeNotFound' });
    }

    function getRoutes() {
        return [
          {
              url: '/home',
              config: {
                  templateUrl: 'App/templates/home.html',
              }
          },
          {
              url: '/fruits',
              config: {
                  templateUrl: 'App/templates/fruits.html',
              }
          }
        ];
    }
})();

Основной вид (я использую его только для загрузки модулей и загрузки в него других видов)

   <div data-ng-app="fruitApp">
        <div data-ng-view="">
        </div>
    </div>

Домашний просмотр

<div data-ng-controller="home as vm">
     <div data-ng-click="vm.goToFruits()">click Me!</div>
</div>

Домашний контроллер

(function () {
    'use strict';

    var controllerId = "home";
    angular.module('fruitApp').controller(controllerId,
        ['$location', 'datacontext', home]);

    function home($location, datacontext) {
        var vm = this;
        vm.goToFruits = goToFruits;

        function goToFruits() {
            $location.path('/fruits');
        }
    };
})();

Фруктовый вид

<div data-ng-controller="fruits as vm"> fruits </div>

Контроллер фруктов

(function () {
    'use strict';

    var controllerId = "fruits";
    angular.module('fruitApp').controller(controllerId,
        ['$location', 'datacontext', fruits]);

    function fruits($location, datacontext) {
        var vm = this;
    };
})();

Я следую этому проекту, поэтому определяющий модуль, как я, не должен быть проблемой, если я не пропущу какой-либо концепции?

https://github.com/OfficeDev/Learning-Path-Manager-Code-Sample/blob/master/App/learningPath/learningPaths.js

Edit

Я попробовал изменить конфигурацию маршрута и некоторый код в контроллере, чтобы использовать ui-route, вместо этого теперь он возвращает меня к представлению плодов (как это делалось ранее), но это не перенаправляет меня на "иначе" маршрут, но он все еще меняется URL-адрес /routeNotFound..

Обновление

В результате я использовал href и ng-href для переключения просмотров.

Ответы

(function () {
    'use strict';
    var app = angular.module('fruitsApp', ['ngRoute']);
    app.constant('routes', getRoutes());
    app.config(['$routeProvider', 'routes', routeConfigurator]);

    function routeConfigurator($routeProvider, routes) {
        routes.forEach(function (route) {
            $routeProvider.when(route.url, route.config);
        });
        $routeProvider.otherwise({ redirectTo: '/home' });
    }

    function getRoutes() {
        return [
          {
              url: '/home',
              config: {
                  templateUrl: 'home.html',
                  controller:'home'
              }
          },
          {
              url: '/fruits',
              config: {
                  templateUrl: 'fruit.html',
                  controller:'fruits'
              }
          }
        ];
    }

    app.controller("home", ['$location',
      function($location) {
          this.goToFruits = function() {
              $location.path('/fruits');
          };
      }
    ]);

    app.controller("fruits", ['$scope', '$route', '$routeParams','$location', 
      function($scope, $route, $routeParams, $location) {

        $scope.fruitList = [
          {name:'Apple'},
          {name:'Apricot'},
          {name:'Banana'},
          {name:'Banana'},
          {name:'Bilberry'},
          {name:'Blackberry'} ];

          $scope.goBackHome= function(){
             $location.path('/home');
          };

      }
    ]);

})();