add more samples to rtu

Author: Keillion

barcode-scanner-api-samples/scan-single-barcode/angular/README.md

@@ -19,7 +19,7 @@ npm install
 ### 2. Run the App
 
 ```bash
-ng serve
+npm run start
 ```
 
 Then open your browser at http://localhost:4200 to view the sample app.

barcode-scanner-api-samples/scan-single-barcode/angular/package.json

@@ -5,8 +5,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "watch": "ng build --watch --configuration development"
   },
   "private": true,
   "dependencies": {

barcode-scanner-api-samples/scan-single-barcode/angular/public/favicon.ico

@@ -1,8 +1,7 @@
 <div class="barcode-scanner-hello-world-page">
   <div class="barcode-scanner-title">
     <h2 class="barcode-scanner-title-text">Hello World for Angular</h2>
-    <svg t="1744959268852" class="barcode-scanner-title-logo" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3482"><path d="M435.8 536.2H512V353z" fill="#DD0031" p-id="3483"></path><path d="M400.9 616.8l-52.4 130.8h-97.2L512 163V64L94.9 212.7l63.6 551.5L512 960V616.8z" fill="#DD0031" p-id="3484"></path><path d="M512 353v183.2h76.2z" fill="#C3002F" p-id="3485"></path><path d="M512 64v99l259.8 584.6h-97.2l-52.4-130.8H512V960l353.5-195.8 63.6-551.5z" fill="#C3002F" p-id="3486"></path></svg>
   </div>
   <!-- This div will host the barcode scanner's camera view -->
-  <div class="barcode-scanner-view" #scannerView></div>
+  <div class="barcode-scanner-view" #barcodeScannerViewRef></div>
 </div>

barcode-scanner-api-samples/scan-single-barcode/angular/src/app/app.component.html

@@ -9,17 +9,21 @@ import { BarcodeScanner, BarcodeScannerConfig } from 'dynamsoft-barcode-reader-b
 
 export class AppComponent {
   title = 'angular';
+  barcodeScanner: BarcodeScanner | null = null;
 
-  @ViewChild('scannerView') scannerView!: ElementRef<HTMLDivElement>;
+  @ViewChild('barcodeScannerViewRef') barcodeScannerViewRef!: ElementRef<HTMLDivElement>;
 
   async ngAfterViewInit(): Promise<void> {
     // Configuration object for initializing the BarcodeScanner instance
     const config: BarcodeScannerConfig = {
       license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key
-      container: this.scannerView.nativeElement, // Specify where to render the scanner UI
+
+      // Specify where to render the scanner UI
+      // If container is not specified, the UI will take up the full screen
+      container: this.barcodeScannerViewRef.nativeElement, 
 
       // Specify the path for the definition file "barcode-scanner.ui.xml" for the scanner view.
-      uiPath: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/",
+      uiPath: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/ui/barcode-scanner.ui.xml",
 
       // showUploadImageButton: true,
       // scannerViewConfig: {
@@ -34,13 +38,16 @@ export class AppComponent {
     }
 
     // Create an instance of the BarcodeScanner with the provided configuration
-    const barcodeScanner = new BarcodeScanner(config);
+    this.barcodeScanner = new BarcodeScanner(config);
 
     // Launch the scanner; once a barcode is detected, display its text in an alert
-    barcodeScanner.launch().then((result) => {
-      if (result.barcodeResults.length) {
-        alert(result.barcodeResults[0].text);
-      }
-    });
+    let result = await this.barcodeScanner.launch();
+    if (result.barcodeResults.length) {
+      alert(result.barcodeResults[0].text);
+    }
+  }
+  async ngOnDestroy(): Promise<void> { 
+    // Dispose of the barcode scanner when the component unmounts
+    this.barcodeScanner?.dispose();
   }
 }

barcode-scanner-api-samples/scan-single-barcode/angular/src/app/app.component.spec.ts

@@ -5,7 +5,6 @@
   <title>Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera)</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
   <app-root></app-root>