1

おはようございます、

私は、より大きな ASP.NET MVC5 アプリケーションの小さな部分で実行される SPA (シングル ページ アプリケーション) を含む MVC5 アプリケーションを構築しています。

だからここに私のAngularアプリのセットアップがあります:

var storeApp = angular.module('AngularStore', ['ngRoute']).
config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
  $routeProvider.
      when('/shop', {
          templateUrl: 'Templates/browse.html',
          controller: storeController
      }).

      otherwise({
          redirectTo: '/'
      });

  $locationProvider.html5Mode(true);

}]);

ご覧のとおり、html テンプレートであるbrowse.htmlをロードします。

私の_Layout.cshtmlファイルには、上部に angular アプリが登録されています。

<html lang="en" ng-app="AngularStore">

この内部には、他の ASP.NET MVC アプリケーションと同様に、次のものもあります。

@RenderBody()

ASP.NET Mvc は、Index.cshtmlをレンダー ボディに読み込みます。

ここに私のIndex.cshtmlがあります：

@{
    ViewBag.Title = "Shop";
    ViewBag.InitModule = "AngularStore";

    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section MyScripts
{
    <script src="~/js/product.js" type="text/javascript"></script>
    <script src="~/js/store.js" type="text/javascript"></script>
    <script src="~/js/shoppingCart.js" type="text/javascript"></script>
    <script src="~/js/app.js" type="text/javascript"></script>
    <script src="~/js/controller.js" type="text/javascript"></script>
}

<div ng-view></div>

ご覧のとおり、ng-view angular 属性を持つ div は、browse.html テンプレートが読み込まれる場所です。

これはすべて期待どおりに機能しますが、ここに私のパズルがあります。

私のbrowse.htmlテンプレートは製品のリストです。「カートに追加」をクリックすると、Angular が製品をカートに追加します。

問題は、カート内の物の数と金額を _Layout.cshtml に表示することです。したがって、本質的には、どのようなテンプレートの角度がロードされても、カウントとお金が表示されます。

そのため、_Layout.cshtml の上部 (ヘッダー) 内にいくつかの角張ったものを配置して、カートを見てカウントと金額を表示したいと考えています。

これはおそらく簡単ですが、それを機能させる方法と正しい方法で構造化する方法を理解するのに苦労しています。

たぶん、_Layout.cshtml で ng-contoller を使用する必要がありますか?

任意のポインタをいただければ幸いです。

あなたがメルボルンに住んでいるなら、私はあなたにビールを買います！

ありがとうラス

4

2 に答える 2

3

また、主に MVC であるが、angularjs を使用し、ミニ SPA であるページがいくつかあるアプリケーションも構築しています。_Layout レベルで使用されるコントローラーが必要になります。これは、そのレベルで div を作成し、質問で述べたように ng-controller ディレクティブを使用するだけで簡単に実行できます。ルートで何もする必要はまったくありません。ng-controller は使用するコントローラーを定義します。実際、私は miniSPA で angularjs ルーティングを使用しません (ただし、URL が 1 回の変更で変更された場合に必要な場所はわかります)。ページ）。

ただし、より適切だと思うのは、部分ビュー（常にそこに表示したい場合は _Layout からレンダリングできます）を持ち、その部分ビュー内で ng-controller を使用して、カート用のコントローラーを 1 つ持つことができるようにすることです。そしてあなたの店のための別のコントローラー。コントローラ間の通信には、いくつかのオプションがあります。$scope.$root を使用するか、製品をセッション データに保存できます。

于 2014-02-15T19:29:15.940 に答える