AngularJS - 刷新页面后丢失 html答案

【问题标题】：AngularJS - Lost html after refreshing pageAngularJS - 刷新页面后丢失 html
【发布时间】：2016-10-31 11:27:39
【问题描述】：

我的简单 Angular 应用程序遇到了大问题。刷新页面后，所有的html都丢失了！
我的问题不在于角度数据和/或会话/本地存储数据，而在于 HTML。
例如，当通过导航栏“主页”按钮访问主页时，它看起来像：

单击刷新按钮或 h1 标记内的 f5“主页”后丢失：

所以问题是 - 我的路由配置有什么问题，或者这可能是 Angular 的预期行为？我一直在寻找这个问题，但大多数主题都是关于将数据保存在 $localStorage 或 $sessionStorage 中。我的所有页面都会出现此问题。

编辑嗨，伙计们，感谢您的 cmets。

@devqon - 我认为这里不需要 locationProvider。我正在使用 routeProvider。我更改了一点路由配置：将''替换为“”并在配置末尾添加 else 语句：

<code>
app.config(function($routeProvider, $httpProvider) {
    $routeProvider.when("/", {
        templateUrl : "src/html/home.html",
        controller  : "HeaderCtrl"
    })
    .when("/home", {
        templateUrl : "src/html/home.html",
        controller  : "HomeCtrl"
    })
    .when("/flights", {
        templateUrl : "src/html/flights.html",
        controller  : "FlightCtrl"
    })
    .when("/customers", {
        templateUrl : "src/html/customers.html",
        controller  : "CustomerCtrl"
    })
    .when("/login", {
        templateUrl : "src/html/login.html",
        controller : "HeaderCtrl"
    })
    .when("/flight_choose", {
        templateUrl : "src/html/flight_choose.html",
        controller : "FlightChooseCtrl"
    }).otherwise("/home");

    $httpProvider.interceptors.push('airlinesRequestInterceptor');
});
</code>

如您所见，我创建了 HomeCtrl，非常简单：

<code>
app.controller('HomeCtrl', function() {});
</code>

home.html 位于第一个屏幕截图中。 @Gustavo Gabriel - 你能更具体一点吗？ :) 上述更改并没有解决问题:(

编辑 2

@Kai - 感谢您的回复。根据您的建议，我更改了配置，现在看起来像： app.config(function($routeProvider, $httpProvider) { $routeProvider.when("/", { templateUrl : "src/html/home.html", controller : "HomeCtrl" }) .when("/flights", { templateUrl : "src/html/flights.html", controller : "FlightCtrl" }) .when("/customers", { templateUrl : "src/html/customers.html", controller : "CustomerCtrl" }) .when("/login", { templateUrl : "src/html/login.html", controller : "HeaderCtrl" }) .when("/flight_choose", { templateUrl : "src/html/flight_choose.html", controller : "FlightChooseCtrl" }).otherwise("/");

$httpProvider.interceptors.push('airlinesRequestInterceptor');

}); 我还更改了主页的导航栏链接：问题仍然存在，所以也许我误解了你。有任何想法吗？

提前致谢，迈克尔

【问题讨论】：

你应该包含一个$locationProvider.otherwise(..defaultUrl..) 让 Angular 知道如果没有匹配，请转到默认网址（可能是主页）
你的 home.html 和 HeaderCtrl 是什么样的？
试试$routeProvider.when(''，然后把home...
大家好，我已将 EDIT 添加到问题中。

标签： javascript html angularjs ngroute

【解决方案1】：

您在路由中包含 HeaderCtrl 会导致问题，因为您为同一 /home 路径指定了两个控制器。将.when ("/" 的controller 更改为HomeCtrl，只需在HTML 中为标题指定HeaderCtrl 作为属性ng-controller="HeaderCtrl"。我以前也犯过同样的错误。

【讨论】：

嗨，我添加了一个编辑。
尝试改变你的 .otherwise 看起来像.otherwise({ redirectTo: '/' });
嗨，凯，我会在几分钟后发布一个回答。我找到了解决方案，它与路由配置无关，但我对指令的误解：O
很高兴你知道了。

【解决方案2】：

看起来，我已经创建了附加 html 部分的指令，它不适用于路由和 ng-view。正如您在我的第一篇文章中看到的那样，我的 index.html 正文看起来像：

<code>
<body>
    <div class="wrapper">
        <ng-header></ng-header>
        <ng-content></ng-content>
        <ng-footer></ng-footer>
    </div>
</body>
</code>

我只是想让我的 index.html 尽可能简单。我已经为页眉、内容、页脚和注入它们的指令创建了 html 文件。例如，内容指令如下所示：

<code>
app.directive('ngContent', function() {
  return {
    restrict: 'A',
    templateUrl: '/src/html/content.html'
  }
});
</code>

当我将上面的指令更改为这个指令时，刷新页面后丢失 html 的问题消失了：

<code>
app.directive('ngContent', function() {
  return {
    template: '<div id="content">'+
    '<div ng-view></div>'+
    '</div>'
  };
});
</code>

经过一番挖掘，我发现 Angular 团队在该场景中存在问题，对此有简单的解决方案： https://github.com/angular/angular.js/issues/6812

根据@jswright 和@saidimu 写的：

如果 ng-view 实例化被延迟（通过 ng-include），那么 $route 实例化也会被延迟。这意味着 $route 将错过位置更改事件。

修复：在实例化时运行 $route 更新函数（不仅仅是在位置更改事件上）

所以为了解决这个问题，你只需要将 $route 注入到 run 函数中。

<code>
app.run(['$route', function($route)  {

}]);
</code>

我发现了关于 $route 的有趣帖子：

$route Must Be Injected In Order To Enable The $routeChangeSuccess Event In AngularJS

再一次，谢谢你们的帮助。

【讨论】：