CODEWITHSUNDEEP
angularjsroutesangular-routing
Mark Watkins
Mark Watkins

Reputation: 882

How to create AngularJS Route with dashes instead of slashes

Is it possible to create Angular routes with dashes instead of slashes, and variable content in the URL fragment? For example:

In the Angular phone Tutorial, URLs look like this, e.g:

http://angular.github.io/angular-phonecat/step-11/app/#/phones/motorola-xoom

this is implemented via a Route Provider such as: 

  when('/phones/:phoneId', {
    templateUrl: 'partials/phone-detail.html',
    controller: 'PhoneDetailCtrl'
  })

what I'd like to do is have URLS that look more like:

http://angular.github.io/angular-phonecat/step-11/app/#/phones/{{manufacturer}}--{{devicename}}--{{phoneid}}

where {{phoneid}} is a numerical database key and the {{manufacturer}} text will vary from phone to phone. This is because I need the numerical key to drive my database but want the manufacturer & devicename text (or my equivalent) in the URL for seo purposes....

Effectively I'd like to do in Angular Routes what I can do in htaccess files, where I'd do something like: RewriteRule ^(.)--by--(.)--(.*)$ phone.php?mfg=$1&devicename=$2&phoneid=$3

I know Angular routes don't support wildcards like this, but wondering how I might be able achieve an effect somewhat like this. Or maybe there is some extension which enables this?

Upvotes: 2

Views: 1367

Answers (1)

sayam
sayam

Reputation: 163

You can use variable using :name in the url (source)

In your config:

config(function($routeProvider, $locationProvider) {
    $routeProvider
    .when('/phones/:manufacturer--:devicename--:phoneid', {
          templateUrl: 'file.html',
          controller: 'PhoneController'
     });

To access the parameters in your controller:

$routeParams.manufacturer
$routeParams.devicename
$routeParams.phoneid

Upvotes: 2

Related Questions