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.

Have you posted the right controller in the example? That looks like the fruits controller not home. — DoctorMick
– DoctorMick, Commented Feb 12, 2016 at 14:40
You could try to listen on $routeChangeStart and $routeChangeSuccess to try in more debugging. — Okazari
– Okazari, Commented Feb 12, 2016 at 14:55

Squiggle · Accepted Answer · 2016-02-16 13:43:16Z

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:

Your app.module needed to be declared with app.module('fruitsApp', ['ngRoute']); to ensure the dependencies are loaded.
I removed the 'datacontext' etc that your example code doesn't need to know about
I'm using basic templates rather than templateUrls in the routes.
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.

1st point is I think just a typo mistake, but I am yet to figure out what's wrong with my code when run on my browser, I still didn't got a chance to test your changes in different files but I will award you bounty as otherwise it will expire, thanks

Sheelpriy · Accepted Answer · 2016-02-22 07:02:13Z

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

Collectives™ on Stack Overflow

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

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.

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

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.

2 Answers 2

2 Comments

Comments

Related