How to configure controllers for stateprovider with TypeScript

问题

Let's assume I have following simplified controller:

module App {
    "use strict";

    export class StoreDetailController {
        constructor() {
            alert("Detail-Controller");
        }
    }
}

The UI-Router is configured as follows (simplified):

var app = angular.module("app", ["ui.router"])
    .config(($stateProvider, $locationProvider, $urlRouterProvider) => {
        $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);
    });

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.

Everything seems to work too if I 'declare' the controller directly at the configuration, like:

//...
$stateProvider.state("store.Detail", {
    url: "/Details/:id",
    templateUrl: "/Store/Partial?name=Details",
    controller: () => alert("This is called every time");
});
//...

What is the correct way to configure the state provider that the controller is used on reload or entering nested urls?

回答1:

In this case, the most suspected, and mostly the culprit, would be inproper HTML setting.

Simply a browser needs to know, what is the base href for all relative navigation. And that could be confusing for it (for the browser) if we navigate directly to https://domain/app/Store/Partial?name=Layout. To solve it we just need to set the element <base>

<base href="/" />

Check this Q & A about html5mode, with working example/plunker

Interestingly there is also other way for Angular's $htmlProvider, and it is it configuration:

$locationProvider.html5Mode({
   enable: true,
   requireBase: false.
});

Check the doc:

$locationProvider

small cite about configuration:

enabled – {boolean} – (default: false) If true, will rely on history.pushState to change urls where supported. Will fall back to hash-prefixed paths in browsers that do not support pushState.

requireBase - {boolean} - (default: true) When html5Mode is enabled, specifies whether or not a tag is required to be present. If enabled and requireBase are true, and a base tag is not present, an error will be thrown when $location is injected. See the $location guide for more information

rewriteLinks - {boolean} - (default: true) When html5Mode is enabled, enables/disables url rewriting for relative links.

来源：https://stackoverflow.com/questions/28351981/how-to-configure-controllers-for-stateprovider-with-typescript

标签

html

angularjs

typescript

angular-ui-router