在 ASP.NET 中管理 AngularJS Web 应用程序（替代 RequireJS）答案

【问题标题】：Managing an AngularJS web app within ASP.NET (alternative to RequireJS)在 ASP.NET 中管理 AngularJS Web 应用程序（替代 RequireJS）
【发布时间】：2014-01-17 09:38:08
【问题描述】：

我目前在我的应用程序中使用 RequireJS 和 AngularJS 的组合，而在服务器端是 ASP.NET。

我选择使用 RequireJS 有几个原因：

我在发现 Angular 之前就用它开始了这个项目。
轻松加载外部 API（例如 Facebook、Google）。
通过轻松缩小。 R.js
随着项目的增长，可以轻松地将文件添加到项目中，无需额外的脚本标签。

随着项目的成熟，我之前使用 RequireJS 的大部分领域现在看起来都是多余的，这意味着由于定义包装器，大多数文件最终都会有另一个级别的缩进（仅此而已）：

define(['angular'], function(angular) {});

可能还有一个小的性能。删除它时也会受益:)

所以我的问题是，在 ASP.NET 环境的上下文中管理 AngularJS 应用程序的最佳（最好是最快）方法是什么？ ASP.NET 脚本包？繁重的任务？

【问题讨论】：

如果您担心性能，我会放弃为应用程序提供服务的 ASP.NET，并将其作为静态内容提供。 WebAPI 可用于提供后端。
你有任何关于性能差异的统计数据吗？那么你将如何处理缩小/包括所有文件轻松进行调试？
require.js 或 grunt（或两者兼有）。
如果你想捆绑视图并将它们添加到$templateCache，有一个bundletransform for that

标签： javascript asp.net angularjs

【解决方案1】：

我正在寻找托管 Angular SPA 的 Visual Studio Web 项目的最佳设计/结构。我找到了很多灵感，在检查了几个模板后，我意识到我想要实现的是：

从 VS 中获利。尽可能使用 ASP.NET (MVC)
将功能拆分为更多/更小的文件（控制器、状态、配置、指令）
将每个方面（通常是实体）的逻辑保存在一个文件夹中（例如 Employee/）
使文件尽可能靠近，即视图、控制器、测试 (ng-boilerplate)
这样的文件结构

文件夹/文件结构示例

 // external libs
 Scripts
 Scripts / angular.js
 Scripts / ui-bootstrap-x.y.js
 Scripts / ...

 // project libs
 MyApp
 MyApp / Module
 MyApp / Module / Employee
 MyApp / Module / Employee / Employee.state.js        // state machine settings
 MyApp / Module / Employee / EmployeeList.ctrl.js     // controllers
 MyApp / Module / Employee / EmployeeDetail.ctrl.js
 MyApp / Module / Employee / DisplayEmployee.dirc.js  // directive
 MyApp / Module / Employee / Employee.spec.js         // tests

 // similar for other stuff
 ...

正如我们所见，诀窍在于每个单个/简单 js 文件的后缀：

".dirc.js" - 指令
".ctrl.js" - 控制器
“.spec.js” - 测试
...

有了这个，我们就可以配置 Bundle：

bundles.Add(new ScriptBundle("~/js/app")
    .Include("~/MyApp/app.js")
    .Include("~/MyApp/app.config.js")
    .IncludeDirectory("~/MyApp/", "*.module.js", true)
    .IncludeDirectory("~/MyApp/", "*.dirc.js", true)
    .IncludeDirectory("~/MyApp/", "*.ctrl.js", true)
    .IncludeDirectory("~/MyApp/", "*.state.js", true)
    ...
    );

看到测试被放置在这个结构中，但不是包的一部分...

index.cshtml

的摘录

<html data-ng-app="MyApp">
    <head>
      ...
      @Styles.Render("~/Content/css")
    </head>
    <body>        
        <div class="body" data-ui-view="body"></div>
        @Scripts.Render("~/js/angular")
        @Scripts.Render("~/js/app")
  </body>

在开发过程中，web.config中的小设置<compilation debug="true"单独加载所有文件，便于调试。

只需更改debug="false"，生产中的服务器只有两个 JS 负载

【讨论】：

按实体类型分割文件是一种有趣的方法！目前我对我的 JS 文件的布局非常满意。你如何包含模板？你能用捆绑包做到这一点吗？我目前使用自定义 HtmlHelper 扩展来执行此操作，该扩展会根据您提供的目录生成一堆 <script type="text/ng-template"></script> 包含。
目前，我们确实在状态 (angular-ui-router) 中映射了模板。但我们计划采取一些技巧将所有模板移动到一个文件中：docs.angularjs.org/api/ng.$templateCache。但此刻，我看到了上述方法的优势，事实上，在开发过程中，我们有所有的小文件...... Aspects/Entities 的模块......并且对生产进行了一次更改，我们只提供了几个缩小的 JS/ css 文件。所以我对 Asp.NET 捆绑的东西很满意 ;)
是的，我也非常想将我的模板拆分成块。
酷我会看看用捆绑包替换 require，它们的性能不是一个大问题，因为我正在实现 appcache :)
祝你好运 1) ASP.NET 的最佳特性 2) 令人惊叹的 Angular 运行...方法 ;)

【解决方案2】：

通常我在服务器上使用 ASP.NET MVC 和 WebAPI，然后使用 ASP.NET Bundling 很有意义。它开箱即用，易于使用。使用 AngularJS，我不太担心忘记脚本文件，并且在模块级别声明所有依赖项时不会注意到。如果缺少一个，则整个应用程序无法运行，否则很难发现，错误非常明显。

Grunt 也是一个强大的选项，但如果我在服务器上运行 Node，我只会选择它。在那种情况下，无论如何我都会通过 grunt 做更多的事情。

【讨论】：

“Grunt 也是一个强大的选项，但如果我在服务器上做 Node，我只会选择这个选项” 这是一个完全无参数的 imo，你的前端开发工具不应该受到影响您的后端服务器技术。两者应该是完全不相关的，Node 恰好是一个很好的工具。
“有了 AngularJS，我就不用担心忘记脚本文件而在声明所有依赖项时没有注意到”——这实际上是个好主意！我现在就去买捆绑包，这似乎是最合适的（考虑到以前没有接触过 grunt，也是最快的选择）。以后可以随时复习，比较耗时的部分就是去掉Require！