title: Adding a SEO friendly Url Slug in Dynamic Views of Angular UI-Router
body: <p>In an Angular setting, I have chose Angular UI-router to switch between views.</p>
  
  <p>My config looks as follows:</p>
  
  <pre><code>.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',
      })
  
  })
  </code></pre>
  
  <p>This will result that the url of a product will appear as follows:</p>
  
  <pre><code>www.website.com/app/#/browse/productId
  </code></pre>
  
  <p>Instead I would like to see something like:</p>
  
  <pre><code>www.website.com/browse/productId/most-awesome-product
  </code></pre>
  
  <p>where <code>most-awesome-product</code> is an <strong>Url Slug</strong>.</p>
  
  <p>My questions are:</p>
  
  <ul>
  <li>what are in general the principles of making Angular Websites SEO friendly using Routing?</li>
  <li>how can I change the url of my angular router with adding the url slug (see above)?</li>
  <li>will changing the url make my website SEO friendly?</li>
  </ul>
  
  <p>Thanks!</p>