javascript - 在 ASP.NET 中管理 AngularJS 网络应用程序(替代 RequireJS)

标签 javascript asp.net angularjs

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

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

  • 在发现 Angular 之前,我用它开始了这个项目。
  • 轻松加载外部 API(例如 Facebook、Google)。
  • 轻松缩小通过。 R.js
  • 随着项目的发展,很容易将文件添加到项目中,无需额外的脚本标签。

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

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

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

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

最佳答案

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

  • 从 VS 中获利。尽可能使用 ASP.NET (MVC)
  • 将功能拆分为更多/更小的文件( Controller 、状态、配置、指令)
  • 将每个方面(通常是实体)的逻辑保存在一个文件夹中(例如 Employee/)
  • 让文件尽可能靠近,即 View 、 Controller 、测试 ( 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"- Controller
  • .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 加载

关于javascript - 在 ASP.NET 中管理 AngularJS 网络应用程序(替代 RequireJS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20840604/

相关文章:

javascript - 带参数的 angularjs 指令绑定(bind)函数

javascript - 使用 Javascript 从 <li> 列表更新 HTML 输入字段值

javascript - typescript TS2322 : Type 'typeof Foo' is not assignable to type 'IFoo'

c# - 如何在 response.redirect 上使用 Target=_blank?

c# - MVC 6 WebAPI FromServices 属性无法编译

javascript - 如何使用 JsTestDriver 测试 AngularJS Controller ?

angularjs - 无法直接从浏览器访问 Angular 组件

javascript - 检查变量输入JS的可行方法

javascript - JavaScript 中的 For 循环缺少值

asp.net - ASP.NET 中的延迟加载图像