複数のURLが1つのAngular Ui Router状態にある

Question

私はapp.home状態を私のアプリケーションに持っていて、異なるスコープの専門家がリストされています。また、専門家をフィルタリングできる範囲のリストもあります（例：医学、法、心理など）。スペシャリストをスコープでフィルタリングすると、変更するブラウザにURLが必要です。このURLを訪問して、必要な範囲で既にフィルタリングされているスペシャリストを取得することができます。私はES6構文とWebpackを使ってコンパイルしています。

ここ

class HomeCtrl { 
    constructor(users, Categories) { 
     "ngInject"; 
     this.filters = {}; 
     this.users = users; 
     // Import categories from Categories Service 
     this.categories = Categories.categories; 
    } 
} 
export default HomeCtrl; 

は私index.jsです：私のhome.controller.jsです。ここ

home.config.js

function homeConfig ($stateProvider) { 
    "ngInject"; 
    $stateProvider.state('app.home', { 
     url: '/', 
     controller: 'HomeCtrl', 
     template: require('./home.html'), 
     resolve: { 
      users: function (User) { 
       // Call a method from our UserService 
       return User.userList().then((users) => users); 
      } 
     } 
    }); 
} 
export default homeConfig 

：だから、ここに私のルータですこのモジュールはバンドルされ、後でメインアプリケーションモジュールに組み込まれます。

import angular from 'angular'; 
import homeConfig from './home.config'; 
import HomeCtrl from './home.controller'; 

let homeModule = angular.module('app.home', []); 
homeModule.config(homeConfig); 
homeModule.controller('HomeCtrl', HomeCtrl); 

export default homeModule; 

そして最後に、これは私のテンプレートです：

<ul> 
    <li> 
     <a href="#" ng-click="$ctrl.filters.scope = ''">Show all</a 
    </li> 
    <li ng-repeat="category in $ctrl.categories"> 
     <a ng-click="$ctrl.filters.scope = category">{{category}}</a> 
    </li> 
</ul> 
<!-- Specialists displayed --> 
<div ng-repeat="user in $ctrl.users | filter: $ctrl.filters"> 
    <img ng-src="{{user.image}}"/> 
    <p>{{user.userName}}</p> 
</div> 

は、私は私の専門家をフィルタリングする際に、URLを変更する方法はありますか？

Answer 1

フィルタを$locationに追加し、コントローラ内のアクティブ化機能で使用するだけです。

// get current filter in activate function (e.g. www.example.com/?scope=law) 
var filter = $location.search(); 
// => {scope: 'law'} 

// set scope to 'law', when user applies new filter 
$location.search('scope', 'law'); 

もう1つ解決策は、状態を$stateParamsで解決することです。

.state('app.home', { 
    url: '/:scope', 
    template: require('./home.html'), 
    controller: 'HomeCtrl', 
    resolve: { 
     users: ['$http','$stateParams', function($http, $stateParams) { 
      //get users based on $stateParams 
     }] 
    } 
}) 

フロントエンドでフィルタリングする場合は、すべてのユーザーを取得してフィルタを解決できます。次に、あなたのコントローラーで、最初に解決したフィルターを設定します。

.state('app.home', { 
    url: '/:scope', 
    template: require('./home.html'), 
    controller: 'HomeCtrl', 
    resolve: { 
     users: function (User) { 
      // Call a method from our UserService 
      return User.userList().then((users) => users); 
     }, 
     filters: ['$http','$stateParams', function($http, $stateParams) { 
      //get filters based on $stateParams 
     }] 
    } 
}) 

class HomeCtrl { 
    constructor(users, Categories, filters) { 
     "ngInject"; 
     this.filters = filters; 
     this.users = users; 
     // Import categories from Categories Service 
     this.categories = Categories.categories; 
    } 
} 
export default HomeCtrl;