angular 代码生成器_使用Angular 10构建QR代码生成器-CSDN博客

angular 代码生成器

In this tutorial, we’ll learn how to build a QR Codes generator application using the latest Angular 10 version.

在本教程中，我们将学习如何使用最新的Angular 10版本构建QR Codes生成器应用程序。

First of all, what’s a QR code and what does it serve?

首先，什么是QR码？它的作用是什么？

According to Wikipedia:

A QR code (abbreviated from Quick Response code) is a type of matrix barcode (or two-dimensional barcode) first designed in 1994 for the automotive industry in Japan. A barcode is a machine-readable optical label that contains information about the item to which it is attached. In practice, QR codes often contain data for a locator, identifier, or tracker that points to a website or application. A QR code uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to store data efficiently.

QR码(缩写为快速响应码)是一种矩阵条形码(或二维条形码)，于1994年首次为日本的汽车行业设计。 条形码是一种机器可读的光学标签，其中包含有关其所附着物品的信息。 实际上，QR码通常包含指向网站或应用程序的定位器，标识符或跟踪器的数据。 QR码使用四种标准化的编码模式(数字，字母数字，字节/二进制和汉字)来有效地存储数据。

The Quick Response system became popular outside the automotive industry due to its fast readability and greater storage capacity compared to standard UPC barcodes. Applications include product tracking, item identification, time tracking, document management, and general marketing

与标准UPC条形码相比，快速响应系统具有快速的可读性和更大的存储容量，因此在汽车行业之外变得很流行。 应用程序包括产品跟踪，项目标识，时间跟踪，文档管理和常规营销

So it’s simply a compact and efficient way for storing data.

因此，这只是一种紧凑而有效的数据存储方式。

Now let’s see how to generate QR codes in your Angular 10 apps by example.

现在，让我们通过示例了解如何在Angular 10应用中生成QR码。

先决条件 (Prerequisites)

Before getting started you need a few prerequisites:

在开始之前，您需要满足一些先决条件：

Basic knowledge of TypeScript. Particularly the familiarity with Object Oriented concepts such as TypeScript classes and decorators.
TypeScript的基本知识。特别是熟悉面向对象的概念，例如TypeScript类和装饰器。
A local development machine with Node 10+, together with NPM 6+ installed. Node is required by the Angular CLI like the most frontend tools nowadays. You can simply go to the download page of the official website and download the binaries for your operating system. You can also refer to your specific system instructions for how to install Node using a package manager. The recommended way though is using NVM — Node Version Manager — a POSIX-compliant bash script to manage multiple active Node.js versions.
装有Node 10+的本地开发计算机，并安装了NPM 6+ 。像当今最前端的工具一样，Angular CLI要求使用节点。您可以直接转到官方网站的下载页面，然后下载适用于您的操作系统的二进制文件。您也可以参考特定的系统说明，以了解如何使用程序包管理器安装Node。但是，推荐的方法是使用NVM (节点版本管理器)-POSIX兼容的bash脚本来管理多个活动Node.js版本。

Note: If you don’t want to install a local environment for Angular development but still want to try the code in this tutorial, you can use Stackblitz, an online IDE for frontend development that you can use to create an Angular project compatible with Angular CLI.

注意：如果您不想为Angular开发安装本地环境，但仍想尝试本教程中的代码，则可以使用Stackblitz ，这是一个用于前端开发的在线IDE，可用于创建与Angular兼容的Angular项目。 CLI。

步骤1 —安装Angular CLI 10 (Step 1 — Installing Angular CLI 10)

In this step, we’ll install the latest Angular CLI 10 version (at the time of writing this tutorial).

在此步骤中，我们将安装最新的Angular CLI 10版本(在编写本教程时)。

Angular CLI is the official tool for initializing and working with Angular projects. To install it, open a new command-line interface and run the following command:

Angular CLI是用于初始化和使用Angular项目的官方工具。要安装它，请打开一个新的命令行界面并运行以下命令：

$ npm install -g @angular/cli

At the time of writing this tutorial, angular/cli v10 will be installed on your system.

