角度：在不重新加载页面的情况下更新视图答案

【问题标题】：angular: updating a view without page reload角度：在不重新加载页面的情况下更新视图
【发布时间】：2016-12-02 20:14:25
【问题描述】：

我有一个 rootScope json 数组，它查看了几个控制器，并在另一个控制器中更新。 json 数组包含更新的 url。视图控制器大约有一半时间显示更新的 url，但如果我重新加载页面，我确实会 100% 地获得更新的视图。我曾尝试使用 $scope.$apply() 和 $timeout，但它们没有任何区别。
有人可以告诉我有什么角度工具可以解决这个问题吗？我希望有一个简单的方法。

【问题讨论】：

这是一个非常广泛的问题，有多种不同的可能方法，请尝试通过提供更多细节或代码来更具体。
你试过使用ngView和ngRoute吗？实际提供的文件永远不会改变，并且您的视图会填充到 ngView 中以更改用户看到的内容（以及 URL）。看起来页面已经导航走了，但实际上并没有，所以 $rootScope 被保留了。
@DominicAquilina： ngView 和 ngRoute 将相互结合使用以实现我的目标？或者我会使用其中一个吗？到目前为止，我一直只使用控制器和服务来共享功能。

标签： angularjs

【解决方案1】：

结束我之前的评论：

索引

<!doctype html>
<html ng-app="myapp">
  <head>
    <!--Head stuff-->
  </head>

  <body>
    <div ng-view=""></div>

    <!-- Scripts, other stuff -->
  </body>
</html>

主脚本

'use strict';

angular
.module('myapp', [
    //...
    'ngRoute',
    //...
  ])
.config(function (..., $routeProvider, ...) {
  $routeProvider
    .when('/404', {
      templateurl: '404.html',
      controller: 'ErrorCtrl',
      controllerAs: 'errorCtrl',
      title: 'You are lost'
    })
    .when('/', {
      templateUrl: 'views/home.html',
      controller: 'HomeCtrl',
      controllerAs: 'homeCtrl',
      title: 'Home'
    })
    .when('/contact', {
      templateUrl: 'views/contact.html',
      controller: 'ContactCtrl',
      controllerAs: 'contactCtrl',
      title: 'Contact Us'
    })
    .otherwise({
      redirectTo: '/404'
    });

  //...
})
.run (function (...) {
  //...
});

用法

<a href="/contact">Contact Us</a>

您将获取页面通用的所有基本模板代码并将其包含在索引中。基本上，不会改变的东西会一直存在。否则，将其从主页中取出，并将其放入带有自己控制器的模板文件中。或者，拥有一些共享控制器并仅将视图用作模板，然后将所有功能铲入指令中。我其实更喜欢后一种方法，但前一种方法如上所示。

这个解决方案值得注意的是页面实际上只加载了一次。由于每当您导航到不同的视图时都会停留在索引上，因此您只需从服务器获取新模板的 HTML 并将其注入到视图中（由 ngRoute 负责）。我相信默认情况下，您的 URL 中会包含一个 #，因此您可能希望在配置函数中启用 HTML5 模式。$locationProvider，然后添加以下行：

$locationProvider.html5Mode ({ enabled: true });

您还需要在索引文件的头元素中添加一个基：

<base href="/" />

家庭作业：Routes tutorial、HTML5 mode

如果您使用 Grunt，您可能还想查看 ngTemplates。它确实可以提高性能。

【讨论】：