UI-Router: how does the params map to the url

Question

I am new to Angular and UI-Router and I have to work with an Angular codebase. I am having difficulty understanding how the params gets mapped to the url. Specifically how topics get injected as topic in /test?topic&manualMode&advancedMode I cannot seem to find the place where I can log out the intermediate value to see how the url gets constructed.

function StateConfig(
  $stateProvider: angular.ui.IStateProvider,
  breadcrumbsService: BreadcrumbsService
) {
  $stateProvider.state("testHub", {
    params: {
      topics: null
    },

    url: "/test?topic&manualMode&advancedMode",

    views: {
      main: {
        template:
          '<div class="hubContent"><iot-mqtt-client-config></iot-mqtt-client-config></div>'
      },

      sidebar: {
        controller: HelpControllerTutorial,

        controllerAs: "vm",

        templateUrl: "pages/mqtt/mqtt-client-help.html"
      }
    }
  });

  breadcrumbsService.addConfig("testHub", {
    name: (i18n: I18nService) => i18n("text.test"),

    parentState: null,

    reconstructBreadcrumbPath: true
  });
}

Answer 1

This should work for you in app.js:

.state('testHub', {
    url: "/test/:topic/:manualMode/:advancedMode", // added for dynamic ID params
})

Then your ui-sref in substances.html will append the ( topic or manualMode or advancedMode ) to the url, and you will be able to access that in your controller in $stateParams