Adding a SEO friendly Url Slug in Dynamic Views of Angular UI-Router

Question

In an Angular setting, I have chose Angular UI-router to switch between views.

My config looks as follows:

.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/app/home');

  $stateProvider

    // Nav
    .state('app', {
      url: '/app',
      templateUrl: 'templates/navbar.html',
      abstract: true,
      controller:'AppCtrl as app',
    })

    // Home
    .state('app.home', {
      url: '/home',
      templateUrl: 'templates/home.html',
      controller:'HomeCtrl as home',
    })

    .state('app.browse', {
      url: '/browse',
      templateUrl: 'templates/browse.html',
      controller:'BrowseCtrl as browse',
    })

    .state('app.browse-detail', {
      url: '/browse/:productId',
      templateUrl: 'templates/browse-detail.html',
      controller:'BrowseDetailCtrl as detail',
    })

})

This will result that the url of a product will appear as follows:

www.website.com/app/#/browse/productId

Instead I would like to see something like:

www.website.com/browse/productId/most-awesome-product

where most-awesome-product is an Url Slug.

My questions are:

• what are in general the principles of making Angular Websites SEO friendly using Routing?
• how can I change the url of my angular router with adding the url slug (see above)?
• will changing the url make my website SEO friendly?

Thanks!

Answer 1

You need to use the html5Mode for that

In web.config add

$locationProvider.html5Mode(true);

In index.html page

<base href="/">

It is enough but when you will refresh the page it will give the error so need to use url re-writing, so add in web.config

<system.webServer>
    <rewrite>
     <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                                 
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
    </rewrite>
</system.webServer>

And your state will need to change, like this

.state('app.browse-detail', {
      url: '/browse/:productId/:slug',
      templateUrl: 'templates/browse-detail.html',
      controller:'BrowseDetailCtrl as detail',

For more detail see AngularJS HTML5 mode reloading page not found solution