AngularJS作出简单聊天机器人

简单聊天机器人

很初级的对话框形式。以前做对话框使用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>