简单聊天机器人

很初级的对话框形式。以前做对话框使用js,今天尝试使用AngularJS做出来

这里直接使用自己写的JSON数据。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
} h3 {
text-align: center;
} .chatbox {
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid #CCC;
background-color: #FFF;
border-radius: 5px;
} .messages {
height: 350px;
padding: 20px 40px;
box-sizing: border-box;
border-bottom: 1px solid #CCC;
overflow: scroll;
} .messages h5 {
font-size: 20px;
margin: 10px 0;
} .messages p {
font-size: 18px;
margin: 0;
}
/*自己说*/ .self {
text-align: left;
}
/*对方说*/ .other {
text-align: right;
} .form {
height: 150px;
} .form .input {
height: 110px;
padding: 10px;
box-sizing: border-box;
} .form .btn {
height: 40px;
box-sizing: border-box;
border-top: 1px solid #CCC;
} .form textarea {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
border: none;
/*宽度不发生变化*/
resize: none;
outline: none;
font-size: 20px;
} .form input {
display: block;
width: 100px;
height: 30px;
margin-top: 5px;
margin-right: 20px;
float: right;
}
</style>
<script src="../libs/angular.min.js"></script>
<script>
var App = angular.module('chatRoot', []);
App.controller('chatRootController', ['$scope', '$http', function ($scope, $http) { $scope.messages = [];
$scope.send = function () {
var message = {text: $scope.message, role: '我说', cls: 'self' }
$scope.messages.push(message);
$scope.message = '';
$http({
url: 'chatRoot.php',
method: 'post',
headers: {
'Content-Type':'application/x-www-form-urlencoded'
},
}).success(function (info) {
console.log(info);
message = {text: info, role: '鸣人说', cls: 'other' }
$scope.messages.push(message);
});
}
}]);
</script>
</head>
<body ng-app="chatRoot">
<h3>简单的AngularJS实例</h3>
<div class="chatbox" ng-controller="chatRootController">
<!-- 聊天内容 -->
<div class="messages">
<div class="{{message.cls}}" ng-repeat='message in messages'>
<h5>{{message.role}}</h5>
<p>{{message.text}}</p>
</div>
</div>
<!-- 表单 -->
<div class="form">
<!-- 输入框 -->
<div class="input">
<textarea ng-model='message'></textarea>
</div>
<!-- 按钮 -->
<div class="btn" ng-click = 'send()'>
<input type="button" value="发送">
</div>
</div>
</div>
</body>
</html>

  

AngularJS作出简单聊天机器人的更多相关文章

  1. TensorFlow练习13: 制作一个简单的聊天机器人

    现在很多卖货公司都使用聊天机器人充当客服人员,许多科技巨头也纷纷推出各自的聊天助手,如苹果Siri.Google Now.Amazon Alexa.微软小冰等等.前不久有一个视频比较了Google N ...

  2. 用Go语言实现一个简单的聊天机器人

    一.介绍 目的:使用Go语言写一个简单的聊天机器人,复习整合Go语言的语法和基础知识. 软件环境:Go1.9,Goland 2018.1.5. 二.回顾 Go语言基本构成要素:标识符.关键字.字面量. ...

  3. 构建一个简单的 Google Dialogflow 聊天机器人【上】

    概述 本教程将向您展示如何构建一个简单的Dialogflow聊天机器人,引导您完成Dialogflow的最重要功能.您将学习如何: 创建Dialogflow帐户和第一个Dialogflow聊天机器人, ...

  4. 【翻译】用AIML实现的Python人工智能聊天机器人

    前言 用python的AIML包很容易就能写一个人工智能聊天机器人. AIML是Artificial Intelligence Markup Language的简写, 但它只是一个简单的XML. 下面 ...

  5. 3.C#面向对象基础聊天机器人

    基于控制台的简单版的聊天机器人,词库可以自己添加. 聊天机器人1.0版本 源码如下: using System; using System.Collections.Generic; using Sys ...

  6. 使用图灵机器人API实现聊天机器人

    使用图灵机器人的API需要先注册,获取key才行,这我就不说了,自己到http://www.tuling123.com/注册一个账号即可. 下面就是一个简单的python调用API实现聊天机器人的简易 ...

  7. 用 AIML 开发人工智能聊天机器人

    借助 Python 的 AIML 包,我们很容易实现人工智能聊天机器人.AIML 指的是 Artificial Intelligence Markup Language (人工智能标记语言),它不过是 ...

  8. 笔记5:QQ群聊天机器人

    之前经常在别人群里看到有自动回复消息的机器人. 功能有好多,可以玩各种游戏.觉得还蛮有意思的.. 于是就去请教别人怎么弄得,但是他们都说得好复杂,好高大上,无非就是不想让别人弄 本人是个不会轻易放弃的 ...

  9. vue-miniQQ——基于Vue2实现的仿手机QQ单页面应用(接入了聊天机器人,能够进行正常对话)

    使用Vue2进行的仿手机QQ的webapp的制作,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 项目地址 https://github.com ...

