angular-qrcode

WebJar for angular-qrcode

License	MIT
Categories	Github Development Tools Version Controls Angular User Interface Web Frameworks
GroupId	org.webjars.bower
ArtifactId	github-com-monospaced-angular-qrcode
Last Version	7.2.0
Release Date	Feb 13, 2018
Type	jar
Description	angular-qrcode WebJar for angular-qrcode
Project URL	http://webjars.org
Source Code Management	https://github.com/monospaced/angular-qrcode

Download github-com-monospaced-angular-qrcode

Filename	Size
github-com-monospaced-angular-qrcode-7.2.0.pom
github-com-monospaced-angular-qrcode-7.2.0.jar	9 KB
github-com-monospaced-angular-qrcode-7.2.0-sources.jar	22 bytes
github-com-monospaced-angular-qrcode-7.2.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/github-com-monospaced-angular-qrcode/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>github-com-monospaced-angular-qrcode</artifactId>
    <version>7.2.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/github-com-monospaced-angular-qrcode/
implementation 'org.webjars.bower:github-com-monospaced-angular-qrcode:7.2.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/github-com-monospaced-angular-qrcode/
implementation ("org.webjars.bower:github-com-monospaced-angular-qrcode:7.2.0")

Apache Buildr

'org.webjars.bower:github-com-monospaced-angular-qrcode:jar:7.2.0'

Apache Ivy

<dependency org="org.webjars.bower" name="github-com-monospaced-angular-qrcode" rev="7.2.0">
  <artifact name="github-com-monospaced-angular-qrcode" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='github-com-monospaced-angular-qrcode', version='7.2.0')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "github-com-monospaced-angular-qrcode" % "7.2.0"

Leiningen

[org.webjars.bower/github-com-monospaced-angular-qrcode "7.2.0"]

Dependencies

compile (2)

Group / Artifact	Type	Version
org.webjars.bower : angular	jar	[1.0.6,)
org.webjars.bower : github-com-monospaced-bower-qrcode-generator	jar	0.2.0

Project Modules

There are no modules declared in this project.

Angular QR Code

<qrcode></qrcode>

An AngularJS directive to create QR Codes using Kazuhiko Arase’s qrcode-generator library.

See it in action.

Installation

npm install angular-qrcode

Script elements

<script src="/node_modules/qrcode-generator/qrcode.js"></script>
<script src="/node_modules/qrcode-generator/qrcode_UTF8.js"></script>
<script src="/node_modules/angular-qrcode/angular-qrcode.js"></script>

angular
.module('your-module', [
  'monospaced.qrcode',
]);

ES2015

import qrcode from 'qrcode-generator';
import ngQrcode from 'angular-qrcode';

// hacks for the browser
// if using webpack there is a better solution below
window.qrcode = qrcode;
require('/node_modules/qrcode-generator/qrcode_UTF8');

angular
.module('your-module', [
  ngQrcode,
]);

ES2015 + webpack

Add the following to webpack.config.js:

new webpack.ProvidePlugin({
  qrcode: 'qrcode-generator',
})

Import everything, no need for window or require hacks:

import qrcode from 'qrcode-generator';
import qrcode_UTF8 from '/node_modules/qrcode-generator/qrcode_UTF8';
import ngQrcode from 'angular-qrcode';

angular
.module('your-module', [
  ngQrcode,
]);

Important!

Version and Error Correction

The amount of data a qrcode can contain is impacted by its version and error-correction-level.

version designates the density of the encoding. If it isn't specifed, it defaults to 5. If the version specified is too small to contain the data given, the next highest version will be tried automatically.

The maximum supported version is 40, and error-correction-leveldefaults to M.

For more information see http://www.qrcode.com/en/about/version.html.

Usage

as element

<qrcode data="string"></qrcode>

with QR options

<qrcode data="string" version="2" error-correction-level="Q" size="200" color="#fff" background="#000"></qrcode>

as a downloadable image

<qrcode data="string" download></qrcode>

as a link to URL

<qrcode data="http://example.com" href="http://example.com"></qrcode>

download and href can’t be used on the same element (if download is present, href will be ignored)

with expressions, observe changes

<qrcode version="{{version}}" error-correction-level="{{level}}" size="{{size}}" data="{{var}}" href="{{var}}" color="{{color}}" background="{{background}}" download></qrcode>

Options

Permitted values

• version: 1–40 (default: 5) - if required, will be auto-incremented to contain data given

• error-correction-level: L, M, Q, H (default: M)

• size: integer (default: size is calculated automatically)

• download: boolean (default: false)

• href: url as string

• color: hex as string (default: #000)

• background: hex as string (default: #fff)

The amount of data (measured in bits) must be within capacity according to the version and error correction level, see http://www.qrcode.com/en/about/version.html.

Demo

monospaced.github.io/angular-qrcode

Reference

QR Code versions

QR Code error correction

Versions

Version
7.2.0 Feb 13, 2018