如何配置控制器与打字稿stateprovider [英] 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");
        }
    }
}

的 UI-路由器配置如下（简体）：

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);
    });

一切工作正常（该消息框出现），当我从应用程序的起始页面进入详细信息页面。但是，如果我重新加载详细信息页面上浏览器或嵌套的URL粘贴到一个新的标签，控制器没有被调用，并不会引发错误。

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");
});
//...

什么是配置控制器上使用重载或进入嵌套的URL状态提供了正确的方法是什么？

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

推荐答案

在这种情况下，最可疑的，而且大多的罪魁祸首，是inproper HTML设置。

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

只是一个浏览器需要知道，什么是在基础 的href 所有相对导航。这可以混淆它的（对于浏览器）的，如果我们直接导航到的https：//域/应用/存储/部分名称=布局。为了解决这个问题，我们只需要设置元素＆LT;碱基GT;

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="/" />

勾选此 Q＆安培;关于html5mode A，有工作的例子/ plunker

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

有趣也有对角的$ htmlProvider其他方式，并且它是它的配置：

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

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

检查DOC：

的小引用有关配置：的

  启用
• - {}布尔 - （默认：false）如果为true，将依靠history.pushState改变URL地址的支持。将回退到散列在不支持pushState的浏览器prefixed路径。

  
• requireBase - {}布尔 - （默认：true）启用html5Mode，指定标签是否需要为present。如果启用，requireBase是真实的，并且基本标记不是present，当$位置注入错误将被抛出。见$位置导游的更多信息

  
• rewriteLinks - {}布尔 - （默认：true）。如果启用html5Mode，启用/禁用URL重写为相对链接

  

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

这篇关于如何配置控制器与打字稿stateprovider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！