web-dev-qa-db-ja.com

ASP.NET MVCとAngularJSルーティングの使用方法

SPAのコレクションを目的とした新しいASP.NET MVCおよびAngularJSアプリケーションに取り組んでいます。 MVCエリアの概念を使用して個々のSPAを分離し、次に各MVCエリア内でAngularJSを使用してSPAを作成しています。

私はAngularJSが初めてであり、MVCとAngularJSの両方のルーティングの組み合わせに関する答えを見つけることができなかったため、ここに質問を投稿して、助けが得られるかどうかを確認したいと思いました。

各MVCエリアにサービスを提供する標準のMVCルーティングセットアップがあります。

    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        routes.MapMvcAttributeRoutes();
        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
        routes.AppendTrailingSlash = true;
    }

これは正常に機能し、次のようなURLを提供します。

http://servername/Application1/
http://servername/Application2/

ここで、各アプリケーション領域内で、AngularJSルーティングを使用しようとしています。また、$ locationProvider.html5Mode（true）;を使用しています。次のように、各エリア内でクライアント側のルーティングを取得します。

http://servername/Application1/view1
http://servername/Application1/view2
http://servername/Application2/view1/view1a
http://servername/Application2/view2/view2a
http://servername/Application2/view3

これがApplication1の私のAngularJSルーティングスニペットです。

app1.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    var viewBase = '/Areas/Application1/app/views/';
    $routeProvider
        .when('/Application1/view1', {
            controller: 'View1Controller',
            templateUrl: viewBase + 'view1.html'
        })
        .when('/Application2/view2', {
            controller: 'View2Controller',
            templateUrl: viewBase + 'view2.html'
        })
        .otherwise({ redirectTo: '/Application1/view1' });
    $locationProvider.html5Mode(true);
}]);

したがって、最初は動作するようです（少なくともURLは正しいように見えます）。しかし、エリア間またはエリア内のビュー間を移動し始めたとき、またはリフレッシュしても、何かが「失われ」、物事が機能しなくなります。 URLは依然として正しいように見えますが、ビューが見つからず、正しく読み込まれていません。

ASP.NET MVCとAngularJSルーティングを連携させて上記のシナリオを実現する方法に関するヘルプ/ガイダンスはありますか？

ありがとう!!!

asp.net-mvcangularjsangularjs-routing
51
lmttag

答えてくれてありがとう、agbenyezi。あなたが提供した記事を見ましたが、とにかく元に戻っただけです。

しかし、私はそれを理解し、機能させることができました。答えは比較的単純であることが判明しましたが、しばらく時間がかかり、多くの検索が必要でした。とにかく、MVCエリアを使用しているため、http://servername/Application1/view[x]（Application1はエリア内のMVCコントローラー、view1、view2、view3などはAngularjsビュー）、アプリケーション全体のMVC部分が混乱し、view [x]という名前のアクションを見つけようとしましたApplication1コントローラー（存在しない）。

そのため、エリアのAreaRegistrationクラス（エリアの特定のルートを定義している）では、アプリケーションコントローラーのインデックスアクションに常に強制するために、既定のMVCルートの前に一種のキャッチオールルートを追加する必要がありました。何かのようなもの：

        // Route override to work with Angularjs and HTML5 routing
        context.MapRoute(
            name: "Application1Override",
            url: "Application1/{*.}",
            defaults: new { controller = "Application1", action = "Index" }
        );

さて、http://servername/Application1/view[x] Application1 MVCコントローラー、インデックスアクションにルーティングし、Angularjsがさまざまなビューへのルートを引き継ぎますが、すべてのURLにHTML5ルーティング構成が含まれます。

他の人を助けることを願っています。

ありがとう！

58
lmttag