ASP.NET MVC およびエンティティフレームワークで AngularJS を使用する方法 - インフラジスティックス・ジャパン株式会社Blog

原文: Dhananjay Kumar - How to use AngularJS in ASP.NET MVC and Entity Framework

最近、AngularJS と ASP.NET MVC がとても人気のようです。このブログではそれぞれの長所を生かしながら ASP.NET MVC で AngularJS を使用する方法をご説明します。また、最初のアプローチとしてエンティティフレームワークデータベースでデータへアクセスする方法をご説明します。更に AngularJS でデータへアクセスし、コントローラーでビューへ渡す方法もご紹介します。このブログは以下のテーマに基づいて進めます:

ASP.NET MVC に AngularJS ライブラリを追加
AngularJS の参照、バンドルおよび縮小
エンティティフレームワークデータベースでデータのフェッチ
ASP.NET コントローラーから JSON データを返す
AngularJS サービスで JSON データを使用
AngularJS コントローラーでビューにデータを渡すために AngularJS サービスを使用
AngularJS View でデータの描画

はじめに、ASP.NET MVC アプリケーションを作成し、MVC プロジェクトを右クリックをします。コンテキストメニューから [Nuget パッケージの管理] を選択します。AngularJS を検索してプロジェクトにインストールします。

AngularJS ライブラリが正しく追加されると、ファイルは [Scripts] フォルダーに保存されます。

AngularJS ライブラリの参照

プロジェクトに AngularJS ライブラリを追加する方法は 2 つあります。MVC 最小化およびバンドル、または個別ビューの Script セクションに AngularJS を追加する方法です。バンドルを使う場合、AngularJS はプロジェクトに使用できます。特定のビューにも AngularJS の使用が可能です。

Home コントローラーの特定のビュー (Index.cshtml) で AngularJS を使用すると仮定しましょう。まず以下のようにスクリプトセクション内で AngularJS ライブラリへ参照する必要があります。

@section scripts{
    <script src=""~/Scripts/angular.js"">script>
}

次に以下のように ng-app ディレクティブまたはその他の必要なディレクティブを HTML 要素に適用します。