在编写本教程时，您的系统上将安装angular / cli v10 。

第2步-创建新的Angular 10应用 (Step 2 — Creating a New Angular 10 App)

Let’s now create our project. Head back to your command-line interface and run the following commands:

现在创建项目。回到您的命令行界面并运行以下命令：

$ cd ~
$ ng new angular10qrcode

The CLI will ask you a couple of questions — If Would you like to add Angular routing? Type y for Yes and Which stylesheet format would you like to use? Choose CSS.

CLI会问您几个问题- 是否要添加Angular路由？ 键入y作为“是”， 您想使用哪种样式表格式？ 选择CSS 。

Next, navigate to you project’s folder and run the local development server using the following commands:

接下来，导航到项目的文件夹，并使用以下命令运行本地开发服务器：

$ cd angular10qrcode
$ ng serve

Open your web browser and navigate to the http://localhost:4200/ address to see your app running.

打开您的Web浏览器并导航到http://localhost:4200/地址，以查看您的应用程序正在运行。

Next, open a new terminal and make sure to navigate to your project’s folder and run the following command to install the ngx-qrcode library from npm using the following command:

接下来，打开一个新终端，并确保导航到项目的文件夹并运行以下命令，以使用以下命令从npm安装ngx-qrcode 库：

$ npm install @techiediaries/ngx-qrcode

Next open the src/app/app.module.ts file, and import NgxQRCodeModule from @techiediaries/ngx-qrcode in your module as follows:

接下来打开src/app/app.module.ts文件，并从@techiediaries/ngx-qrcode中导入NgxQRCodeModule ，如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgxQRCodeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once the library has been imported, you can use the ngx-qrcode component in your Angular application.

导入库后，您可以在Angular应用程序中使用ngx-qrcode组件。

Please note that we have also imported FormsModule.

请注意，我们还导入了 FormsModule 。

Next, open the src/app/app.component.ts file and update it as follows:

接下来，打开src/app/app.component.ts文件并如下更新：

import { Component } from '@angular/core';
import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from '@techiediaries/ngx-qrcode';@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  elementType = NgxQrcodeElementTypes.URL;
  correctionLevel = NgxQrcodeErrorCorrectionLevels.HIGH;
  value = 'https://www.techiediaries.com/';
}

Next, open the src/app/app.component.html file and add the following code:

接下来，打开src/app/app.component.html文件并添加以下代码：

<ngx-qrcode
  [elementType]="elementType"
  [errorCorrectionLevel]="correctionLevel"
  [value]="value"
  cssClass="bshadow"></ngx-qrcode>

We use various properties for configuring our QR code such as:

我们使用各种属性来配置我们的QR代码，例如：

the type,
方式，
the error correction level,
纠错级别
the value,
价值，
the CSS class.
CSS类。

You can find out more information about these properties and the other supported properties from the official ngx-qrcode docs.

您可以从ngx-qrcode官方文档中找到有关这些属性和其他受支持属性的更多信息。

Next, add a textarea for entering the value that you want to encode:

接下来，添加一个文本区域以输入要编码的值：

<textarea [(ngModel)] = "value"></textarea>

Finally open the src/styles.css file and add the following styles:

最后，打开src/styles.css文件并添加以下样式：

.bshadow {  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(5px 5px 5px #222222);
  opacity: .5;}textarea {
    margin-top: 15px; 
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 250px;
    opacity: .5;
}

This is a screenshot of our application:

这是我们的应用程序的屏幕截图：

That’s it we have finished our Angular 10 example for demonstrating how to generate QR codes in your Angular apps. You can visit us on Techiediaries for tutorials about Angular and modern web development practices.

就是这样，我们已经完成了Angular 10示例，以演示如何在Angular应用程序中生成QR码。您可以在Techiediaries上访问我们， Techiediaries获取有关Angular和现代Web开发实践的教程。

You can check out the application we’ve built in this article live on https://stackblitz.com/edit/angular-ngx-qrcode-example.

您可以在https://stackblitz.com/edit/angular-ngx-qrcode-example上实时查看我们在本文中构建的应用程序。