New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rc11 seems to have added extra encoding to links #1037

Closed
andyneville opened this Issue Jun 11, 2012 · 11 comments

Comments

Projects
None yet
6 participants
@andyneville

andyneville commented Jun 11, 2012

I apologize for not including a jsFiddle, I couldn't figure out how to get a routing example working there!

In my module config I also add routing like (CoffeeScript):

    ($routeProvider) ->
      $routeProvider.when '/products/:id',
        template: 'partials/product.html'
        controller: @App.Controllers.ProductDetail

        ...

      $routeProvider.otherwise
        redirectTo: '/dashboard'

In my HTML (inside an ng-repeat) I have links similar to this:

    <a href="/#/products/{{product.id}}">{{product.title}}</a>

Until today clicking the link would navigate to /#/products/123 (for example), and properly route to that controller.

However, this morning I upgraded to rc11, and followed the upgrade steps (e.g., change template to templateUrl), and now when I click the link it navigates to /#/dashboard#%2Fproducts%2F123

I'm not sure if there's extra encoding being added now in rc11, or if the $routeProvider.otherwise functionality has changed, but as far as I can tell I'm using routing the way the tutorial says, and now it's not working w/ rc11.

@andyneville

This comment has been minimized.

Show comment
Hide comment
@andyneville

andyneville Jun 11, 2012

I found a similar issue discussed in Google Groups at https://groups.google.com/d/msg/angular/p6TkKUmXOhA/_LJ8Rf2Q71wJ

andyneville commented Jun 11, 2012

I found a similar issue discussed in Google Groups at https://groups.google.com/d/msg/angular/p6TkKUmXOhA/_LJ8Rf2Q71wJ

@IgorMinar

This comment has been minimized.

Show comment
Hide comment
@IgorMinar

IgorMinar Jun 11, 2012

Member

Your link seems to be incorrect.

Instead of :

 <a href="/#/products/{{product.id}}">{{product.title}}</a>

It should be:

 <a href="#/products/{{product.id}}">{{product.title}}</a>

Does that resolve the problem?

