angularjs - 非 SPA 案例的 Sails.js 和 Angular.js 项目结构和配置

Question

我正在启动一个基于 Sails 的副项目来尝试一下。大多数页面是通过 EJS 在服务器端呈现的，不需要前端的 javascript(我的登陆页面不需要，我的“关于”页面当然不需要等等)。但是，我有几个页面具有相当多的客户端功能，并且我想使用 Angular，因为我最熟悉该框架。到这些页面的路由再次在服务器中处理，将它们捆绑为 SPA 实际上没有任何意义。

所以我正在努力解决这些问题:

• 在哪里放置 Angular 应用的脚本？
  • /assets/js/dependencies 仍然是正确的位置吗？将它们放置在那里不会让 Grunt 任务将它们注入(inject)到 layout.ejs 中，从而注入(inject)到每个页面中吗？
• 如何有条件地加载 Angular 基础及其组件( Controller 、服务等)？
  • Sails 使用 views/layout.ejs 作为加载项目范围样式、模板和脚本的基本布局。每个页面的 Controller 根据为该页面开发的 View “partial”来处理将 body 部分注入(inject)到此布局中。此 View “部分”.ejs 文件是否是有条件地仅在需要它们的页面中加载 Angular 应用程序文件的适当位置？
• 如何在 Grunt 任务中添加 Angular 脚本源的 min/contact/uglify？
  • 所有 Angular 相关文件都需要连接、缩小/丑化才能进行生产。除了当前 Sails 任务创建并在每个页面中加载的“通用”js 文件之外，这还需要一个新的 js 连接文件才能加载到适当的页面中。所以我们本质上是在谈论客户端的两个串联的 js 文件。一种是全局加载的，而 Angular 则只加载需要的页面。构建/任务分配过程的哪些部分需要修改？一些要检查的示例或资源在这里非常有用。

Answer 1

在哪里放置 Angular 应用程序的脚本？

Is /assets/js/dependencies still the proper place?

不，只需将 angular.min.js 放入您的依赖项文件夹中，而不是放入 Angular 应用程序的脚本中。您需要将所有 Angular 应用程序放在 assets/js 中文件夹(或子文件夹中，但不在依赖项中)

为了确保应用程序的每个文件都按照正确的顺序加载(例如，您需要首先加载注入(inject) Angular 应用程序依赖项的 Js 文件)，您可以修改 tasks/pipeline.js文件，并指定您想要的顺序:您需要修改jsFilesToInject包含所有要按正确顺序加载的 Js 文件的数组。

例如您的项目:

var jsFilesToInject = [

  // Load sails.io before everything else
  'js/dependencies/sails.io.js',
  // loading angularJS
  'js/dependencies/angular.min.js',
  // all the rest in dependencies
  'js/dependencies/**/*.js',
  // loading first AngularModule definition
  'js/app/app.module.js',
  // all the rest of the angular application
   'js/app/**/*.js'
];

对于您的其他问题，我认为您需要查看tasks/config/sails-linker.js文件，注入(inject) <!--SCRIPTS--> 中的所有 Js 脚本HTML 代码中的标签。

我希望它能对你有所帮助，而且我还不算太晚!