将Javascript从node express发送到角度服务

时间:2015-12-18 19:44:41

标签: javascript angularjs node.js express

我试图为实用程序方法编写一个通用的javascript端点,这些端点将在客户端和服务器之间共享。服务器

我已经四处阅读,但我很难掌握这些概念。

我在考虑,可能将其作为字符串发送并使用eval?我不确定最佳做法是什么。

到目前为止,我已经:

需要脚本的客户端服务。

angular.module('passionForgeApp').service('Utils', function ()
{
    //TODO Load these from the server side utlity module.
}

节点实用程序导出

'use strict';

var Utility = function(){};

Utility.isASCII = function (str) {
    return /^[\x00-\x7F]*$/.test(str);
};

Utility.isAlphaNumeric = function(str) {
    var code, i, len;
    for (i = 0, len = str.length; i < len; i++) {
        code = str.charCodeAt(i);
        if (!(code > 47 && code < 58) && // numeric (0-9)
        !(code > 64 && code < 91) && // upper alpha (A-Z)
        !(code > 96 && code < 123)) { // lower alpha (a-z)
            return false;
        }
    }
    return true;
};

module.exports = Utility;

Node Express端点
这就是我迷失的地方。

//TODO Bad path.
var utility = require('./../../components/utility');

// Gets a list of Commonjss
exports.utility = function(req, res) {


    //send utility????
    //Stuck here, sends {} to browser.

    res.json(utility);

};

修改

根据要求,发布了browserify脚本。

这是我在网络日志中看到的浏览器加载的。

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';

var Utility = function(){};

Utility.isASCII = function (str) {
    return /^[\x00-\xFF]*$/.test(str);
};

Utility.isAlphaNumeric = function(str) {
    var code, i, len;
    for (i = 0, len = str.length; i < len; i++) {
        code = str.charCodeAt(i);
        if (!(code > 47 && code < 58) && // numeric (0-9)
        !(code > 64 && code < 91) && // upper alpha (A-Z)
        !(code > 96 && code < 123)) { // lower alpha (a-z)
            return false;
        }
    }
    return true;
};

module.exports = Utility;

},{}]},{},[1]);

我的问题是我不知道如何使用它。

在我的控制器中,我试过console.log(Utility); 然后我尝试了要求(&#39; Utility&#39;)。

没什么,未定义。 : - /

修改

Full implementation of bundling shared server side code to client side

3 个答案:

答案 0 :(得分:4)

IMO不一定非常难。如果您使用browserify或捆绑器作为前端,则可以执行此操作。最初设置可能会很痛苦但值得。

项目结构

/client
    main.js
    /components
        /utility
            utility.module.js

/server
    controller.js

/utilities <- put your code that is shared between server/client here
    Utility.js

<强>客户端/组件/效用/ utility.module.js

module.exports = angular
                    .module("app.utility")
                    .factory("Utility", require(__dirname + "/../../utilities/Utility.js");

<强>公用事业/ Utility.js

module.exports = {
    toASCII: function() { //do stuff in angular and express }
};

client / main.js(您需要在此处要求所有组件,这是您的browserify入口点)

require("angular")
    .module("app" [
        "app.utility"
    ]);

    require( <% path to utility.module.js %>);

server / controller.js(您可以按预期使用您的模块)

var util = require( <% path to Utility.js %>);
util.toASCII(); //do something        

答案 1 :(得分:1)

另一种方法是在节点中编写实用程序模块,并使用browserify使其在节点或浏览器上可运行。

Browserify将在文件的开头添加代码,以检查是否存在module.exports对象或窗口对象。然后它将确保代码运行require语句时,module.exports工作。

通过浏览器化代码,您可以在浏览器中使用实用程序功能,方法是将它们包含在html脚本标记中。

这应该比使用eval()更安全。

更新

我做了一个例子。我添加了下划线和时刻的要求,只是为了显示require语句的工作原理。你不需要它们。

创建一个名为myUtility.js的文件并添加此

var _ = require('underscore');
var moment = require('moment');

function now (format) {
    var time;
    var dFormat = 'YYYY-MM-DD hh:mm:ss a';
    format = format || dFormat;

    try {
        time = 'TIME:\t' + moment().format(format);
    }catch (err) {
        time = 'TIME:\t' + moment().format(dFormat);
    }finally{
        return time;
    }

}

function isAlphaNumeric(str) {
    var code, i, len;
    return _.every(str, function (letter, i) {
        code = str.charCodeAt(i);
        console.log('code: ' + code);
        if (!(code > 47 && code < 58) && // numeric (0-9)
        !(code > 64 && code < 91) && // upper alpha (A-Z)
        !(code > 96 && code < 123)) { // lower alpha (a-z)
            return false;
        }
    });
}

var myutil = {
    now: now,
    isAlphaNumeric: isAlphaNumeric,
};

module.exports = myutil;

运行以下命令:

npm install browserify
npm install underscore
npm install moment
browserify myUtility.js --s myutil -o myutil.js

上面的browserify命令生成myutil.js。将其添加到index.html

<script src="/path/to/myutil.js"></script>

在控制器中添加它并登录到您的页面并检查控制台输出:

console.log(myutil)
var isAlphaNumeric = myutil.isAlphaNumeric;
console.log('try cat: ' + isAlphaNumeric('cat'));
console.log('try 123cat123: ' + isAlphaNumeric('123cat123'));
console.log('try ca?t: ' + isAlphaNumeric('ca?t'));

输出显示您现在在浏览器中使用您的函数,文件中包含模块导出和require语句。

ascii代码似乎也需要调整。我相信你想检查字母是否在||的任何范围内而不是&amp;&amp;。

TIME:   2015-12-18 05:13:00 pm
code: 99
try cat: false
code: 49
try 123cat123: false
code: 99
try ca?t: false

当我浏览你的函数并将其添加到index.html时,我在控制台中得到了错误的答案。更改字符逻辑会修复它,以便如果代码不在任何组中,则它不会返回true:

if (
    (code > 47 && code < 58) || // numeric (0-9)   false to true
    (code > 64 && code < 91) || // upper alpha (A-Z) false to true
    (code > 96 && code < 123)   // lower alpha (a-z)
) { 
    return true;
}

答案 2 :(得分:1)

如果这是您的文件夹结构

/ root
    / client
        - client.js
    / server
        - server.js
    / shared
        - utility.js

在您的服务器(node.js)中,您“需要”这样的文件

var server = require('server.js');
var utility = require('utility.js');

在浏览器中,您需要这样的文件

<script src="client.js" type="text/javascript">

Node.js具有与浏览器不同的模块系统。主要的是RequireJS和CommonJS(节点的require()),它们彼此不兼容。

Browserify是一个实用程序,它将CommonJS或RequireJS模块转换为浏览器兼容(否则不是)。换句话说,它将“捆绑”文件(递归)所需的所有文件(),并将它们全部捆绑到一个文件中,供浏览器使用。

因此,如果您希望能够在node.js和浏览器中使用相同的文件,则可以根据需要使用require()s对其进行编码(node.js样式)。

// File utility.js
var a = require('lodash')
var b = require('myotherlib')
module.exports.a = function(a){ } //etc.

您可以在节点

中使用它
var utility = require('utility.js');

然后,在其上使用browserify实用程序。

browserify utility.js -o utility-bundled.js

然后,您可以在浏览器中使用它!

<script src="utility-bundled.js" type="text/javascript"/>
<script src="angular.js" type="text/javascript"/>
<script src="controllers.js" type="text/javascript"/>
<script src="app.js" type="text/javascript">

Browserify“浏览”模块以便在浏览器中使用,否则它们不会。

- 编辑1

这将使您的实用程序库处于“全局”状态。但是,如果您希望能够使用以下语法“导入”它:

angular.module('passionForgeApp').service('Utils', function ()
{
    //TODO Load these from the server side utlity module.
}

您可以设置ocLazyLoad。它是一个非常好的库,用于定义延迟加载的外部文件。

“lazy-load”它意味着它只会在您明确要求时下载该库。

如果您使用此方法,则可以删除

<script src="utility-bundled.js" type="text/javascript"/>

来自index.html。你必须设置ocLazyLoad

angular.module('app', ['oc.lazyLoad']).config(['$ocLazyLoadProvider', function($ocLazyLoadProvider) {
  $ocLazyLoadProvider.config({
    modules : [{
        name : 'Utility',
        files : ['utility-bundled.js']
    }]
  });
}]);

然后你可以以懒惰的方式在需要它的模块中使用它

angular.module('MyController', ['$ocLazyLoad', function(ocLazyLoad){
    ocLazyLoad.load('Utility');
}]