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

Question

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

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

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

由于该项目已经成熟，我以前使用RequireJS的大部分区域现在看起来都是多余的，这意味着大多数文件最终会有另一级别的缩进（仅此而已），这要归功于define包装器：

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

可能还有一个小的性能。 删除它也有好处:)

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

Answer 1

我正在寻找主持Angular SPA的Visual Studio Web-Project的最佳设计/结构。 我发现了许多灵感，在检查了几个模板之后，我意识到我想要实现的目标是：

来自VS的利润。 ASP.NET（MVC）尽可能多
将功能拆分为更多/更小的文件（控制器，状态，配置，指令）
将每个Aspect（通常是Entity）的逻辑保存在一个文件夹中（例如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加载

Answer 2

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

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

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

问题描述

2 个解决方案

解决方案1
3 已采纳 2013-12-30 14:23:45

解决方案2
0 2013-12-30 14:10:01

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2013-12-30 14:23:45

解决方案2 0 2013-12-30 14:10:01

解决方案1
3 已采纳 2013-12-30 14:23:45

解决方案2
0 2013-12-30 14:10:01