CODEWITHSUNDEEP
javascriptangularjs
AlexNikolaev94
AlexNikolaev94

Reputation: 1209

Multiple URLs in one Angular Ui Router state

I have a app.home state in my application where the specialists in different scopes are listed. Also I've got a list of scopes we can filter our specialists by (e.g. Medicine, Law, Psychology etc.). When I filter the specialists by their scope, I need the URL in my browser to change, for that users could visit this URL and get the specialists already filtered by a scope they might need. I'm using ES6 syntax and Webpack to compile. So, here's my router:

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

Here is my home.controller.js:

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

Here is my index.js where this modules are bundled and later included into main application module:

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;

And finally this is my template:

<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>

Is there any way to change url when I filter my specialists?

Upvotes: 2

Views: 775

Answers (1)

oshell
oshell

Reputation: 9103

You can simply add the filter to the $location and use it in an activate function within your controller.

// 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');

Another solution is to resolve your state with $stateParams.

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

If you want to filter in the frontend only you can get all users and resolve the filters. Then in your controller set the filters you resolved initially.

.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;

Upvotes: 1

Related Questions