asp.net - 如何在 Angular 路由中附加 URL？

Question

如何在 Angular 路由中进行 url(string) 串联。

请引用下面的代码片段来理解我的问题。

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>

现在页面加载时，执行第一个路由路径，页面显示如下

现在，当我点击浏览器中的印地语专辑 url 时，它会更改为/albums/hindi 并且 html 呈现如下

当前浏览器中的 url 已更新为/localhost:8080/albums/himesh 现在我的需要是将浏览器中的网址更新为 /localhost:8080/albums/hindi/himesh

那么如何使用 Angular 路由进行此类字符串连接。

谢谢你。

Answer 1

您需要更改您的 $routeProvider.when url 选项，该选项将接受两个参数，一个是 albumType ，另一个是 alubmName 。您可以使用 $routeParams 服务在 b1Ctrl 中获取这些值。

标记

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

代码

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

然后在 Controller 内，您应该使用 $routeParams 而不是 $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
  })
});