IBM Watson 对话 - angular 集成

IBM Watson Conversation - angular integration

我是 Angular 的新手,我想将 Watson 对话机器人集成到我的 angular 模块中,但我无法在 Angular 中包含库。我正在使用 botkit-middleware-watson 来获取 Watson 答案。

使用下面的代码,我设法得到了一个 slackBot 运行。

require('dotenv').load();
var Botkit = require('botkit');
var express = require('express');
var middleware = require('botkit-middleware-watson')({
  username: process.env.CONVERSATION_USERNAME,
  password: process.env.CONVERSATION_PASSWORD,
  workspace_id: process.env.WORKSPACE_ID,
  version_date: '2016-09-20'
});

// Configure your bot.
var slackController = Botkit.slackbot();
var slackBot = slackController.spawn({
  token: process.env.SLACK_TOKEN
});
slackController.hears(['.*'], ['direct_message', 'direct_mention', 'mention'], function(bot, message) {
  slackController.log('Slack message received');

  middleware.interpret(bot, message, function(err) {
    if (!err) {
      console.log(message.watsonData.output.text);
      bot.reply(message.watsonData.output.text);
      }
    }
    });

slackBot.startRTM();

// Create an Express app
var app = express();
var port = process.env.PORT || 5000;
app.set('port', port);
app.listen(port, function() {
  console.log('Client server listening on port ' + port);
});

现在我想使用这段代码构建一个 Angular 应用程序,但是我不知道如何在 Angular 中导入库。我使用以下 index.html 和 app.js

index.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="Watson" class="no-js"> <!--<![endif]-->
<head>
  <!--<script type="text/javascript" src ="js/dependencies.js"></script>-->

  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
  <script type="text/javascript" src ="js/app.js"></script>
</head>
<h1 align="center">Assistant Watson </h1>
<body>
    <div>
      <i class="material-icons prefix">forum</i>
      <input ng-model="inputMessage" type="text" class="validate">


      <div ng-controller="controllerMessage">
        <a ng-click="sendMessage()" ng-init="Bonjour" class="waves-effect waves-light btn">Send message</a>
        <p>Votre message est : {{message}}</p>
      </div>

    </div>

  <!-- Chat -->

</body>
</html>

app.js

'use strict';
/*
var connector = require('./connector.js');
var Botkit = require('botkit');
var express = require('express');
var middleware = require('botkit-middleware-watson')({
  username: process.env.CONVERSATION_USERNAME,
  password: process.env.CONVERSATION_PASSWORD,
  workspace_id: process.env.WORKSPACE_ID,
  version_date: '2016-09-20'
});
*/

// declare a module

var myModule = angular.module('Watson', [])
.controller('controllerMessage', ['$scope', function($scope, $http) {
    $scope.message="Bonjour";
    $scope.sendMessage = function() {
        console.log($scope.inputMessage);
        $scope.message = $scope.inputMessage;
          //use middleware here
}}]);

但是当我执行 require(something) 时出现错误:"require is not defined".

有没有办法获得类似需求的东西或让库工作以使这个 angular 应用程序工作?

谢谢,Alexi

编辑:

你说我可以使用 Requirejs,但它绕过了 Angular 模型对吧?有 "cleaner" 的方法吗?

如所见here:

require() 是一个 NodeJS 函数,您的 angular 控制器将在浏览器中执行,它没有那个 built-in 函数。如果您想复制该行为 client-side,您应该查看 RequireJS

我在做 NodeJS 的基本初学者错误?我创建了一个带有服务器和前端目录的快速应用程序,其余调用都很好