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>