javascript - 在 AngularJS 中映射现有数据

Question

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

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

1.使用MVC的Razor引擎<​​/strong>

这里，包含啤酒的模型在服务器上进行处理并呈现 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 对 Controller 执行 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>

Controller

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 绑定(bind)到 AngularJS 中的 Controller 模型？

<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>

Answer 1

在 MVC Controller 中

    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 部分:

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
....

}]);