1

早上好，

我正在构建一个 MVC5 应用程序，其中包含一个 SPA（单页应用程序），它在我更大的 ASP.NET MVC5 应用程序的一小部分中运行。

所以这是我的角度应用程序设置：

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

}]);

如您所见，它加载了browse.html，它是一个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角度属性的 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 在一个单一的时间内发生变化，我可以看到你可能想要的位置页）。

然而，我认为更合适的是有一个局部视图（如果你希望它总是在那里，你可以从你的 _Layout 渲染它），并且在那个局部视图中使用 ng-controller 这样你就可以为你的购物车拥有一个控制器和您商店的另一个控制器。您有许多选项可以在控制器之间进行通信。您可以使用 $scope.$root，或者将您的产品存储在您的会话数据中。

于 2014-02-15T19:29:15.940 回答
2

在布局中保留一个根控制器，其中包括标题 HTML。在根控制器中定义计数变量并将其绑定到任何标题 HTML 元素以显示计数值。现在您可以访问嵌套控制器中根控制器的范围（在您的情况下为 storeController）。您可以在storeController中设置 count 变量（来自根控制器）的值，当它绑定到某个 header HTML 元素时，它将自动在 header 中显示该值。

于 2014-05-04T09:39:12.890 回答