How to append Urls in angular routing?

Question

How to do url(string) cocatenation in angular routing.

Please refer the below snippet to understand my question.

app.config(['$routeProvider', '$location'], function($routeProvider) {
  when('/', {
    templateUrl: '/AlbumsList.html',
    controller: 'a1Ctrl'
  }).
  when('/albums/:albumName', {
    templateUrl: 'AlbumsList.html',
    controller: 'b1Ctrl'
  })
})
app.controller('a1Ctrl', function($scope, $http) {

  $scope.albums = function() {
    //ajax getting data from server 
  }
})

app.controller('b1Ctrl', function($scope, $routeProviders) {
  $scope.album = $routeProviders.albumName;

  $http({
    //same ajax function as above getting data from server for the nes sub album
  })
})

<div>
  <ul>
    <li ng-repeat="album in albums">
      <a href="/albums/{{album.name}}">{{album.name}}</a>
    </li>
  </ul>

</div>

Now when page is loaded, the first routing path is executed, the page is displayed as below Output

Now when I click the on say Hindi Albums url in browser changes to /albums/hindi and html is rendered as below

enter image description here

Currently url in browser is getting updated to /localhost:8080/albums/himesh Now my need is to update the url in browser to /localhost:8080/albums/hindi/himesh

So how to do such string concatenation using Angular routing.

Thanking You.

Pankaj Parkar · Accepted Answer · 2015-06-17 06:21:41Z

2

You need to change your $routeProvider.when url option, that will accept two parameter one would be albumType & other would be alubmName. You that you could get those values in your b1Ctrl using $routeParams service.

Markup

<li ng-repeat="album in albums">
  <a ng-href="/albums/{{alubm.type}}/{{album.name}}">{{album.name}}</a>
</li>

Code

when('/albums/:albumType/:albumName', {
    templateUrl: 'AlbumsList.html',
    controller: 'b1Ctrl'
})

Then inside your controller you should use $routeParams instead of $routeProviders.

Controller

app.controller('b1Ctrl', function($scope, $routeParams) {
  $scope.album = $routeParams.albumName;
  $scope.albumType = $routeParams.albumType; //alumType eg. hindi , english, etc

  $http({
    //same ajax function as above getting data from server for the nes sub album
  })
});

edited Jun 17, 2015 at 6:21

answered Jun 16, 2015 at 18:50

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Collectives™ on Stack Overflow

How to append Urls in angular routing?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related