AngularJS - How to remove index from URL

Question

This works fine for now with a url like test.com/#/album/0/the-slug-here, but I'm trying to achieve test.com/#/album/the-slug-here

<a ng-href="#/album/{{$index}}/{{project.slug}}">{{project.title}}</a>

(function() {
var app = angular.module('chp', ['ngRoute', 'projectControllers']);

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/directory.html',
        controller: 'ProjectsCtrl'
      }).
      when('/album/:id', {
        templateUrl: 'partials/album.html',
        controller: 'ProjectDetailCtrl'
      }).
      when('/album/:id/:slug', {
        templateUrl: 'partials/album.html',
        controller: 'ProjectDetailCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

var projectControllers = angular.module('projectControllers', []);

projectControllers.controller('ProjectsCtrl', ['$scope', '$http',
  function ($scope, $http) {
    $scope.projects = albums;
    $scope.filters = { };
  }]);

projectControllers.controller('ProjectDetailCtrl', ['$scope', '$routeParams', '$sce',
  function($scope, $routeParams, $sce) {
    $scope.project = albums[$routeParams.id];
}]);

When I remove the id though and try to just link to the slug, it's not loading in the data. The only way I've gotten to work so far is by adding the 2nd route which includes both. Any way to get rid of the index in the url?

Did you mean you are not able to do /album/:slug ? It just works fine to me plnkr.co/edit/9iYnxUmyVL0DupVZWpLC?p=preview — PSL
– PSL, Commented Jan 17, 2015 at 3:44
yeah doesnt work for me. i should say i have my data set up like so: var albums = [ { title: 'The Title', slug: 'the-slug, }, etc.. ] — user2994560
– user2994560, Commented Jan 17, 2015 at 3:59
I want to be able to pass the index here $scope.project = albums[$routeParams.id]; without actually having to put the index into the URL. So I just would like to figure out a way to get the index of the particular album whose slug property equals the slug value — user2994560
– user2994560, Commented Jan 17, 2015 at 4:07
Ok so as i understand you will pass slug through route param and then need to match the index in albums which has slug property with that slug value from route, right? — PSL
– PSL, Commented Jan 17, 2015 at 4:08

PSL · Accepted Answer · 2015-01-17 04:14:47Z

1

You would need to remove both the routes with :id and replace with the one with :\slug and you can just filter the album from albums to get the index;

You can do:

In the router:

  when('/album/:slug', {
    templateUrl: 'album.html',
    controller: 'ProjectDetailCtrl'
  }).

In the controller

  function($scope, $routeParams, $sce) {
    albums.some(function(album, idx){
       /*Search for a match*/
       if(album.slug === $routeParams.slug){
         /*Match found, set album and its index and break out*/
         $scope.album = album;
         $scope.albumIdx = idx;
         return true;
       }
    });

Plnkr

Shim support for Array.some for older browsers here.

answered Jan 17, 2015 at 4:14

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PSL Over a year ago

@user2994560 You are welcome. Please be aware of using array.some since it is not supported in older browsers, read the link attached you can either use a shim in the link or use traditional for loop with a break.

Collectives™ on Stack Overflow

AngularJS - How to remove index from URL

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related