0

So I am trying to implement routing in my app. Here is a sample jsFiddle of what I am trying to do: http://jsfiddle.net/GeorgiAngelov/9yN3Z/114/

So far everything is working fine and as I am moving through the sections, my routing changes and everything is fine.

The problem is the following: when I manually type the section id in my url bar like this my local host : /section/s-3 I get redirected to s-1 and my page refreshes and I loose all of the sections and roots I have added so far. Sometimes it works, and I can switch between sections like that, but sometimes it refreshes, and it happens when I click enter twice.

It's an odd problem and I am not certain on how can I debug it. This is my actuall routing service.

app.config(function ($routeProvider) {
        $routeProvider
      .when('/', {
        redirectTo: '/section/1',
        templateUrl: '/tpl.html',
      })
      .when('/section/:sectionId', {
        templateUrl: '/tpl.html',
      })
      .otherwise({
        redirectTo: '/'
      });    
  });
Georgi Angelov
  • 4,338
  • 12
  • 67
  • 96

2 Answers2

0

I'we watched your application and from my point of view you're using an odd way to add DOM object to your view, kinda like jquery templating. Actually each times you click inside a section you're using a different scope and adding a root in a scope it's not visible to the others: instead you should use a service shared between the controllers, this way only the service contains all the sections and all the roots: angularjs services

Later I'will update your jsfiddle, hope this helps for now.

Community
  • 1
  • 1
Akallabeth
  • 343
  • 3
  • 9
  • the jsFiddle was 1% of my app. I am using much more complex methods of keeping my data, such as several services with shared data. So that is taken care of, but my problem is the refreshing of the page when choosing sections manually through the url. – Georgi Angelov Jul 22 '13 at 13:04
0

I tested your app on chrome and on firefox. Using chrome, if you select the url and type enter (without changing it) it reloads the page, so hitting enter twice will always refresh the page. Using firefox, this does not happen, so apparently you don't have this problem on FF (although the user can press the refresh button directly).

If you refresh the page, you obviously lose what you have inserted. You need to persist the information you want to preserve between refreshes. If you don't want to send this to your server, an alternative is to use html5 local storage. You can see an example here:

http://todomvc.com/architecture-examples/angularjs/#/

Wagner Francisco
  • 2,210
  • 1
  • 16
  • 15
  • Thank you for constructive answer. The problem with HTML5 is that I am forced to support IE8 and HTML5 is not fully functional in IE8. I think I will just not worry about this problem because I will be using a database later on so all that will be stored anyway. I was just afraid that I had a bad implementation of routing that was causing all of this. – Georgi Angelov Jul 22 '13 at 13:13
  • Cool. Depending on the type of information, you can try to use cookies or store it in the server session. – Wagner Francisco Jul 22 '13 at 16:16