ASP.NET MVC + AngularJS答案

【问题标题】：ASP.NET MVC + AngularJSASP.NET MVC + AngularJS
【发布时间】：2015-03-25 00:41:05
【问题描述】：

我有一个带有 AngularJS 的 ASP.NET MVC 5 应用程序。

某些页面需要来自服务器的数据，我使用 $http 提供程序加载这些数据。但是它在等待答案时有很大的延迟。例如，我从服务器返回页面，在这个页面上我有 Foo Angular 控制器，它首先向服务器发出 GET 请求，然后我的数据被解析到表中。在执行此请求时，我可以看到模板 html，然后生成正常的表格。

我发现大多数解决方案都使用 Angular Routing，但在我的情况下这不是一个好方法，因为它不是真正的 SPA。

我尝试了this的解决方案，但也没有任何真正好的效果。

那么，当我的控制器启动时，是否可以在不使用 Angular 路由的情况下从服务器加载数据？

更新

这里是可以显示问题的屏幕。

加载主页时，我看到了这个：

然后，过了一段时间，我可以看到带有角度处理的结果页面：

此时执行的原始请求：

接下来的问题是：在从服务器角度检索数据时是否可以不显示表格布局（第一个屏幕）？

【问题讨论】：

Angular Routing 不是关于加载数据 - 它是关于显示您的 SPA 应用程序的不同视图。您可以完全按照您可能的方式加载数据 - 使用 $http。如果您的问题是关于长时间的延迟 - 问题中没有足够的信息来回答这个问题。在 Chrome 开发工具中查看网络流量 - 服务器可能需要很长时间才能回复。另外，也许你有很多数据并且需要时间渲染......另一方面，问题中没有足够的信息。
显示第一页，不是在加载数据时（除非您阻止 Angular 引导），而是在加载 Angular 时。下面关于ng-cloak的答案应该解决它
谢谢，ng-cloak 是我的解决方案

标签： angularjs asp.net-mvc-5

【解决方案1】：

Angular 有一个内置指令来处理这种情况，ngCloak。

ngCloak 指令用于防止 Angular html 模板在您的应用程序加载时被浏览器以原始（未编译）形式短暂显示。使用该指令可以避免 html 模板显示引起的不良闪烁效果。

只需确保 angular.js 已加载到文档的头部，并将 ng-cloak 指令添加到您遇到问题的任何 HTML 元素中：

<div ng-cloak>{{ 'hello' }}</div>

【讨论】：

谢谢@Claies。这对我很有用。真棒

【解决方案2】：

查看有关 Bootstrapping 的文档：https://docs.angularjs.org/api/ng/function/angular.bootstrap

这个基本设置就是你所需要的。

<div ng-controller="WelcomeController">
  {{greeting}}
</div>

然后在您的控制器中进行服务调用。

var app = angular.module('demo', [])
.controller('WelcomeController', function($scope, $http) {
      $http({
          method: 'GET',
          url: 'yoururl.com'
      }).success(function(response){
           $scope.welcome = response;
      });
});
 angular.bootstrap(document, ['demo']);

或者，如果您不构建 SPA，则仅使用 jQuery 的 AJAX 方法可能是更好的选择。

【讨论】：