cookbook deeplinking example - 404

1,121 views
Skip to first unread message

AJ Mercer

unread,
Feb 11, 2012, 6:49:46 PM2/11/12
to ang...@googlegroups.com
Hello,

I have copied the example code from
     http://docs-next.angularjs.org/cookbook/deeplinking 
and put it in /index.html.

When I click welcome or settings I am taken to
/welcome & /settings with a 404

If I change the link to #welcome and #settings I am taken to /#/welcome & /#/settings
and it works

takes you to
    
If you just try go to
you get a 404 - so the demo is working on docs-next.

Is there something I need to do that is not shown in the example code?
--

AJ Mercer
<webonix:net strength="Industrial" /> | <webonix:org community="Open" />
http://twitter.com/webonix

Vojta Jina

unread,
Feb 11, 2012, 6:58:21 PM2/11/12
to ang...@googlegroups.com
That's because it uses html5 mode - rewriting urls, so to get this working, you need a configured server.

V.

AJ Mercer

unread,
Feb 11, 2012, 7:13:15 PM2/11/12
to ang...@googlegroups.com
oh, that surprises me as this retured a 404

Can you please point me to the doco for the rewrite rules?
(I will be using Jetty with Tuckey)

On 12 February 2012 07:58, Vojta Jina <vojta...@gmail.com> wrote:
That's because it uses html5 mode - rewriting urls, so to get this working, you need a configured server.

V.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/4o32JBTpJ7wJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

Vojta Jina

unread,
Feb 11, 2012, 7:41:12 PM2/11/12
to ang...@googlegroups.com
Yep http://docs-next.angularjs.org/settings returns 404 (we don't have configured server for this example, so it works only if you click the link, but not if you type the direct url into a address bar).

How $location and url rewriting works, see:

V.

AJ Mercer

unread,
Feb 11, 2012, 10:54:51 PM2/11/12
to ang...@googlegroups.com
are you able to show me your rewrite rules?


I do not understand what makes this a HTML5 thing if the web sever is faking up has / hashbang URLs.
But most likely I do not fully understand what is happening.



V.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/dzxhm61Bl20J.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

Vojta Jina

unread,
Feb 12, 2012, 6:10:02 PM2/12/12
to ang...@googlegroups.com
Very simplified: whenever you ask for non-existing file, we return index.html....

In our docs, when you click on link "API" it rewrites url to "/api" (without full page reload)... This is not possible in old browsers, so you need to use hashbang urls (/index.html#!/api)
So when you directly type /api into the browser, server needs to respond with index.html (ideally already with the /api content inside, so that you don't have to do another xhr request).


V.


AJ Mercer

unread,
Feb 12, 2012, 7:53:15 PM2/12/12
to ang...@googlegroups.com
I think something is still not right with my sample app.

I have put in a rewrite rule (there are exclusion conditions as well)
        <from>^/(.*)$</from>
        <to>/index.html</to>
But as far as I can tell, this is just for when people try to access anything other than index.html

When I click welcome or settings, the partial is not been loaded.




V.


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/Ly8eOPAVcXcJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

Vojta Jina

unread,
Feb 12, 2012, 9:02:02 PM2/12/12
to ang...@googlegroups.com
So you are trying to get run the deeplinking example http://docs-next.angularjs.org/cookbook/deeplinking, right ?

Your server needs to serve:

1/ /settings.html - the content of settings page
This is requested by xhr request, when you click the link, $route changed and ng:view load this content.

2/ /settings must rewrite to index.html (and thus serve index.html - the whole page)
That's for the case that user directly type this url into a browser's address bar.

V.

AJ Mercer

unread,
Feb 12, 2012, 9:08:38 PM2/12/12
to ang...@googlegroups.com
I have in my webroot
index.html
that has
$route.when("/settings", {template:'./pages/settings.html', controller:SettingsCntl});

in webroot I have a pages directory
which contains welcome.html and settings.html

Is that correct?



V.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/537wivgX4e8J.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

Vojta Jina

unread,
Feb 13, 2012, 1:09:21 AM2/13/12
to ang...@googlegroups.com
Yes, that's correct, but you have your template specified as a relative path, so you need to add <base href="..." /> to your index.html...

V.

AJ Mercer

unread,
Feb 13, 2012, 1:23:55 AM2/13/12
to ang...@googlegroups.com
My pages doing a full page reload

On 13 February 2012 14:09, Vojta Jina <vojta...@gmail.com> wrote:
Yes, that's correct, but you have your template specified as a relative path, so you need to add <base href="..." /> to your index.html...

V.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/kO7GXp0MoNEJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

Vojta Jina

unread,
Feb 13, 2012, 1:55:09 AM2/13/12
to ang...@googlegroups.com
Do you have $location configured to use html5Mode ?

V.

AJ Mercer

unread,
Feb 13, 2012, 2:27:08 AM2/13/12
to ang...@googlegroups.com
I just copied the code from 'source' on

I am not saw how to do this.
I have added this (without joy)

  AppCntl.$inject = ['$route,$locationProvider'];
  function AppCntl($route,$locationProvider) {
 
  $locationProvider.html5Mode(true).hashPrefix('!');
 
   // define routes
   $route.when("/welcome",  {template:'pages/welcome.html',  controller:WelcomeCntl});
   $route.when("/settings", {template:'/pages/settings.html', controller:SettingsCntl});
   $route.parent(this);
   
   // initialize the model to something useful
   this.person = {
    name:'anonymous',
    contacts:[{type:'email', url:'anon...@example.com'}]
   };
  }

On 13 February 2012 14:55, Vojta Jina <vojta...@gmail.com> wrote:
Do you have $location configured to use html5Mode ?

V.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/yidAoSe-eYcJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

bdun...@gmail.com

unread,
Jan 18, 2013, 9:01:48 PM1/18/13
to ang...@googlegroups.com
I have my server configured to rewrite everything to index.html.  I have $locationProvider.html5Mode(true)

The problem is, I'm always sent to my "otherwise" route because the server returns index.html

What is the missing piece that makes /app/foo resolve to /app/index.html#/foo ?

Thanks

Peter Bacon Darwin

unread,
Jan 19, 2013, 5:06:08 AM1/19/13
to ang...@googlegroups.com
I guess the problem is that you are using app as the base of the application rather than the root path.  You may need to set up <base href="app"> in your html?


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Message has been deleted

bdun...@gmail.com

unread,
Jan 31, 2013, 10:33:35 AM1/31/13
to ang...@googlegroups.com
That was definitely part of it.

I blogged my whole solution here:  https://github.com/bdunklau/LittleBlueBird/wiki/URL-Rewriting-and-HTML5-in-AngularJS

Hopefully it will save somebody some time.
Reply all
Reply to author
Forward
0 new messages