CODEWITHSUNDEEP
angularjsroutes
user2770348
user2770348

Reputation: 51

Angularjs Multi level routing

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

Upvotes: 1

Views: 1321

Answers (1)

Denison Luz
Denison Luz

Reputation: 3565

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>

Upvotes: 1

Related Questions