Fatal编程技术网
  • javascript/
  • Javascript 在ASP.NET中管理AngularJS web应用程序（RequireJS的替代方案）

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

javascript asp.net angularjs

Javascript 在ASP.NET中管理AngularJS web应用程序（RequireJS的替代方案）,javascript,asp.net,angularjs,Javascript,Asp.net,Angularjs,我目前正在我的应用程序中使用RequireJS和AngularJS的组合，服务器端使用ASP.NET 我选择使用RequireJS有几个原因： 我在发现Angular之前就开始了这个项目 轻松加载外部API（如Facebook、Google） 易于缩小通过。R.js 易于在项目增长时向其添加文件，无需额外的脚本标记 随着项目的成熟，我以前使用的大多数RequireJS现在看起来都是多余的，这意味着由于定义包装器，大多数文件最终都会有另一个缩进级别（仅此而已）： define(['angula

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

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

  • 我在发现Angular之前就开始了这个项目
  • 轻松加载外部API（如Facebook、Google）
  • 易于缩小通过。R.js
  • 易于在项目增长时向其添加文件，无需额外的脚本标记
随着项目的成熟，我以前使用的大多数RequireJS现在看起来都是多余的，这意味着由于定义包装器，大多数文件最终都会有另一个缩进级别（仅此而已）：

define(['angular'], function(angular) {});
可能还有一个小的性能。删除时也有好处：）

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

通常我在服务器上使用ASP.NET MVC和WebAPI，然后使用ASP.NET捆绑非常有意义。它是现成的，易于使用。对于AngularJS，我不太担心忘记一个脚本文件，并且在模块级声明所有依赖项时没有注意到。如果一个应用程序丢失了整个应用程序，那么就不会运行这些程序，否则很难发现错误

Grunt也是一个强大的选项，但只有在服务器上执行Node时，我才会选择Grunt。在这种情况下，我将通过grunt做更多的工作。

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

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

 // 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”-测试
有了这一点，我们可以配置捆绑包：

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的摘录


...
@style.Render（“~/Content/css”）
@Scripts.Render（“~/js/angular”）
@Scripts.Render（“~/js/app”）
在开发过程中，web.config
中的小设置“Grunt也是一个强大的选项，但只有在服务器上执行节点时我才会选择它”，这是一个完全没有争议的选项。在我看来，前端开发工具不应该受到后端服务器技术的影响。这两者应该是完全不相关的，Node恰好是一个很好的工具，可以同时完成这两个任务。“对于AngularJS，我不太担心忘记脚本文件，并且在声明所有依赖项时没有注意到”-实际上这是一个很好的想法！我现在就选择捆绑包，这似乎是最合适的（考虑到之前没有接触过grunt，也是最快的选择）。以后可以随时查看，耗时的部分正在删除！如果您担心性能，我会放弃为应用程序提供ASP.NET服务，将其作为静态内容提供。WebAPI可用于提供后端。您有关于性能差异的统计数据吗？然后如何处理缩小/包含所有文件以便于调试？require.js或grunt（或两者都有）。如果要捆绑视图并将其添加到$templateCache，有一种按实体类型拆分文件的方法，这是一种有趣的方法！目前我对JS文件的布局非常满意。如何包含模板？你能用这些包裹做这个吗？目前，我使用一个定制的
HtmlHelper
扩展来实现这一点，该扩展根据您提供的目录生成一系列
包含。目前，我们确实有在状态中映射的模板（angular ui router）。但是我们计划做一些技巧来将所有模板移动到一个文件中：。但现在，我看到了上述方法的优点，事实上，在开发过程中，我们有所有的小文件。。。按方面/实体列出的模块。。。我们只需对生产进行一次更改，就可以提供少量缩小的JS/css文件。所以我对Asp.NET捆绑包非常满意；）是的，我也非常想将我的模板分割成块。很酷，我将研究用捆绑包替换require，它们的性能并不是一个大问题，因为我正在实施appcache:）祝你1）ASP.NET的最佳功能好运，让2）惊人的角度运行。。。方法；）

<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>