angular-bootstrap-simple-chat

WebJar for angular-bootstrap-simple-chat

License

License

MIT
Categories

Categories

Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

angular-bootstrap-simple-chat
Last Version

Last Version

0.4.0
Release Date

Release Date

Type

Type

jar
Description

Description

angular-bootstrap-simple-chat
WebJar for angular-bootstrap-simple-chat
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/irontec/angular-bootstrap-simple-chat

Download angular-bootstrap-simple-chat

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-bootstrap-simple-chat/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-bootstrap-simple-chat</artifactId>
    <version>0.4.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/angular-bootstrap-simple-chat/
implementation 'org.webjars.bower:angular-bootstrap-simple-chat:0.4.0'
// https://jarcasting.com/artifacts/org.webjars.bower/angular-bootstrap-simple-chat/
implementation ("org.webjars.bower:angular-bootstrap-simple-chat:0.4.0")
'org.webjars.bower:angular-bootstrap-simple-chat:jar:0.4.0'
<dependency org="org.webjars.bower" name="angular-bootstrap-simple-chat" rev="0.4.0">
  <artifact name="angular-bootstrap-simple-chat" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='angular-bootstrap-simple-chat', version='0.4.0')
)
libraryDependencies += "org.webjars.bower" % "angular-bootstrap-simple-chat" % "0.4.0"
[org.webjars.bower/angular-bootstrap-simple-chat "0.4.0"]

Dependencies

compile (3)

Group / Artifact Type Version
org.webjars.bower : angular jar [1.3,1.4)
org.webjars.bower : bootstrap jar [3.3.1,3.4)
org.webjars.bower : lodash jar [2.4,2.5)

Project Modules

There are no modules declared in this project.

<irontec-simple-chat>

An AngularJS+Bootstrap Simple Chat Directive

AngularJS 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

  • 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
<link rel="stylesheet" href="bower_components/angular-bootstrap-simple-chat/src/css/themes.css">
  • Define the theme you will use with the theme property
  • List of themes:
    • irontec
    • material
org.webjars.bower

Irontec

Irontec, Internet y Sistemas sobre GNU/Linux. We are an Open Source Company from Bilbao (Basque Country / Spain)

Versions

Version
0.4.0