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

时间:2015-04-15 11:29:56

标签: angularjs gruntjs sails.js

我正在开始一个基于Sails的侧面项目来尝试它。大多数页面都是通过EJS进行服务器端呈现的,并且不需要在前端使用javascript(我的目标网页没有,我的"关于"页面肯定不会等等)。但是,我有一些页面具有相当多的客户端功能,我想使用Angular,因为我大多熟悉该框架。这些页面的路由再次在服务器中处理,将它们捆绑为SPA真的没有意义。

因此,我试图围绕这些问题进行思考:

  • 放置Angular应用程序脚本的位置?
    • /assets/js/dependencies仍然是合适的地方吗?不会将它们放在那里使Grunt任务将它们注入layout.ejs并因此注入每一页?
  • 如何有条件地加载Angular base及其组件(控制器,服务等)?
    • Sails使用views/layout.ejs作为基础布局来加载项目范围的样式,模板和脚本。每个页面的控制器根据视图" partial"处理将body部分注入此布局。为该页面开发的。是这种观点"部分" .ejs文件是否只在需要它们的页面中有条件地加载Angular应用程序文件?
  • 如何添加Angular'的min / conctact / uglify Grunt任务中的脚本来源?
    • 所有Angular相关文件都需要连接,缩小/ uglified用于生产。这将需要是一个新的js连接文件,除了" generic"之外,还要加载到适当的页面中。当前Sails任务创建并在每个页面中加载的js文件。因此,我们主要讨论客户端的两个连接的js文件。一个是全局加载的,而Angular只加载需要它的页面。构建/任务过程的哪些部分需要修改?要检查的一些示例或资源在这里非常有用。

1 个答案:

答案 0 :(得分:0)

放置Angular应用程序脚本的位置?

  

/ assets / js / dependencies仍然是合适的地方吗?

不,只需将angular.min.js放在您的依赖项文件夹中,而不是您的Angular应用程序脚本。您需要将所有Angular应用程序放在.highlight-current-date button { background: aqua; } 文件夹中(或在子文件夹中,但不在依赖项中)

为了确保您的应用的每个文件都以正确的顺序加载(例如,您需要先加载注入角度应用依赖项的Js文件),您可以修改{{1} } file,并指定所需的顺序:您需要修改包含要按正确顺序加载的所有Js文件的assets/js数组。

例如您的项目:

tasks/pipeline.js

对于您的其他问题,我认为您需要查看jsFilesToInject文件,该文件会在HTML代码的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' ]; 标记中注入所有Js脚本。

我希望它会对你有帮助,而且我也不会太迟!