javascript - otro - ¿Cómo se supone que debo pasar los datos del controlador del lado del servidor al controlador AngularJS?

ng controller

Question

Me he encontrado con lo que creo que es un escenario común, en el que estoy usando un patrón MVC (específicamente el marco MVC de ASP.NET) para una aplicación web, con AngularJS en la parte frontal. Mi problema es que tengo un valor particular que es parte del modelo que se pasa a mi vista, que también quiero poner a disposición del alcance de mi controlador Angular, idealmente tan pronto como se inicialice el controlador.

Cómo hacer esto es una pregunta que se ha preguntado y respondido antes. Hay un candidato obvio para ello: ngInit . Sin embargo, en algún momento, Angular actualizó su documentación con lo que parece ser una advertencia contra este pensamiento específico:

El único uso apropiado de ngInit es para ngInit alias propiedades especiales de ngRepeat , como se ve en la siguiente demostración. Además de este caso, debe usar controladores en lugar de ngInit para inicializar valores en un ámbito.

La alternativa sugerida no es muy relevante.

Por supuesto, hay otras soluciones que se me ocurren. La vista podría insertar el valor en una directiva ngModel en una entrada oculta, por ejemplo. O simplemente podría ignorar la advertencia y usar ngInit todos modos. Pero cualquier cosa que se me ocurra es una forma más fea de hacer lo mismo que ngInit , o claramente peor.

En última instancia, el hecho de que lo que me parece la solución obvia es aparentemente la solución equivocada es probablemente un indicador de que mi forma de pensar no está en sintonía con la forma en que se supone que se hace Angular. Así que mi pregunta no es "cómo lidiar con este escenario", sino que es:

1. ¿Cómo se supone que debo tratar o evitar este escenario?
2. ¿Por qué no se supone que ngInit usar ngInit ?

Una aclaración, ya que a partir de los dos primeros comentarios, esto no está claro: se trata de una situación en la que parte o la mayor parte de la página se sirve directamente como la vista MVC, con Angular solo se proporciona alguna funcionalidad particular. Los datos que quiero pasar a mi controlador Angular ya se pasaron a la vista en el modelo. No quiero que el controlador Angular vaya y tenga que hacer su propia solicitud de obtención al servidor solo para obtener el mismo parámetro que ya está disponible para la vista en un formato diferente.

Answer 1

Debe pasarlo de su controlador del lado del servidor a su controlador AngularJS utilizando un proveedor de ''valor'' o ''constante'', como se describe aquí: https://docs.angularjs.org/guide/providers

Por ejemplo, podrías hacer algo como lo siguiente:

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

y luego inyectarlo en su controlador

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

como se describe en este artículo: http://blog.mariusschulz.com/2014/03/25/bootstrapping-angularjs-applications-with-server-side-data-from-aspnet-mvc

Si cree que puede ser más complicado que solo un valor, puede usar un proveedor de servicios e inyectarlo en lugar del proveedor de valores.

Answer 2

Supongo que tienes este modelo:
Modelo

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

De esta manera puede pasar datos de su controlador a su vista:
Controlador

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);
    }
}

Ver :

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