Angular redirecting to otherwise without detecting view but it works when i click back button

Question

Update None of the answers or comments below help at all, I wish someone would give me the correct answer.

When I put this url below in my browser - it takes me my fruits view and works perfectly,

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

BUT when I go to my home view and click on button and try to navigate to 'fruits' view then it redirects me to http://localhost:53052/AppTest.aspx#/routeNotFound

BUT when I click on browser's back button it goes back to fruits view then if I click again then it goes back to home view.

So here is what happens in tree view,

--> Click on Home view button (should navigate to fruits view but it goes to routeNotFound view instead)

--> When I click on back button on browser, it goes to fruits view, then if I click back again then it goes to Home view

Here is my routes,

(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',
              }
          }
        ];
    }
})();

Main View (I only use it for loading modules and loading other views into it)

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

Home View

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

Home Controller

(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');
        }
    };
})();

Fruits View

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

Fruit Controller

(function () {
    'use strict';

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

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

I am following this project so defining module like I do shouldn't be an issue if I am not missing any concept ?

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

Edit

I tried change route config and some code in controller to use ui-route instead now it takes me to the fruits view (as it was doing before) but it's not redirecting me to 'otherwise' route anymore BUT it is still changing the URL to /routeNotFound..

Update

I ended up using href and ng-href for switching views.

Answer 1

i would suggest you to go simple , first make skeleton of your application with function routing and and required dependencies later on extend and enhance. one big mistake you have done is that you haven't included 'ngRoute' in your fruitApp. working example you can check on this plunker ng-routing example

(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');
          };

      }
    ]);

})();

Answer 2

You've got a lot of 'fluff' in your example there. I've stripped a bit of it out and you should be able to see the plunkr demo here - it helps to see if you run it without the frame - http://run.plnkr.co/plunks/40eDlZfZQnAJRWxeg1ge/# .

For me it looks like it works just fine. I can click the text to navigate to "fruits" controller, and I hit the 'back' button in the browser to go back to 'home'.

A few things about your code:

1. Your app.module needed to be declared with app.module('fruitsApp', ['ngRoute']); to ensure the dependencies are loaded.
2. I removed the 'datacontext' etc that your example code doesn't need to know about
3. I'm using basic templates rather than templateUrls in the routes.
4. I made the default route redirect to '/home' - does this make sense in your context?

My advice for you is to remove pieces of your code until it starts to work, then use this to figure out what exactly is causing the problems.