随机推荐

  1. deepin gala窗口管理器关闭动画

    deepin中有两个管理器,一个基于metacity,另一个基于gala,可以用super+tab来进行切换.metacity是不带动画的,而 gala是带动画效果的.但这里有个问题,不知道有些同学上 ...

  2. mySql事务_ _Java中怎样实现批量删除操作(Java对数据库进行事务处理)?

      本文是记录Java中实现批量删除操作(Java对数据库进行事务处理),在开始之前先来看下面这样的一个页面图: 上面这张图片显示的是从数据库中查询出的出租信息,信息中进行了分页处理,然后每行的前面提 ...

  3. java 事件监听 - 控件

    java 事件监听 //事件监听 //事件监听,写了一个小案例,点击按钮改变面板的颜色. import java.awt.*; import javax.swing.*; import java.aw ...

  4. JVM实用参数(四)内存调优

    理想的情况下,一个Java程序使用JVM的默认设置也可以运行得很好,所以一般来说,没有必要设置任何JVM参数.然而,由于一些性能问题(很不幸的是,这些问题经常出现),一些相关的JVM参数知识会是我们工 ...

  5. 使用delphi+intraweb进行微信开发5—准备实现微信API,先从获取AccessToken开始

    在前4讲中我们已经使iw开发的应用成功和微信进行了对接,再接下来的章节中我们开始逐一尝试和实现微信的各个API,开始前先来点准备工作 首先需要明确的是,微信的API都是通过https调用实现的,分为p ...

  6. (2016 年) githup 博客地址 : https://github.com/JMWY/MyBlog

    githup 博客地址 : https://github.com/JMWY/MyBlog

  7. [LeetCode OJ] Max Points on a Line

    Max Points on a Line Submission Details 27 / 27 test cases passed. Status: Accepted Runtime: 472 ms ...

  8. 【原创】【2015最新】微信公众平台开发手把手入门之一:缘起微信公众号(PHP,MYSQL, BAE)

    最近因为业务的需要,老板布置做了两个月简单的的微信公众平台开发,从网上搜了一些资料,实话说资料不多. 在参考学习的过程中也遇到了不少难缠的小问题,虽然不难逾越,但是确实浪费了时间. 我发现网上仅有不多 ...

  9. c 语言 运算符 优先级

    C 语言 运算法优先级 从高 到 低 优先级 运算符 功能 适用范围 结合性 15 () [] . -> 括号 下标 存取成员 存取成员 表达式 数组 结构联合 结构联合 → (左→右) 14 ...

  10. vi和vim 的常用操作

    到文件末尾: ESC + shift G : 到文件头: G + G: 整块模式 快捷键  [不使用鼠标,来选择块] v                   字符选择,会将光标经过的地方反白选择! V ...