CODEWITHSUNDEEP
asp.netangularjsasp.net-mvc-5angularjs-ng-repeatangular-ui-router
Kgn-web
Kgn-web

Reputation: 7555

How to append Urls in angular routing?

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.

Upvotes: 2

Views: 932

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

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
  })
});

Upvotes: 2

Related Questions