<irontec-simple-chat>

Usage

Requirements

"dependencies": {
 "angularjs": "~1.3.8",
 "bootstrap": "~3.3.1",
 "angularjs-scroll-glue": "~0.0.1"
}

Installation

Install with Bower

bower install --save angular-bootstrap-simple-chat

Add the dependencies to your index.html

<!-- Dependencies -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="bower_components/angularjs/angular.js"></script>
<!-- Simple Chat -->
<link rel="stylesheet" href="bower_components/angular-bootstrap-simple-chat/src/css/style.css">
<script src="bower_components/angular-bootstrap-simple-chat/src/scripts/index.js"></script>

Load the module in your app

angular.module('app', ['irontec.simpleChat']);

Using

/** VIEW **/
<irontec-simple-chat
 messages="vm.messages"
 username="vm.username"
 input-placeholder-text="You can write here"
 submit-button-text="Send your message"
 title="Super Awesome Chat"
 theme="material"
 submit-function="vm.sendMessage"
 visible="vm.visible"
 expand-on-new="vm.expandOnNew">
</irontec-simple-chat>

/** CONTROLLER **/
angular.module('app').controller('Shell', Shell);
function Shell() {
 var vm = this;
 vm.messages = [
 {
 'username': 'username1',
 'content': 'Hi!'
 },
 {
 'username': 'username2',
 'content': 'Hello!'
 },
 {
 'username': 'username2',
 'content': 'Hello!'
 },
 {
 'username': 'username2',
 'content': 'Hello!'
 },
 {
 'username': 'username2',
 'content': 'Hello!'
 },
 {
 'username': 'username2',
 'content': 'Hello!'
 }
 ];
 vm.username = 'username1';
 vm.sendMessage = function(message, username) {
 if(message && message !== '' && username) {
 vm.messages.push({
 'username': username,
 'content': message
 });
 }
 };
 vm.visible = true;
 vm.expandOnNew = true;
}

Documentation

Params

Using themes

<link rel="stylesheet" href="bower_components/angular-bootstrap-simple-chat/src/css/themes.css">