0

私は ocLazyLoad ライブラリを使用して、angular javascript/html ファイルを遅延ロードし、次のコード スニペットのようにモジュールに挿入しています。

    $routeProvider.when('/Home/Index', {
        templateUrl: '/app/Index.html',
        controller: 'IndexController',
        resolve: {
            deps: [
                '$ocLazyLoad', function ($ocLazyLoad) {
                    return $ocLazyLoad.load({}, {
                        name: 'mix',
                        files: [
                            '/app/IndexController.js'
                        ]
                    });
                }
            ]
        }
    });

このアプローチでは、ファイル システムから静的な html ファイルを取得します。しかし、私が望むのは、templateUrl:'/Home/Index' を設定することです。したがって、Home コントローラーの Index アクション メソッドが実行され、指定された .cshtml ページが razor でレンダリングされ、Angular ディレクティブを含む html が返されます。

これが私がやりたいことです。かみそりビュー:

<p>
    @foreach (var item in new List<int> { 1, 2, 3, 4, 5 })
    {
        @item
    }
</p>

<div ng-controller="IndexController as vm">
    <p>{{vm.text}}</p>
    <p>{{3 + 3}}</p>
</div>

サーバーからの応答:

<p>12345</p>
<div ng-controller="IndexController as vm">
    <p>{{vm.text}}</p>
    <p>{{3 + 3}}</p>
</div>

この html に加えて、遅延ロードされた IndexController.js で、angular がその仕事を行います。

それは可能ですか？

4

1 に答える 1

0

はい、可能です。あなたがする必要があるのは、基本を覚えることだけです。公開しない限り、Angular はサーバー側について何も知りません。

$routeProvider.when('/ng-Home/Index', { //It can't be the same as the Action URL since it won't work the way you want it to.
    templateUrl: '/Home/Index', //Add the html of your static page into the razor view.
    controller: 'IndexController'
    }
});

内部的には、Angular はサーバー側からプレーンな HTML ファイルまたはサーバーから出力された HTML (JSON や XML ではなく、HTML 応答) を呼び出します。Angular は、それがファイルであるか応答 HTML であるかを気にしません。ルーティングは、単に応答 HTML を取得して出力します。

Razor で生成されたすべての HTML がモデルを処理する角度のある方法に準拠しているわけではないため、通常、これは面倒になる可能性があります。ただし、ASP.NET からのバンドルやミニフィケーションの使用など、いくつかの便利なことを達成するのに役立ちます。または、HTML に直接部分ビューを追加します。

Razor ビューでは、次の方法で JS ファイルを追加できます。

@Scripts.Render("~/Path/To/Script")

それが役に立てば幸い！

于 2016-09-23T22:47:05.383 に答える