如何在 AngularJS 客户端和 Node.js 服务器之间重用代码 [关闭]

Posted 2023-02-22

【中文标题】如何在 AngularJS 客户端和 Node.js 服务器之间重用代码 [关闭]

【英文标题】：How to re-use code between AngularJS client and Node.js server [closed]

【发布时间】：2014-05-10 18:05:00

【问题描述】：

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

我实现了一个 AngularJS 应用程序。现在我需要实现一个 RESTful-server 为客户端提供数据。一些客户端角度服务可以在服务器上重用，例如第三方 RESTful 客户端到 Facebook/Google/Twitter，它们密集使用角度依赖注入并依赖于 $http、$q 和许多其他服务。

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

那么，为了至少在客户端和服务器之间启用代码重用，还有什么替代方案？特别是启用代码重用取决于 $http、$q 和 Angular 框架和 Angular 第三方（如 angular-cache）中包含的其他 AngularJS 服务。

【问题讨论】：

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

【参考方案1】：

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

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

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

您可以这样将其拆分为 2 个文件：

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));

查看此Videos 以获得有关如何实现此功能的一个很好的示例，该视频中还有repository。

【参考方案2】：

在非浏览器环境中使用 Angular

Ben Clinkinbeard 将角度分布准备为 commonJS 模块 (HERE)，可以在非浏览器环境中运行：

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

---

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

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

再一次……本·克林金比德。在 THIS TALK 中，他描述了如何在 Angular 项目中使用 browserify。这种方法的一个很酷的特性是您可以将您的函数/对象声明为不与角度耦合的单独实体；因此它们也可以在不同的上下文中重复使用。

一个例子：

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;

【讨论】：

嗨，有点跑题了，但我正在做一些类似于 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。如果你想四处看看here，我已经添加了 sn-p。

它似乎不知道我的控制器。另外，顺便说一句，曾经是 Ben 的软件包的 angular 现在已成为 angular 的官方仓库。因此，如果您执行npm i angular，它将改为为您提供 angular 的浏览器版本 :(。但您始终可以将 "angular": "git://github.com/bclinkinbeard/angular" 放入您的 package.json 以从 github 获取。

【参考方案3】：

Angular 1.x 是一个非常独立的框架。有一个计划将功能分开，但这将在版本 2 中出现。所以这很简单，只需为浏览器和 node.js 提供不同的 $httpBackend 实现。

我创建了一个简单的演示如何使用 CommonJS share code between node.js and browser。这可用于共享验证、模型等。