title: How to configure controllers for stateprovider with TypeScript
body: <p>Let's assume I have following simplified controller:</p>
  
  <pre><code>module App {
      "use strict";
  
      export class StoreDetailController {
          constructor() {
              alert("Detail-Controller");
          }
      }
  }
  </code></pre>
  
  <p>The <code>UI-Router</code> is configured as follows (simplified):</p>
  
  <pre><code>var app = angular.module("app", ["ui.router"])
      .config(($stateProvider, $locationProvider, $urlRouterProvider) =&gt; {
          $urlRouterProvider.otherwise("/");
          $stateProvider.state("store", {
              url: "/Store",
              templateUrl: "/Store/Partial?name=Layout"
          });
          $stateProvider.state("store.Detail", {
              url: "/Details/:id",
              templateUrl: "/Store/Partial?name=Details",
              controller: StoreDetailController
          });
          $locationProvider.html5Mode(true);
      });
  </code></pre>
  
  <p>Everything is working fine (the message box appears) when I enter the details page from the start page of the app. But if I am reloading the browser on the details page or paste the nested url into a new tab, the controller is not been called and no error is raised.</p>
  
  <p>Everything seems to work too if I 'declare' the controller directly at the configuration, like:</p>
  
  <pre><code>//...
  $stateProvider.state("store.Detail", {
      url: "/Details/:id",
      templateUrl: "/Store/Partial?name=Details",
      controller: () =&gt; alert("This is called every time");
  });
  //...
  </code></pre>
  
  <p>What is the correct way to configure the state provider that the controller is used on reload or entering nested urls?</p>