Angular, Tabs and Deep Linking

2,483 views
Skip to first unread message

Raj

unread,
Apr 7, 2012, 5:24:28 PM4/7/12
to AngularJS
Does anyone have an example of using Angular with a tabbed interface
where each tab is a deep link?
Thanks in advance!
Regards,
Raj

Jason Berk

unread,
Aug 23, 2012, 4:52:36 PM8/23/12
to ang...@googlegroups.com
I'll do you one better....does anybody have *any* example of deep linking working at all?  I read this: https://groups.google.com/forum/?fromgroups=#!topic/angular/OCZxkDrRRTw and just got more confused.  I was expecting links to be prefaced with "#" but that's not the case I guess.  anyway, I've yet to get any deep linking example to work.

Jason

ssm...@getjive.com

unread,
Aug 23, 2012, 6:20:04 PM8/23/12
to ang...@googlegroups.com
The in depth tutorial has and example.
The confusing part is that when specifying routes you Do NOT put in the hash but when the routes operate they use the hash. At least for the default settings of the $location service.

The App Module

app/js/app.js:

  1. angular.module('phonecat', []).
  2. config(['$routeProvider', function($routeProvider) {
  3. $routeProvider.
  4. when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
  5. when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
  6. otherwise({redirectTo: '/phones'});
  7. }]);

Jason Berk

unread,
Aug 24, 2012, 9:31:10 AM8/24/12
to ang...@googlegroups.com, ssm...@getjive.com
I'd like to use angular, and one of my requirements is this deep linking ability.  I found this "recipe": http://docs.angularjs.org/cookbook/deeplinking

the problem (I think) is that I'm using a dynamic web project in eclipse with Jersey.  My client and server are the same project.  Jersey routes a call to /test to a JSP that is the "chrome".  When you click the links to switch the div, the jersey controller is seeing the request to /test/welcome and /test/settings and routing the request to my TestController which has no GET method set up for settings or welcome.  In other words, those links are "real" and are being handled by Jersey....as I would expect.

If I were using JQuery alone, I would have my links href to "#welcome" and "#settings".  That way I don't leave the page or send anything up to the server.  I just need something in JS to see the url changed and show / hide the appropriate DIVs.

I've read on other posts that Angular expects a rewrite rule or something like that to force an index.html response....ring any bells?

J Castillo

unread,
Oct 10, 2012, 8:43:59 PM10/10/12
to ang...@googlegroups.com
Andy Joslin wrote a terrific directive for this. Take a look: http://plnkr.co/edit/PjuAWn?p=preview




On Saturday, April 7, 2012 5:24:28 PM UTC-4, Raj wrote:

christophe....@gmail.com

unread,
Jan 2, 2013, 9:00:46 AM1/2/13
to ang...@googlegroups.com
This directive is really nice but it seems that Deep linking only works when tabs are inside a partial.

Plunker with the directive through a ng-view: http://plnkr.co/yVh0uI

=> You can switch tabs either through the tabs or through the links

Plunker with the directive without a ng-view: http://plnkr.co/ag8wvIN4Y07ToK0F0RMk

=> You can switch tabs through the tabs, but when you use the links, the location.path is changed but not the "active" state of the tabs

Could someone explain these "behaviour" please? (disclaimer: I'm an angularjs newbie :D)
Reply all
Reply to author
Forward
0 new messages