简体繁体 English

在现有的Node.js，Express，MongoDB和Socket.io堆栈之上添加AngularJS

[英]Adding AngularJS on top of existing Node.js, Express, MongoDB and Socket.io Stack

原文 2013-11-30 16:33:29 9 1 javascript/ node.js/ mongodb/ angularjs/ mongoose

I've been developing a web app using Node.js, Express, MongoDB, Mongoose and Socket.io for some time now. 我一直在使用Node.js，Express，MongoDB，Mongoose和Socket.io开发Web应用程序一段时间。 Version one has just been released and is working great. 版本1刚刚发布，并且运行良好。 For version two however, I want to completely redesign the UI and use a front-end framework such as AngularJS. 但是对于第二版，我想完全重新设计UI并使用诸如AngularJS之类的前端框架。 I've been looking at the ( MEAN stack ) and it looks really promising. 我一直在看（ MEAN stack ），它看起来非常有前途。 Before goin into too much details, I will try to explain the purpose and working of the app so hopefully you will understand my question later on. 在进入太多细节之前，我将尝试解释该应用程序的用途和工作方式，希望以后您能理解我的问题。

My app is a streaming service and has 4 simple models: user, room, song, playlist. 我的应用程序是一种流服务，具有4个简单的模型：用户，房间，歌曲，播放列表。 These are modeled through Schema's in Mongoose and are stored in the MongoDB database. 这些是通过Mongoose中的Schema建模的，并存储在MongoDB数据库中。 When a user visits the app, it serves all the HTML through Node.js and Express (and Jade as templating engine). 当用户访问该应用程序时，它将通过Node.js和Express（以及Jade作为模板引擎）提供所有HTML。 If the user then registers, Socket.io lets the server know a user register, that is then saved to the database and the user is joined in the lobby room. 如果用户随后进行注册，则Socket.io将让服务器知道用户注册，然后将其注册到数据库中，并且该用户已加入大厅。 In this room, users can chat, listen to music, etc. This is what I've been using Socket.io for, the communication between users themselves and my server (the server sometimes serves html too through Socket.io). 在这个房间里，用户可以聊天，听音乐等。这就是我一直在使用Socket.io进行的用户自身与服务器之间的通信（服务器有时也通过Socket.io提供html的功能）。 Basically all the messages between Socket.io and the server are really small (chat messages, room objects, song objects, etc). 基本上，Socket.io和服务器之间的所有消息都是很小的（聊天消息，房间对象，歌曲对象等）。

I'm quite happy with this approach, however, on the client side, the code is not really separated. 我对这种方法非常满意，但是，在客户端，代码并没有真正分开。 There are currently two JS files serving the logic. 当前有两个用于逻辑的JS文件。 One handles the Socket.io events and manipulates the dom. 一个处理Socket.io事件并操纵dom。 The other one is a common JS file that does a bit of everything. 另一个是一个通用的JS文件，它可以执行所有操作。 These two files are now about 5000 lines each. 这两个文件现在每个大约有5000行。 This worries me and I want to find a solution for this in v2. 这让我担心，我想在v2中找到解决方案。

So I've been looking at AngularJS in the MEAN stack and how to incorporate it in my app. 因此，我一直在研究MEAN堆栈中的AngularJS，以及如何将其合并到我的应用程序中。 My question is, will this solve my client side problems and can would you recommend taking the effort to do so. 我的问题是，这是否可以解决我的客户端问题，您是否可以建议您花些力气做到这一点？ Also, how well will Socket.io work with AngularJS? 另外，Socket.io将如何与AngularJS配合使用？ Having both of them might be an overkill for what I'm doing. 拥有它们可能对我正在做的事情来说是一个过大的杀伤力。 Do you know of any possible other framework that might be easier to integrate with my current environment? 您是否知道其他可能更容易与当前环境集成的框架？ I know it's a bit of a subjective question but if you have any tips or do or don'ts, thanks for sharing! 我知道这是一个主观的问题，但是如果您有任何建议或不建议，请多多分享！ I really appreciate your feedback and if you need more information, I'd be happy to share it with you! 非常感谢您的反馈，如果您需要更多信息，我们很乐意与您分享！