What is the best options for creating a navigation with AngularJS?

Question

I think this could be a common question, but I didn't find my answer, so that's the reason I am asking this. I am sorry if I am being repetitive.

I have a page with some categories. And each category has some category as its children. And, the user can click in this categories and the $scope.categories will change with those children, until we have no children anymore.

But, when the user clicks in a category to show its children, I want to change the URL, to make a permalink for the visible category at the time.

I tried to use $location, but $location does not change my absURL, it just set a anchor at the end of the URL, like '/path#category_slug'. I want to change to '/path/category_slug'. The reason is that I want to index those URLs in search engines.

So, if the user entry in '/path/category_slug', I will change $scope.categories based in the category_slug.

My question is, what is the best options to do this?

Answer 1

If you are using AngularJS it is unlikely that Google or other search engines will understand little of your site content. Th e problem is greater than just navigation! See the following question:

How do search engines deal with AngularJS applications?

If you are concerned about search engines, you are going to have to create a more traditional page-based site, using angular for small amounts of interactivity.

Answer 2

If you switch your AngularJS app to HTML5 mode, you will no longer have those # symbols in urls.

In your app.js file, set html5 mode to true:

$locationProvider.html5Mode(true);

But be careful, it's not so simple. You then have to configure your server to rewrite all requests. We call that "url rewriting" and there are many ways to do it depending on which server you use.