Angularjs Multi level routing

Question

I am trying to configure angular routing using $routeProivder

So I have

$routeProvider
.when('/title', {
templateUrl: 'views/title.html',
})
.when('/title/article-name', {
templateUrl: 'views/article-name.html',
})

However, with $locationProvider.html5Mode(true), It will find the page template but every links image js css file will not be found, therefore my layout is screwed ( My header and footer are in my index.html, template is rendering from ng-view ). Also when I click on the links it shows "Cannot get /title/article-name/sample.js"

My question is how do I do multi level routing with angular.

so like "www.domain.com/why-us/our-company/our-goal" something like that. Thanks

Does it work fine if html5Mode is false? I believe assets are loaded w.r.t the page, and has nothing to do wit route configuration. — Chandermani
– Chandermani, Commented Sep 30, 2013 at 16:09
yes it works fine when html5Mode is off. it will be like www.domain.com/#/title/article-name but i want the pretty url. Any idea? — user2770348
– user2770348, Commented Sep 30, 2013 at 16:19

Denison Luz · Accepted Answer · 2013-09-30 17:19:58Z

On top of setting html5Mode(true), you will need to set up your server to support the cool URLS in HTML5 mode. See explanation from official AngularJS documentation below:

Server side Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)

What it means is that you need to redirect any static resource to the starting point of your application.

Let's say your sample.js is on the root of your site www.domain.com.

The server needs to rewrite the URL for this file to point to http://www.domain.com/sample.js instead of http://www.domain.com/title/article-name/sample.js

There are different ways to do it on the server side depending on which type of server you are using. On common approach to do this is serve all the static resources from the URLS with the /static prefix and tell the server to rewrite all links to this folder.

On the client side I saw some solutions using <base href="/" /> inside the <head>.

The HTML < base > element specifies the base URL to use for all relative URLs contained within a document.

You could give try and see if it works for you - just keep in mind that because is on the client side, you need to see the cross browser support for this.

I personally would suggest the server side solution.

    <html>
      <head>
        <base href="/" />
      </head>
      ....
    </html>

Collectives™ on Stack Overflow

Angularjs Multi level routing

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related