在 AngularJS 中映射现有数据答案

【问题标题】：Mapping existing data in AngularJS在 AngularJS 中映射现有数据
【发布时间】：2015-01-26 16:44:25
【问题描述】：

我开始学习一些AngularJS 并试图确定它在与ASP.NET MVC 一起工作时的实用性。

假设我有一个视图，它在表格中显示来自存储库的啤酒。我可以通过两种方式输出信息。

1.使用 MVC 的 Razor 引擎

这里，包含啤酒的模型在服务器上进行处理并呈现 html 页面。

<h3>Rendered using Razor!</h3>
<table class="table table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Colour</th>
            <th>Tasted?</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var beer in Model)
        {
            <tr>
                <td>@beer.Name</td>
                <td>@beer.Colour</td>
                <td>@beer.Tried</td>
            </tr>
        }
    </tbody>
</table>

2.使用 Angular 重复

在这里，HTML 立即返回，并且 Angular 对控制器执行AJAX 调用以检索其模型。获得该数据后，它会将其输出到表中。

<h3>Rendered using Angular!</h3>
<table class="table table-condensed table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Colour</th>
            <th>Tasted?</th>
        </tr>
    </thead>
    <tbody>

        <tr data-ng-repeat="beer in model">
            <td>{{ beer.Name }}</td>
            <td>{{ beer.Colour }}</td>
            <td>{{ beer.Tried }}</td>
        </tr>

    </tbody>
</table>

控制器

angular.module('BeerController', [])
.controller('BeerCtrl', ['$scope', '$http', function ($scope, $http) {

    $scope.model = {};

    $http.get('/Beer/GetBeers').success(function (data) {

        $scope.model = data;

    });


}]);

我的问题

有没有办法使用 Razor 引擎进行数据的初始加载，而使用 Angular 进行其他所有操作（分页调用、搜索等）？换句话说，如何将现有的 html 绑定到 AngularJS 中的控制器模型？

<table class="table table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Colour</th>
            <th>Tasted?</th>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td>Fosters</td>
                <td>Gold</td>
                <td>True</td>
            </tr>
            <tr>
                <td>Becks</td>
                <td>Amber</td>
                <td>False</td>
            </tr>
            <tr>
                <td>Cobra</td>
                <td>Gold</td>
                <td>True</td>
            </tr>
    </tbody>
</table>

【问题讨论】：

你不会......你会进行 AJAX 调用并显示数据。你可以对来自服务器的值使用ng-init，或者用字符串化数据创建一个常量，在你的控制器中解析它，但这有点矫枉过正
Angular 的全部意义在于它取代了任何服务器端模板，例如 Razor。服务器必须做的就是公开一个 JSON REST API 和一个服务于 SPA 应用程序初始 html 的端点。
@DarinDimitrov 他们不能一起工作吗？使用 Razor 最初加载 html 和数据并为其他所有内容公开 REST API？这将减少对服务的请求数量
@heymega -- 我认为你只是在创建更多的工作来尝试将服务器端模板网格化到客户端中。
@tymeJV 是的，我认为你可能是对的

标签： javascript asp.net-mvc angularjs razor

【解决方案1】：

在你的 MVC 控制器中

    public ActionResult Index()   
    {

    var model =.....    

    //optional
    JsonSerializerSettings jsonSerializerSettings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };

    ViewBag.data = JsonConvert.SerializeObject(model, Formatting.Indented, jsonSerializerSettings);

return View()

    }

在你看来 Index.cshtml

...
@section Scripts { 

//make sure that all anular scripts are loaded before that
<script>
angular.module('BeerController').service('dataService', function () {

var data= @Html.Raw(ViewBag.data);

return  {

data:data

}

});
...
</script>

}

角部分：

angular.module('BeerController', [])
.controller('BeerCtrl', ['$scope', '$http','dataService', function ($scope, $http,dataService) {

// now you can get data from your dataService without extra trip to your server
    $scope.model = dataService.data
....

}]);

【讨论】：