(PS: if you are using hash(bang) urls then your links must start with # and not /#, this is how HTML works and is not in any way related to Angular)

Member

IgorMinar commented Jun 11, 2012

Your link seems to be incorrect.

Instead of :

 <a href="/#/products/{{product.id}}">{{product.title}}</a>

It should be:

 <a href="#/products/{{product.id}}">{{product.title}}</a>

Does that resolve the problem?

(PS: if you are using hash(bang) urls then your links must start with # and not /#, this is how HTML works and is not in any way related to Angular)

@andyneville

This comment has been minimized.

Show comment
Hide comment
@andyneville

andyneville Jun 11, 2012

Thanks for the pointer about the leading slash being incorrect, that's good to know!

However, I can confirm that removing the leading slash does not resolve the issue, the link <a href="#/products/{{product.id}}">{{product.title}}</a> still takes me to /#/dashboard#%2Fproducts%2F123

andyneville commented Jun 11, 2012

Thanks for the pointer about the leading slash being incorrect, that's good to know!

However, I can confirm that removing the leading slash does not resolve the issue, the link <a href="#/products/{{product.id}}">{{product.title}}</a> still takes me to /#/dashboard#%2Fproducts%2F123

@ProLoser

This comment has been minimized.

Show comment
Hide comment
@ProLoser

ProLoser Jun 11, 2012

Contributor

Use ng:href instead of href

Contributor

ProLoser commented Jun 11, 2012

Use ng:href instead of href

@andyneville

This comment has been minimized.

Show comment
Hide comment
@andyneville

andyneville Jun 11, 2012

Thanks for the suggestion. I just changed to ng-href instead of href, and still see the same problem. And as someone pointed out in the Google Groups thread (https://groups.google.com/d/msg/angular/-/bdJwu5Jd_MwJ), this problem also occurs in angular-seed for rc11 (click the View 1/View 2).

andyneville commented Jun 11, 2012

Thanks for the suggestion. I just changed to ng-href instead of href, and still see the same problem. And as someone pointed out in the Google Groups thread (https://groups.google.com/d/msg/angular/-/bdJwu5Jd_MwJ), this problem also occurs in angular-seed for rc11 (click the View 1/View 2).

@IgorMinar

This comment has been minimized.

Show comment
Hide comment
@IgorMinar

IgorMinar Jun 11, 2012

Member

ngHref is not going to fix this. This is a regression. I was able to
reproduce it with angular-seed.

We'll issue a fix today.

/i

On Mon, Jun 11, 2012 at 1:59 PM, andyn3 <
reply@reply.github.com

wrote:

Thanks for the suggestion. I just changed to ng-href instead of href, and
still see the same problem. And as someone pointed out in the Google
Groups thread (https://groups.google.com/d/msg/angular/-/bdJwu5Jd_MwJ),
this problem also occurs in angular-seed for rc11 (click the View 1/View 2).


Reply to this email directly or view it on GitHub:
#1037 (comment)

Member

IgorMinar commented Jun 11, 2012

ngHref is not going to fix this. This is a regression. I was able to
reproduce it with angular-seed.

We'll issue a fix today.

/i

On Mon, Jun 11, 2012 at 1:59 PM, andyn3 <
reply@reply.github.com

wrote:

Thanks for the suggestion. I just changed to ng-href instead of href, and
still see the same problem. And as someone pointed out in the Google
Groups thread (https://groups.google.com/d/msg/angular/-/bdJwu5Jd_MwJ),
this problem also occurs in angular-seed for rc11 (click the View 1/View 2).


Reply to this email directly or view it on GitHub:
#1037 (comment)

@onpulse

This comment has been minimized.

Show comment
Hide comment
@onpulse

onpulse Jun 11, 2012

Thanks Igor! Can't wait to sink my teeth into Angular

onpulse commented Jun 11, 2012

Thanks Igor! Can't wait to sink my teeth into Angular

@mhevery mhevery closed this in 74fa65e Jun 12, 2012

@kylefinley

This comment has been minimized.

Show comment
Hide comment
@kylefinley

kylefinley Jun 12, 2012

Maybe I'm doing something wrong, but this still isn't working for me with hashbang urls. In Angular-seed I made these changes.

app.js

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: MyCtrl2});
    //$routeProvider.otherwise({redirectTo: '/view1'});
    $locationProvider.hashPrefix('!');
  }]);

index.html

  <ul class="menu">
    <li><a href="#!/view1">view1</a></li>
    <li><a href="#!/view2">view2</a></li>
  </ul>

Clicking view2 changes the url to:

_http://localhost:8000/app/index.html#!/!/view2_

Is the ! not to be used in the html?

Thank you,

Kyle

kylefinley commented Jun 12, 2012

Maybe I'm doing something wrong, but this still isn't working for me with hashbang urls. In Angular-seed I made these changes.

app.js

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: MyCtrl2});
    //$routeProvider.otherwise({redirectTo: '/view1'});
    $locationProvider.hashPrefix('!');
  }]);

index.html

  <ul class="menu">
    <li><a href="#!/view1">view1</a></li>
    <li><a href="#!/view2">view2</a></li>
  </ul>

Clicking view2 changes the url to:

_http://localhost:8000/app/index.html#!/!/view2_

Is the ! not to be used in the html?

Thank you,

Kyle

@IgorMinar

This comment has been minimized.

Show comment
Hide comment
@IgorMinar

IgorMinar Jun 12, 2012

Member

we are looking into this

Member

IgorMinar commented Jun 12, 2012

we are looking into this

@IgorMinar

This comment has been minimized.

Show comment
Hide comment
@IgorMinar

IgorMinar Jun 13, 2012

Member

can you please verify that this build works well for you: http://ci.angularjs.org/job/angular.js-misko/594/artifact/build/pkg/1.0.0rc12/

Member

IgorMinar commented Jun 13, 2012

can you please verify that this build works well for you: http://ci.angularjs.org/job/angular.js-misko/594/artifact/build/pkg/1.0.0rc12/

@kylefinley

This comment has been minimized.

Show comment
Hide comment
@kylefinley

kylefinley Jun 13, 2012

@IgorMinar

Yes it's working now. Thank you!

kylefinley commented Jun 13, 2012

@IgorMinar

Yes it's working now. Thank you!

IgorMinar added a commit to IgorMinar/angular.js that referenced this issue Jun 13, 2012

fix($location): correctly parse link urls in hashbang mode with prefix
This is a second fix for a regression that was introduced by 92a2e18.
The fix addresses scenarios when the $location service is configured with
a hash prefix.

Closes #1037
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment