gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:02:08 25 4
gpt4 key购买 nike

我目前在我的应用程序中使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com