Fatal编程技术网
  • angularjs/
  • 带ASP.NET MVC5的AngularJS-使用带模板的routeProvider，但也在_Layout.cshtml中添加AngularJS绑定数据

带ASP.NET MVC5的AngularJS-使用带模板的routeProvider，但也在_Layout.cshtml中添加AngularJS绑定数据

angularjs

带ASP.NET MVC5的AngularJS-使用带模板的routeProvider，但也在_Layout.cshtml中添加AngularJS绑定数据,angularjs,angularjs-routing,asp.net-mvc-5.1,Angularjs,Angularjs Routing,Asp.net Mvc 5.1,早上好 我正在构建一个MVC5应用程序，其中包括一个SPA（单页应用程序），它在我更大的ASP.NET MVC5应用程序的一小部分中运行 下面是我的angular应用程序设置： var storeApp = angular.module('AngularStore', ['ngRoute']). config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { $rout

早上好

我正在构建一个MVC5应用程序，其中包括一个SPA（单页应用程序），它在我更大的ASP.NET 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

我的\u Layout.cshtml文件在顶部注册了angular应用程序：

<html lang="en" ng-app="AngularStore">
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>

@{
ViewBag.Title=“店铺”；
ViewBag.InitModule=“AngularStore”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
@节MyScripts
{
}
正如您可以看到的那样，具有ng viewangular属性的div将加载my browse.html模板

这一切都按预期进行，但这是我的难题

My browse.html模板是一个产品列表。您可以单击“添加到购物车”并将产品添加到购物车

问题是我希望购物车中物品的数量和货币价值显示在_Layout.cshtml上。因此，本质上，无论模板角度如何，计数和货币都会出现

因此，我想在my_Layout.cshtml的顶部（标题）中放置一些有角度的东西，这些东西将查看购物车并显示计数和货币价值

这可能很容易，但我很难弄清楚如何让它工作，以及如何以正确的方式构建它

也许我需要在我的_Layout.cshtml上的上使用ng控件

任何指点都将不胜感激

如果你住在墨尔本，我会给你买啤酒

谢谢
Russ

我也在构建主要是MVC的应用程序，但有几个页面使用angularjs，是mini-SPA的。你需要在你的_布局级别使用一个控制器。您只需在该级别创建一个div并使用问题中提到的ng controller指令即可实现这一点。你根本不需要对路由做任何事情，ng控制器定义了要使用的控制器，实际上我在Minipa中没有使用angularjs路由（尽管我可以看到如果你的url在一个页面内发生变化，你可能会想在哪里）

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

我也在构建主要是MVC的应用程序，但有几个页面使用angularjs，并且是迷你SPA的。你需要在你的_布局级别使用一个控制器。您只需在该级别创建一个div并使用问题中提到的ng controller指令即可实现这一点。你根本不需要对路由做任何事情，ng控制器定义了要使用的控制器，实际上我在Minipa中没有使用angularjs路由（尽管我可以看到如果你的url在一个页面内发生变化，你可能会想在哪里）

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

在包含标题HTML的布局中保留根控制器。在根控制器中定义count变量，并将其绑定到任何头HTML元素以显示count值。现在，您可以访问嵌套控制器中根控制器的作用域（在您的示例中为storeController）。您可以在storeController中设置count变量（来自根控制器）值，该值将在绑定到某个标题HTML元素时自动显示标题中的值。

在包含标题HTML的布局中保留根控制器。在根控制器中定义count变量，并将其绑定到任何头HTML元素以显示count值。现在，您可以访问嵌套控制器中根控制器的作用域（在您的示例中为storeController）。您可以在storeController中设置count变量（来自root controller）值，该值将自动显示在标题中，因为该值绑定到某个标题HTML元素。

Ryan，这太棒了，效果非常好。所以我有我的_布局，它有一个称为_TopHeader的部分，它有一个div在上面调用我的控制器。我刚刚遇到了最后一个问题。在_TopHeader内部，我还有一个MVC操作链接，该链接旨在转到/account/login，但由于我将上述所有内容包装在ng app=“AngularStore”中，我提到的MVC路线被我的angularjs路线提供商捕获，我无法到达我的MVC路线，我只能继续在我的路径中结束。否则，我的angularjs路线提供商设置的一部分。你觉得这个怎么样？谢谢Russ@RyanLangton…嗨Ryan/Russ，您能提供一个示例代码或项目来说明您对原始问题的看法吗？我是Angular和MVC的新手，我也在从事类似的工作，但你的解释让我难以理解。这是我的问题（）Ryan，这太棒了，而且效果很好。所以我有我的_布局，它有一个称为_TopHeader的部分，它有一个div在上面调用我的控制器。我刚刚遇到了最后一个问题。在_TopHeader中，我还有一个MVC操作链接，该链接指向/account/login，但因为我将上述所有内容都包装在了里面 
@{
    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>