如何在AngularJS客户端和Node.js服务器之间重复使用代码

Question

如何在AngularJS客户端和Node.js服务器之间实现代码重用/共享的最佳实践是什么？

我已经实现了一个AngularJS应用程序。现在我需要实现一个RESTful服务提供数据给客户端。一些客户端的Angular服务可以在服务器上重用，例如第三方restful客户端到Facebook/Google/Twitter，这些客户端强烈依赖于Angular的依赖注入，并依赖于$http、$q和许多其他服务。

理想情况下，由于我真的很喜欢AngularJS中包含的依赖注入框架，所以我希望有一种基于AngularJS的服务器框架。这个服务器框架包括依赖注入框架和所有与UI无关的Angular服务，并增加所需的服务器端功能，如路由和身份验证。但不幸的是，我没有找到任何解决方案。（如果存在这样的框架，请告诉我！）

那么，为了至少实现客户端和服务器之间的代码重用，有什么替代方法呢？特别是启用对$http、$q和Angular框架和angular-third-parties（如angular-cache）等依赖于代码的重用。

- jeromerg

---

非常有趣的问题。我认为共享模型和一些业务逻辑是一个非常有趣的想法。例如，共享模式、验证和服务可能会成为一些很棒的东西。另外，你应该看看 node-di。它是一个依赖注入框架，受到 AngularJS 的启发。 - Kenneth Lynne

Answer 1

在非浏览器环境中使用Angular

Ben Clinkinbeard准备了一个作为commonJS模块的angular分发 (在这里)，可以在非浏览器环境下运行：

使用jsdom编译的AngularJS，并提供为CommonJS模块。 旨在在不依赖于浏览器的情况下测试AngularJS代码。

---

如果您想要更加挑剔，您可能应该等待Angular 2.0

在客户端和服务器端之间共享代码

又是... Ben Clinkinbeard。在此演讲中，他描述了如何在angular项目中利用browserify。这种方法的一个很酷的功能是，您可以将函数/对象声明为不与Angular耦合的单独实体；因此它们也可以在不同的上下文中重复使用。

它的一个示例：

app.js

var app = angular.module('someModule',[]);
...
app.factory('someService', require('./some/path.js'));
...

./some/path.js

module.exports = function(dep1, dep2){
  ...
  return {
     ...
  }
}
module.exports.$inject['dep1', 'dep2']; // for minification;

- artur grzesiak

---

嗨，有点跑题了，但我正在做类似于Ben在那个演讲中提到的事情。我真的很喜欢将实体分离并使它们模块化的概念。然而，我不知道你对这个概念玩得有多深入，但我正在尝试让我的测试运行起来，却遇到了最大的困难。每次我运行我的mocha测试时，都会出现Argument 'SomeController' is not a function, got undefined http://errors.angularjs.org/1.2.21/ng/areq?p0=SomeController&p1=not%20a%20function%2C%20got%20undefined。如果您想查看周围的内容，我已经添加了代码片段在这里。 - shriek

看起来好像它不知道我的控制器。另外，顺便说一下，曾经是Ben的包的angular现在已经成为了官方的angular仓库。因此，如果你执行npm i angular，它将会给你提供浏览器版本的angular :(. 但是你可以在你的package.json中加入"angular": "git://github.com/bclinkinbeard/angular"来从github获取。 - shriek

Answer 2

Angular 1.x是一个相当自包含的框架。虽然有拆分功能的计划，但这将在2版本中实现。因此，只需为浏览器和node.js提供不同的$httpBackend实现即可。

我创建了一个简单的演示，展示如何使用CommonJS 共享代码在node.js和浏览器之间 。这可用于共享验证、模型等。

- Matjaz Lipus

Answer 3

使用RequireJS在这里是有意义的。

不要像这样在Angular内部定义模型/服务：

(function (angular) {
  "use strict";
  angular.module('myModule').factory('MyModel', function (Deps) {
    var Model = function () {
      // do things here
    };
    return Model;
  });
}(window.angular));

你可以将其拆分为两个文件来完成：

model.js:

(function (define) {
  "use strict";
  define([], function () {
    var factoryConstructor = function (deps) {
      var Model = function () {
        // do things here
      };
      return Model;
    };
    return factoryConstructor;
  });
}(window.define));

whatever.js

(function (define, angular) {
  "use strict";
  define(['Model'], function (Model) {
    angular.module("myModule").factory("myModel", Model);
  });
}(window.define, window.angular));

请查看视频，这是一个很好的实现示例，还有来自该视频的代码库。

- Yahya KACEM