angular-route-segment icon indicating copy to clipboard operation
angular-route-segment copied to clipboard

Reversing routes needs to consider `hashPrefix` and `html5Mode`

Open airtonix opened this issue 11 years ago • 3 comments

related to #38 and #34 For references, I present an implementation of a simpler named routes module I've created before discovering angular-route-segment

Key points:

  • [x] service must be created as a provider so you have access to provider objects
  • [ ] store hashPrefix if html5Mode is true https://github.com/airtonix/angular-named-routes/blob/master/src/lib/named-routes.coffee#L21
  • [ ] generate url and prefix it https://github.com/airtonix/angular-named-routes/blob/master/src/lib/named-routes.coffee#L64

Apparently ~~in newer versions of angular~~ the hash prefix is implied when html5mode is false

  • https://github.com/airtonix/angular-named-routes/pull/15
  • http://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewriting/16678065#16678065

airtonix avatar May 26 '14 10:05 airtonix

The prefix is managed by $location service itself, it is not $routeSegment's responsibility. Moreover, links can be rewritten by the application or Angular itself, using its own knowledge about application configuration. It is all about separation of concerns.

artch avatar May 26 '14 18:05 artch

I understand that.

The problem is that the URLs returned by your filters still need to work.

Without prefixing. They do not.

Currently, your filters only output the following :

define [
    'lodash'
    'angular'
    'text!./common/templates/one.tpl.html'
    'text!./common/templates/two.tpl.html'
    'angular-route-segment'
    ], (_, angular, tplOne, tplTwo) ->

        angular.module 'app.routes', [
            'ngRoute'
            'route-segment'
            'view-segment'
            ]

            .config [
                '$routeSegmentProvider'
                '$routeProvider'
                '$locationProvider'
                ($routeSegmentProvider, $routeProvider, $locationProvider) ->
                    $locationProvider.html5Mode false
                    $locationProvider.hashPrefix "!"

                    $routeSegmentProvider
                        .when '/one', 'one'
                        .segment 'one',
                            template: tplOne

                        .when '/two', 'two'
                        .segment 'two',
                            template: tplTwo

                    $routeProvider.otherwise
                        redirectTo: '/'
            ]
<a href="{{ 'one' | routeSegmentUrl }}">Some Segment</a>

results in

<a href="/one">Some Segment</a>

This is fine if your backend is handling all the redirects, except that :

...
                ($routeSegmentProvider, $routeProvider, $locationProvider) ->
                    $locationProvider.html5Mode false
                    $locationProvider.hashPrefix "!"
...

Meaning, there isn't, so it doesn't, therefore all urls generated by the filter/service should include the required characters to make it work under those configured circumstances.

airtonix avatar May 27 '14 02:05 airtonix

routeSegmentUrl filter is just a wrapper around $routeSegment.getSegmentUrl(). If it was returning an URL with a hash, then this would not work:

$location.path($routeSegment.getSegmentUrl('one'));

You have to either rely on core Angular logic for rewriting html5 URLs in legacy hashbang mode (see "Html5 links rewriting" section at this docs page), implement your own URL rewrite logic, or just write like that:

<a href="#!{{ 'one' | routeSegmentUrl }}">Some Segment</a>

artch avatar May 27 '14 07:05 artch