javascript - ventajas - patrón de diseño mvc modelo vista controlador

Obtención y transmisión de datos del modelo MVC al controlador AngularJS

Question

Soy bastante nuevo en AngularJS y estoy perdido aquí.

En este momento, mi programa MVC usa Razor para mostrar todos los datos en mi base de datos .mdf (es decir: @ Html.DisplayFor (modelItem => item.LastName) ). Sin embargo, quiero ir mayormente angular. Estoy intentando usar ng-repeat para mostrar todos los datos del modelo, pero no estoy seguro de cómo pasar esos datos del modelo al controlador Angular y luego usarlos. He intentado serializar el modelo a JSON en mi ng-init, pero no creo que lo esté haciendo bien (obviamente).

Aquí está mi código:

// controller-test.js

var myApp = angular.module(''myModule'', []);

myApp.controller(''myController'', function ($scope) {
    $scope.init = function (firstname) {
        $scope.firstname = firstname;
    }
});

<!-- Index.cshtml -->

@model IEnumerable<Test.Models.Employee>

@{
    ViewBag.Title = "Index";
}

<div ng-app="myModule">
    <div ng-controller="myController" ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))">
         <table>
             <tr ng-repeat= <!--THIS IS WHERE I''M STUCK -->
         </table>
    </div>
</div>

<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/controller-test.js"></script>
@Scripts.Render("~/Scripts/angular.js")

No estoy seguro de en qué debo estar repitiendo para obtener el Nombre del modelo serializado. Siento que tengo todas las piezas, pero no estoy seguro de cómo conectarlas.

Answer 1

¡Gracias a darkstalker_010!

Lo que estaba confundido era con la forma en que mi archivo del controlador Angular interactuaba con la vista. Todo lo que tenía que hacer era simplemente tratar mis datos angulares {{}} en mi archivo .cshtml como si intentara acceder a los datos del Modelo normalmente (es decir, modelo.Atributo)

Así que aquí está el código de trabajo actualizado:

// controller-test.js

var myApp = angular.module(''myModule'', []);

myApp.controller(''myController'', function ($scope) {
    $scope.init = function (employees) {
        $scope.employees= employees;
    }
});

<!-- Index.cshtml -->

@model IEnumerable<Test.Models.Employee>

@{
    ViewBag.Title = "Index";
}

<div ng-app="myModule">
<div ng-controller="myController" data-ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))">
            <table>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Title</th>
                    <th>Department</th>
                    <th>Email</th>
                </tr>
                <tr ng-repeat="e in employees">
                    <td>{{e.FirstName}}</td>
                    <td>{{e.LastName}}</td>
                    <td>{{e.Title}}</td>
                    <td>{{e.Department.DepartmentName}}</td>
                    <td>{{e.Email}}</td>
                </tr>
            </table>
</div>
</div>


<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/controller-test.js"></script>
@Scripts.Render("~/Scripts/angular.js")

Esto es lo que parece sin formato:

Answer 2

Si tiene la clave firstName en su objeto Json como:

{
 "employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter","lastName":"Jones"}
  ]
}

Puedes hacerlo de la siguiente manera.

En su controlador:

myApp.controller(''myController'', function ($scope) {
    $scope.init = function (employees) {
        $scope.employees = employees;
    }
});

En su opinión:

<table>
    <tr ng-repeat= "employee in employees">
        <td>{{ employee.firstName }}<td>
    </tr>
</table>