angularjs workout required parameters for any state

Question

I an trying to list out all the URL's that exist in the stateprovider (angularjs 1.2.26).

given the example below, (very much cut down state list):

angular.module('app')
.config(function ($stateProvider) {

    $stateProvider
        .state('app.vendors', {
            url: '/vendors',
            templateUrl: 'app/vendor/list.html',
            controller: 'Vendor.ListController as vm',
        })
        .state('app.vendor', {
            url: '/vendor/{vendorId}',
            templateUrl: 'app/vendor/details.html',
            controller: 'Vendor.DetailsController as vm',
            data: {
                subnav: [
                    { title: 'Details', icon: 'fa-align-left', state: 'app.vendor', permissions: 'get-vendor', exactStateOnly: true },
                    { title: 'Sites', icon: 'fa-archive', state: 'app.vendor.sites', permissions: 'get-site' },
                    { title: 'NCRs', icon: 'fa-copy', state: 'app.vendor.ncrs', permissions: 'get-vendor' }
                ],
                requiredPermissions: ['get-vendor']
            }
        })
        .state('app.vendor.sites', {
            url: '/sites',
            templateUrl: 'app/vendor/site/list.html',
            controller: 'Vendor.Site.ListController as vm',
            data: {
                requiredPermissions: ['get-site']
            }
        })
        .state('app.vendor.site', {
            url: '/site/{siteId}',
            templateUrl: 'app/vendor/site/details.html',
            controller: 'Vendor.Site.DetailsController as vm',
            data: {
                requiredPermissions: ['get-site']
            }
        })
        .state('app.vendor.ncrs', {
            url: '/ncrs',
            templateUrl: 'app/vendor/ncr/ncrList.html',
            controller: 'Vendor.NCR.NCRListController as vm',
            data: {
                requiredPermissions: ['get-vendor']
            }
        });
});

to get to a particular vendor you would use state:

app.vendor({vendorId: 1})

to get to its site

app.vendor.site({vendorId: 1, siteId: 2})

if I pass in the $state object to a controller I can list all the states with state.get().

If I list them the urls only contain the last part (i.e. what is in the config, and relative to its parent). I can use $state.href('app.vendor.site') which will give me almost the whole url, but misses out the parameters. I am trying to find a way at runtime to know what or at least how many parameters it requires.

My goal is to try and create a basic smoke test for every page in our Angular app to ensure it loads something and doesn't through errors in the console. I dont want to have to manually maintain a list of urls with params. (all our params are int IDs so I can simply use "1" in the params to test the url).

score 2 · Accepted Answer · edited May 23 '17 at 10:33

The private portion of the state contains params and ownParams objects. You can use a decorator to access those internal variables. See my previous answer regarding exposing the entire internal state object using a decorator: UI-Router $state.$current wrapper for arbitary state

After decorating your state objects, use the $$state() function to retrieve the private portion. Then query the state for its params and generate the href.

angular.forEach($state.get(), function(state) {
  var paramKeys = state.$$state().params.$$keys();
  var fakeStateParams = {};
  angular.forEach(paramKeys, function(key) { fakeStateParams[key] = key; });

  console.log($state.href(state, fakeStateParams));
});

angularjs workout required parameters for any state

1 Answers1