web-dev-qa-db-ja.com

AngularJSコントローラーのサーバー側コントローラーからデータを渡すにはどうすればよいですか？

フロントエンドにAngularJSを使用して、WebアプリケーションにMVCパターン（具体的にはASP.NETのMVCフレームワーク）を使用しているという、一般的なシナリオであると私が信じているシナリオに遭遇しました。私の問題は、モデルの一部がビューに渡される特定の値を持っていることです。これは、理想的にはコントローラーがすぐに、Angularコントローラーの$ scopeでも利用できるようにしたいです。初期化されます。

これを行う方法は、以前に尋ねられ、答えられた質問です。明らかな候補があります：ngInit。ただし、ある時点でAngular更新 ドキュメント この特定の考えに対する警告のように見えます：

以下のデモに示すように、ngInitの唯一の適切な使用法は、ngRepeatの特別なプロパティのエイリアスを作成することです。この場合に加えて、スコープの値を初期化するには、ngInitではなくコントローラーを使用する必要があります。

提案された代替案はあまり関連性がありません。

もちろん、私が考えることができる他の回避策があります。ビューは、たとえば、非表示の入力のngModelディレクティブに値を挿入できます。または、警告を無視してngInitを使用することもできます。しかし、私が考えることができるものは、ngInitと同じことを行う醜い方法か、明らかに悪い方法のいずれかです。

最終的に、私にとって明らかな解決策のように見えるものが明らかに間違っているという事実は、おそらく私の考え方がAngularが行われることになっている方法と調和していないことを示しています。それで、私の質問「このシナリオにどのように対処するか」ではなく、次のようになります。

  1. このシナリオに対処する、または回避するために、私はどのように想定しますか？
  2. ngInitを使用しないのはなぜですか？

最初の2つのコメントから、これは明確ではないため、明確にします。これは、ページの一部または大部分がMVCビューとして直接提供され、Angularによって提供される機能の一部のみが含まれる状況です。 Angularコントローラーに渡したいデータは既にモデルのビューに渡されています。Angularコントローラーに渡してほしくないまた、ビューですでに使用可能な同じパラメーターを別の形式で取得するために、サーバーに対して独自のgetリクエストを実行する必要があります。

javascriptangularjsasp.net-mvcangularjs-controllerng-init
21
Ben Aaronson

ここで説明するように、「value」または「constant」プロバイダーのいずれかを使用して、サーバー側コントローラーからAngularJSコントローラーに渡す必要があります。 https://docs.angularjs.org/guide/providers

たとえば、次のようなことができます。

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

それをコントローラーに注入します

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

この記事で説明されているように： http://blog.mariusschulz.com/2014/03/25/bootstrapping-angularjs-applications-with-server-side-data-from-aspnet-mvc

値だけよりも複雑になる可能性があると思われる場合は、値プロバイダーの代わりにサービスプロバイダーを使用してそれを注入することができます。

25
Matty J

あなたがこのモデルを持っていると仮定します：
モデル

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

このようにして、コントローラーからビューにデータを渡すことができます。
コントローラー

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

表示：

@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>
2
Sirwan Afifi