https://github.com/irontec/angular-bootstrap-simple-chat
Simple AngularJS Chat Directive with Bootstrap
https://github.com/irontec/angular-bootstrap-simple-chat
Last synced: about 1 year ago
JSON representation
Simple AngularJS Chat Directive with Bootstrap
- Host: GitHub
- URL: https://github.com/irontec/angular-bootstrap-simple-chat
- Owner: irontec
- Created: 2014-12-29T17:19:42.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2016-06-22T18:41:53.000Z (almost 10 years ago)
- Last Synced: 2025-03-26T23:07:53.651Z (about 1 year ago)
- Language: CSS
- Size: 86.9 KB
- Stars: 147
- Watchers: 37
- Forks: 83
- Open Issues: 16
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# ````
An AngularJS+Bootstrap Simple Chat Directive
# Usage
## Requirements
```json
"dependencies": {
"angularjs": "~1.3.8",
"bootstrap": "~3.3.1",
"angularjs-scroll-glue": "~0.0.1"
}
```
## Installation
### Install with Bower
```bash
bower install --save angular-bootstrap-simple-chat
```
### Add the dependencies to your index.html
```html
```
### Load the module in your app
```javascript
angular.module('app', ['irontec.simpleChat']);
```
## Using
```html
/** VIEW **/
```
```javascript
/** 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
* messages: array of messages to show.
Message Format: {username: 'username', content: 'My message'}
* username: username of the user using the app
* input-placeholder-text: String, text in the input placeholder
* title: String, text in the chat top title
* theme: String, theme used for the chat
* submit-function: Function in the controller to be launched on the new message submit. It receives two params: *message & username*
* visible: Boolean, controls visibility on the page (required)
## Using themes
* First, add the themes stylesheet to your index.html
```html
```
* Define the theme you will use with the theme property
* List of themes:
* irontec
* material