我应该如何在 AngularJS 控制器中从服务器端控制器传递数据？

Question

我遇到了一个我认为很常见的场景，在这个场景中，我在前端使用 AngularJS 的 Web 应用程序使用 MVC 模式（特别是 ASP.NET 的 MVC 框架）。我的问题是我有一个特定的值，它是传递给我的视图的模型的一部分，我也想在我的 Angular 控制器的 $scope 上使用它，最好是在控制器初始化后立即使用。

如何做到这一点是一个已经被问及并回答过的问题。有一个明显的候选者：ngInit。然而，在某些时候，Angular 更新了their documentation，似乎是对这种特定想法的警告：

ngInit 的唯一适当用途是为 ngRepeat 的特殊属性设置别名，如下面的演示所示。除了这种情况，您应该使用控制器而不是ngInit 来初始化作用域上的值。

建议的替代方案不是很相关。

当然，我还可以想到其他解决方法。例如，视图可以将值插入到隐藏输入的ngModel 指令中。或者我可以直接忽略警告并使用ngInit。但我能想到的任何东西要么是与 ngInit 做同样事情的更丑陋的方式，要么显然更糟。

归根结底，对我来说似乎显而易见的解决方案显然是错误的，这可能表明我的思维方式与 Angular 的应有方式不一致。所以我的问题不是“我该如何处理这种情况”，而是：

1. 我应该如何处理或避免这种情况？
2. 为什么我不应该使用ngInit？

澄清一下，因为从前两个 cmets 开始，这并不清楚：这是针对部分或大部分页面直接作为 MVC 视图提供服务的情况，Angular 仅提供某些特定功能.我想传递给 Angular 控制器的数据已经传递给模型中的视图。我不希望 Angular 控制器然后必须向服务器发出自己的 get 请求，只是为了以不同的格式获取视图已经可用的相同参数。

Answer 1

您应该使用“值”或“常量”提供程序将其从服务器端控制器传递到 AngularJS 控制器，如下所述：https://docs.angularjs.org/guide/providers

例如，您可以执行以下操作：

<script>
    angular.module("hobbitModule").value("companionship", @Html.Raw(Model));
</script>

然后将其注入到您的控制器中

var module = angular.module("hobbitModule");
module.controller("CompanionshipController", function($scope, companionship) {
    $scope.companions = companionship;
});

如本文所述：http://blog.mariusschulz.com/2014/03/25/bootstrapping-angularjs-applications-with-server-side-data-from-aspnet-mvc

如果您认为它可能会变得比一个值更复杂，您可以使用服务提供者并注入它而不是值提供者。

Answer 2

假设你有这个模型：
模型

public class Product
{
        public int Id { get; set; }
        public string Name { get; set; }
        public float Price { get; set; }
        public string Description { get; set; }
}

这样您就可以将数据从控制器传递到视图中：
控制器

public string GetSerializedProduct()
{
    var products = new[] 
    { 
        new Product{Id=1,Name="product1",Price=4500,Description="description of this product"},
        new Product{Id=2,Name="product2",Price=500,Description="description of this product"},
        new Product{Id=3,Name="product3",Price=400,Description="description of this product"},
        new Product{Id=4,Name="product4",Price=5500,Description="description of this product"},
        new Product{Id=5,Name="product5",Price=66500,Description="description of this product"}
    };
    var settings = new JsonSerializerSettings { ContractResolver=new CamelCasePropertyNamesContractResolver()};
    return JsonConvert.SerializeObject(products,Formatting.None,settings);
    }
}

查看：

@model string
<div class="container" ng-init="products = @Model">
    <div class="row">
        <div class="col-lg-12">
            <table class="table table-condensed table-hover">
                <tr>
                    <th>Id</th>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>Description</th>
                </tr>
                <tr ng-repeat="product in products">
                    <td>{{product.id}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.price}}</td>
                    <td>{{product.description}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>