AngularJS + 帆.js [英] AngularJS + sails.js
问题描述
我正在开发一个应用程序，它可以将sails.js 用于后端，将AngularJS 用于前端.我想我会使用 Yeoman-angular 生成器 https://github.com/yeoman/创建一个 Angular 应用程序生成器角度，一旦我完成了前端逻辑，我将使用，
I am developing an app that can utilize sails.js for back-end and AngularJS for Front-end. I thought that I'll create an Angular App using Yeoman-angular generator https://github.com/yeoman/generator-angular, and once I am done with the front-end logic I'll create a sails app using,
- npm install -g 帆
- 推出新应用
然后我会将我所有的 AngularJS 文件传输到 Sails 文件夹.
And then I'll transfer all my AngularJS files to the Sails folder.
但问题是 AngularJS 创建了一个像这样的文件夹层次结构 https://github.com/rishy/angular-jade-stylus-seed 并在运行grunt server"时创建一个包含最终生产版本的dist"文件夹.
But the thing is that AngularJS creates creates a folder hierarchy like this https://github.com/rishy/angular-jade-stylus-seed and on running "grunt server" a "dist" folder is created which contains the final production version.
另一方面，sails 应用程序的sails new app"文件夹层次结构类似于.
On the other hand, after "sails new app" folder hierarchy for sails app is like.
- api
- 适配器/
- 控制器/
- 模型/
- 政策/
- 服务/
- 图像/
- js/
- 样式/
- favicon.ico
- robots.txt
- 家/
- 403.ejs
- 404.ejs
- 500.ejs
- layout.ejs
所以，我的问题是:
- 现在，我如何将我的 Angular 文件传输到这个风帆目录，我应该如何构建它?
- 由于sails 使用sails lift"来启动服务器，而angular 使用grunt server"，我应该使用其中的哪一个来为我的sailsJs + AngularJs 应用程序启动服务器，以及创建的dist"文件夹呢在 AngularJS 之后?
- 我必须在 Gruntfile.js 中进行哪些更改，因为它现在应该包含来自 Angular 和 Sails 的代码?
- 我应该在哪里保存我的不同视图和样式文件，我应该如何从 Angular 或 Sails 访问这些文件?
我认为很多人都面临着类似的问题，因为 AngularJS 和 SailsJs 目前风靡一时.应该有一个强大的样板来创建一个 AngularJS + SailsJS 应用程序，遗憾的是现在缺少它.
I think lot of people are facing this similar problem since AngularJS and SailsJs are all the rage currently. There should be a robust boilerplate to create an AngularJS + SailsJS app, which sadly is missing right now.
推荐答案
由于 Sails 是一个纯粹的后端框架而 Angular 是一个纯粹的前端，因此它们可以很好地协同工作.当您将 Angular 生成器引入其中时可能会有些混乱，但如果您要从 Angular Seed 应用和 Sails v0.10:
Since Sails is a purely back-end framework and Angular is purely front-end, they can work together nicely. It can get a little confusing when you bring the Angular generator into it, but here are the basic steps if you were to start with the Angular Seed app and Sails v0.10:
- 使用
sails new myApp 创建一个新的 Sails 应用程序 - 清除
myApp/assets文件夹中的内容 - 将 Angular Seed
app文件夹的内容复制到myApp/assets - 将
myapp/views/layout.ejs的内容替换为 Angular Seedapp/index.html文件的内容 - 从
layout.ejs文件中剪切所有非脚本标签内容(<body>标签之后和第一个< 之前的所有内容)script>标签并用它替换myApp/views/homepage.ejs的内容 - 将
<%-body%>放在layout.ejs 中的
标签之后- Create a new Sails app with
sails new myApp - Wipe out the contents of the
myApp/assetsfolder - Copy the contents of the Angular Seed
appfolder intomyApp/assets - Replace the contents of
myapp/views/layout.ejswith those of the Angular Seedapp/index.htmlfile - Cut all of the non-script tag content from the
layout.ejsfile (everything after the<body>tag and before the first<script>tag and use it to replace the contents ofmyApp/views/homepage.ejs - Place
<%-body%>after the<body>tag inlayout.ejs
然后您可以使用
sails lift启动服务器，您将在http://localhost:1337看到 Angular 应用程序.You can then start the server with
sails liftand you'll see the Angular app athttp://localhost:1337.我已经把这个放在 Github 上 以供参考.
使用这种方法，你不需要对 Gruntfile 做任何事情，而且你永远不会调用
grunt server——这只是为了用他们的测试服务器测试 Angular 应用程序，你'重新替换为 Sails.您仍然可以从 Sails grunt-sync 任务中受益，该任务会在您的前端资产发生更改时对其进行监视和同步.Using this method, you don't need to do anything to the Gruntfile, and you'll never call
grunt server--that's solely for testing Angular apps with their test server, which you're replacing with Sails. You'll still get the benefit of the Sails grunt-sync task which watches and syncs-up your front-end assets as they are changed.如果您真的想使用 Yeoman Angular 生成器，您可以尝试直接在 Sails 应用程序的
assets文件夹中生成应用程序，并使用该文件夹中的生成器命令.我以前没有用过它，所以我不知道 dist 文件夹是做什么用的，但它安装的所有节点模块似乎都在那里支持测试 Web 服务器(你也不需要，因为你有帆)和测试套件(这总是很好).我能看到的唯一问题是您是否需要 Yeoman 生成的 Gruntfile 中的某些任务.Sails 处理 Less 编译和 CSS 缩小(在生产模式下)，但它对 Jade 或 Stylus 没有任何作用，因此如果您确实需要它们，则必须将这些任务添加到 Sails Gruntfile 中.If you really want to use the Yeoman Angular generator, you can try generating an app directly into the
assetsfolder of your Sails app and using the generator commands from within that folder. I haven't used it before, so I don't know what the dist folder is for, but it seems like all of the node modules it installs are there to support the test web server (which again you don't need, since you have Sails) and the test suite (which is always nice). The only issue I can see is if you need some of the tasks in that Gruntfile that Yeoman generates. Sails handles Less compilation and CSS minification (in production mode), but it doesn't do anything with Jade or Stylus, so you'd have to add those tasks to the Sails Gruntfile if you really needed them.这篇关于AngularJS + 帆.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