<div ng-app="""" class=""row"">
   <input type=""text"" ng-model=""name"" />
   {{name}}
</div>

アプリケーションを起動した際に、AngularJS が [Index] ビューで起動しているのが確認できます。この方法では AngularJS ライブラリが Index ビューでのみ参照されているため、AngularJS を他のビューで使用することができません。

MVC アプリケーションで AngularJS の使用が必要な場合があります。その場合、MVC のバンドルおよび最小化またレイアウトレベルで AngularJS ライブラリを使用する方が適切です。これには [App_Start] フォルダーの BundleConfig.cs を開き、以下のように AngularJS ライブラリのためのバンドルを追加します。

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle(""~/bundles/angular"")
        .Include(""~/Scripts/angular.js""));
}

BundleConfig ファイルにバンドルを追加した後、以下のように _Layout.cshtml に AngularJS バンドルを追加します。

<head>
    <meta charset=""utf-8"" />
    <meta name=""viewport"" content=""width=device-width, initial-scale=1.0"">
    <title>@ViewBag.Title - My ASP.NET Applicationtitle>
    @Styles.Render(""~/Content/css"")
    @Scripts.Render(""~/bundles/modernizr"")
    @Scripts.Render(""~/bundles/angular"")
    @Scripts.Render(""~/bundles/jquery"")
    @Scripts.Render(""~/bundles/bootstrap"")
    @RenderSection(""scripts"", required: false)
</head>

AngularJS バンドルを作成し、それを _Layout.cshtml に参照することにより、AngularJS はアプリケーション全体で使用できます。

AngularJS でデータベースからのデータ

これまでに特定のビューレベルまたはアプリケーション全体レベルで AngularJS を設定する方法を紹介しました。次は MVC アプリケーションを作成します:

EF データベースファーストアプローチを使用しデータベースからデータをフェッチします。
MVC コントローラーから JSON を返します。
$http を使用して、データをフェッチする AngularJS サービスを作成します。
AngularJS コントローラーを作成します。
テーブルのデータを表示するために MVC ビューに AngularJS を作成します

EF データベースファーストアプローチを使用しデータベースへ接続する

EF データベースファーストアプローチでデータベースに接続するには MVC アプリケションを右クリックし新しい項目を選択します。以下の画像のようにデータタブで [ADO.NET Entity Model] オプションを選択します。

次の画面で [EF Designer from database] を選択します。

次の画面で [New Connection option] をクリックします。新しいデータベース接続を作成します:

データベースのサーバー名を提供します。
ドロップダウンからデータベースを選択します。この例では [School] データベースを使用し、ドロップダウンから選択します。

次の画面で接続文字列は既定値のままで、[Next] をクリックします。

次の画面でモデルの一部として、保存テーブルまたは他のエンティティを選択します。シンプルにするためにモデルでは [Person] テーブルタブのみ使用します。

ここまででデータベース接続を作成し、プロジェクトにモデルを追加しました。edmx ファイルはプロジェクトの一部として追加されました。

MVC コントローラーから JSON を返します。

Person データを JSON として返すには、コントローラーで JsonResult 返却型のアクションを作成します。JSON データを返す Web API は簡単に作成できます。ただし、このブログの目的は AngularJS の使い方の紹介なので、JSON データを返す一番簡単な方法で行います。

public JsonResult GetPesrons()
{
    SchoolEntities e = new SchoolEntities();
    var result = e.People.ToList();
    return Json(result, JsonRequestBehavior.AllowGet);
}

$http を使用して、データをフェッチする AngularJS サービスを作成します。

以下は AngularJS の主要な用語とその概要です:

コントローラー

コントローラーは、データおよびビジネスロジックを持つ JavaScript のコンストラクター関数です。$scope オブジェクトでコントローラーとビューの間で通信が行われます。ビューでコントローラーが使用されているとき、インスタンスが作成されます。10 回使用した場合、10 個のコンストラクターが作成されます。

サービス

サービスはアプリケーションライフサイクル毎に 1 回、インスタンスを作成する JavaScript 関数です。コントローラー間で共有されるものはすべてサービスの一部である必要があります。サービスを作成するには 5 つの方法があります。最も人気があるのはサービスメソッドやファクトリメソッドです。AngularJS はビルトインのサービスも提供します。Angular アプリケーションから HTTP に基づくサービスを呼ぶには $http が使用できますが、その前にサービスを挿入する必要があります。

モジュール

モジュールは JavaScript 関数で、サービスまたはコントローラーなど関数を含みます。Angular アプリケーション毎に少なくともモジュールが 1 つ必要です。

注: 以上が AngularJS コンセプトの簡単な概要です。詳細についてはウェブでご確認ください。

ではモジュールを作成しましょう。はじめに、プロジェクトに右クリックをし、JavaScript ファイルを追加します。ファイル名は自由に付けていただいて構いません。ここでは StudentClient.js にします。

StudentClient.js にモジュールとコントローラーを作成しました。後で MVC アクションからデータをフェッチするようにコントローラーを変更します。

var StudentApp = angular.module('StudentApp', []);
StudentApp.controller('StudentController', function ($scope) {
    $scope.message = ""Infrgistics"";
});

ビューでモジュールとコントローラーを使用するには、はじめに StudentClient.js の参照を追加し、StudentApp モジュールに ng-app ディレクティブの値を設定する必要があります。以下はその方法を示します:

@section scripts{
    <script src=""~/StudentClient.js"">script>
}

<div ng-app=""StudentApp"" class=""row"">
    <div ng-controller=""StudentController"">
        {{message}}
    </div>
</div>

この時点でアプリケーションを実行した場合、ビューに Infragistics が描画されます。サービスの作成から始めましょう。ファクトリメソッドでカスタムサービスを作成します。サービスで、$http ビルトインサービスはコントローラーのアクションメソッドを呼びます。以下はサービスを同じ StudentService.js ファイルに配置します。

StudentApp.factory('StudentService', ['$http', function ($http) {
    var StudentService = {};
    StudentService.getStudents = function () {
        return $http.get('/Home/GetPersons');
    };
    return StudentService;
}]);

サービスを作成し、次にコントローラーを作成します。コントローラーの中でカスタムサービスを使用し、返されたデータを $scope に指定します。以下のコードでコントローラーを作成します:

StudentApp.controller('StudentController', function ($scope, StudentService) {
    getStudents();
    function getStudents() {
        StudentService.getStudents()
        .success(function (studs) {
            $scope.students = studs
            console.log($scope.students);
        })
        .error(function (error) {
            $scope.status = 'Unable to load customer data: ' + error.message;
            console.log($scope.status);
        });
    }
});

これでコントローラー、サービスとモジュールの作成が完了しました。すべてを統合するとコード (StudentClient.js) は以下のようになります:

var StudentApp = angular.module('StudentApp', []);
StudentApp.controller('StudentController', function ($scope, StudentService) {
    getStudents();
    function getStudents() {
        StudentService.getStudents()
        .success(function (studs) {
            $scope.students = studs;
            console.log($scope.students);
        })
        .error(function (error) {
            $scope.status = 'Unable to load customer data: ' + error.message;
            console.log($scope.status);
        });
    }
});

StudentApp.factory('StudentService', ['$http', function ($http) {
    var StudentService = {};
    StudentService.getStudents = function () {
        return $http.get('/Home/GetPersons');
    };
    return StudentService;
}]);

以下のようにビューにコントローラーを使用することが可能ですが、Index.cshtml に AngularJS ビューを作成することに留意しておいてください。ビューは以下のように作成します:

@section scripts{
    <script src=""~/StudentClient.js"">script>
}

<div ng-app=""StudentApp"" class=""container"">
    <br/>
    <br/>
    <input type=""text"" placeholder=""Search Student"" ng-model=""searchStudent"" />
    <br />
    <div ng-controller=""StudentController"">
        <table class=""table"">
            <tr ng-repeat=""r in students | filter : searchStudent"">
                <td>{{r.PersonID}}td>
                <td>{{r.FirstName}}td>
                <td>{{r.LastName}}td>
            </tr>
        </table>
    </div>
</div>

ビューに ng-app、ng-controller、ng-repeat および ng-model ディレクティブを使用し、またテキストボックスでの入力をフィルターするために “filter” も使用します。基本的に ASP.NET MVC アプリケーションで AngularJS を使用する際に必要となる手順は以上です。

まとめ

このブログで ASP.NET MVC で AngularJS を使用する方法をご紹介しました。また、AngularJS の重要なコンポーネント、EF データベースファーストアプローチおよび MVC の基本的な定義についても簡単にご説明しました。今後のブログでこのトピックに関するの詳細な情報をご提供する予定です。このブログが ASP.NET MVC で AngularJS を使用する際にお役に立てれば幸いです。最後までお読みいただきありがとうございました！