Angular

2022年7月3日星期日

[異常]Refusing to run ionic cordova plugin inside a Capacitor project.

安裝控件

ionic cordova plugin add uk.co.workingedge.cordova.plugin.sqliteporter

出現異常 :

Refusing to run ionic cordova plugin inside a Capacitor project.

解決:

ionic integrations disable capacitor

解決Could not find com.android.tools.build:gradle 問題

現在CSDN的文章也不靠譜，都是複制粘貼。回到問題

repositories 也設置了

下載 gradle-6.8.1-all.zip

設置 -》 gradle -》使用 gradle 從選擇 'gradle-wrapper.propertiers'

setting -》 gradle -》 gradle user home 選擇解壓gradle-6.8.1-all.zip 後的目錄

下面關鍵的來了

依賴{

類路徑 'com.android.tools.build:gradle: 4.0.0 '

}

這個是插件版本，並不是你的gradle 的版本，

插件跟gradle版本對比看如下鏈接：

https://developer.android.google.cn/studio/releases/gradle-plugin.html

我之前一直把插件版本跟gradle 寫成一樣，結果怎麼都是報 Could not find com.android.tools.build:gradle 錯誤。希望你避免踩坑

2022年6月9日星期四

[Angular] 使用 @ViewChild 取得操作 DOM 屬性

在使用 Angular 開發時因為已內建基本的資料繫結功能，我們只要在 html 範本中依照繫結語法即可簡單快速地完成對指定的 DOM 物件完成繫結，只要變更 component.ts 的資料內容，DOM 的值就會跟著變動，不用像使用 jquery 需要先一個一個取得指定物件在對其操作，這對常需要使用動態表格的功能開發上減少了許多負擔，但有時候我們還是會依照需求在某個時間對單獨的 DOM 物件進行操作或取得屬性值來判斷，例如使用 fabric.js，等需要對 canvas 設定大小的操作，通常我們不會寫死，而是依照其上一層的 div 元素大小來動態設定 canvas 畫布大小，這時候我們可以用 @ViewChild 屬性裝飾器來於 component.ts 操作 DOM 物件內容。

使用說明

示範使用 fabricjs 依照動態寬高設定 canvas 大小

app.component.scss

.viewport {
     width: 100%;
     height: calc(100vh - 250px);
}

app.component.html

    <div #viewport class="viewport">
      <canvas id="canvas" style="border:1px dashed"></canvas>
    </div>

app.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Canvas } from 'fabric/fabric-impl';
import { fabric } from 'fabric';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

  private canvas: Canvas;

 @ViewChild('viewport', { static: true }) viewportDOM: ElementRef;

  constructor() { }

  ngOnInit(): void {
  
  this.canvas = new fabric.Canvas('canvas');
  this.canvas.setWidth(this.viewportDOM.nativeElement.offsetWidth);
  this.canvas.setHeight(this.viewportDOM.nativeElement.offsetHeight);
  this.canvas.renderAll();
  }
}

注意這裡使用方式情境和官網範例點不太一樣，這裡多設定了一個 static 的選項，因為我想在 ngOnInit() 時就完成操作，而 static 參數是指我們要操作的 DOM 在 component.html 一開始就存在，不是透過 *ngIf 或 *ngFor 等結構型指令去產生的，如果要操作的 DOM 是由結構型指令產生，可以不用加上 static 參數，因為不加就是預設 static : false，這時候就要在 ngAfterViewInit() 才能抓到 @ViewChild 的內容，否則會報錯。

From: https://www.tpisoftware.com/tpu/articleDetails/2366

2022年1月17日星期一

How to Uninstall and Reinstall Angular cli?

Uninstall Angular CLI:


npm uninstall -g @angular/cli

Clear Cache:


npm cache clean --force

npm cache verify

Install Angular CLI:


npm install -g @angular/cli

ionic project create


	ionic start test blank --type=ionic-angular --capacitor

	cd test

	ionic build

	ionic cordova platform add android

	ionic cap add android


	ionic start test blank --type=ionic-angular --cordova

	cd test

	ionic build

	ionic cordova platform add android

	ionic cap add android

Ionic repair

C: \ionic repair

[INFO] ionic repair will do the following:

- Remove node_modules/ and package-lock.json
- Run npm i to restore dependencies
- Remove platforms/ and plugins/
- Run cordova prepare to restore platforms and plugins

Node.js 重新安裝

第 1 步：從系統中卸載 NodeJs 應用

第 2 步：轉到 programFiles/nodejs ->刪除 node_modules 文件夾

第 3 步：重新安裝 NodeJs 應用 (Download)

2020年11月5日星期四

完整說明如何安裝 jQuery, Popper JS and Bootstrap 4 至 angular 8 以上版本中使用

簡介:

Bootstrap 4 is the latest version of Bootstrap. Bootstrap is a free front-end framework for quick and simple web development. Bootstrap helps to create responsive designs in less time. Bootstrap contains many HTML and CSS based templates or components like typography, buttons, forms, tables, image carousels, navigation, modals, pagination, spinners, alerts, icons, dropdowns, cards and many more.

先決條件:

Node.js 安裝.
Angular CLI 安裝.

如果你是從零開始的新學習者，你必須先把開發環境安裝好，Node.js 及 Angular CLI 。

Getting started: Creating a hello world application in angular 8

要安裝 Bootstrap 4 需要先安裝 jQuery 及 popper.js 才能正常使用. 下方說明安裝的步驟

方法 1: MaxCDN

If you don’t want to install and host bootstrap, you can add it from CDN(Content Delivery Network).

步驟 1: Copy-paste following link and script tags into your head tag in the index.html file

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

步驟 2: Copy-paste following code in the app.component.html file

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">DevConquer</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

<div class="jumbotron">
  <h1 class="text-center">Welcome to angular 8 and bootstrap 4</h1>
</div>

步驟 3: Run your project and open the application in a browser

Run your project from a terminal by the ng serve command:

Open your application from a browser by the following URL:

http://localhost:4200

方法 2: By installing the npm packages

步驟 1: Install jQuery npm package

Install jquery npm package from a terminal by the following command:

npm install jquery --save

**Note: –save flag will add the dependency in package.json

步驟2: Install Bootstrap npm package

Install bootstrap npm package from a terminal by the following command:

npm install bootstrap@4.3.1 --save

步驟 3: Install Popper JS npm package

Install popper.js npm package from a terminal by the following command:

npm install popper.js --save

步驟 4: Adding styles and scripts into angular.json file

Add the following styles and scripts code in the angular.json file from your project.

"styles": [
    "src/styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
 ],
 "scripts": [
    "./node_modules/jquery/dist/jquery.min.js",
    "./node_modules/popper.js/dist/umd/popper.min.js",
    "./node_modules/bootstrap/dist/js/bootstrap.min.js"
 ]

步驟 5: Copy-paste following code in the app.component.html file

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">DevConquer</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

<div class="jumbotron">
  <h1 class="text-center">Welcome to angular 8 and bootstrap 4</h1>
</div>

步驟 6: Run your project and open the application in a browser

Run your project from a terminal by the ng serve command.

Open your application from a browser by the following URL:

http://localhost:4200

2020年8月2日星期日

[morse]在 Angular 中設定全域變數的方法

我想在Angular中設定一個全域變數，以將我個人開發系統的連線網址做個人化的變更，也就是讓使用者可以自行定義由那一台主機進行登入(原由就不再贅述)。

1.宣告變數

打開 app.component.ts 並加入我們想要的變數宣告

例如:

public static morseSystemIP = '10.0.0.1:8080';

2.在要取用或改變此全域變數的地方做如下的引用

//取用

this.baseUrl = AppComponent.morseSystemIP;

//改變值

AppComponent.morseSystemIP = '000.000.00.000';

如果有需要多組的IP做選擇可以考慮使用列舉的方式製作可參考:

Angular Enum 要如何轉換為下拉選單

Morse 2020/08/02

[morse]Angular Enum 要如何轉換為下拉選單

列舉的宣告

enum Currency {

USD = 'US Dollar',

MYR = 'Malaysian Ringgit',

SGD = 'Singapore Dollar',

INR = 'Indian Rupee',

JPY = 'Japanese Yen'

}

在Angular的Html中引用時可用以下方法:

<option

*ngFor="let currency of currencies | keyvalue"

value="{{currency.key}}">

</option>

</select>

值的動態綁定(例如要在AppComponent中作綁定)：

export class AppComponent {

currencies = Currency;

selectedCurrency: Currency;

}

Morse 2020/08/02

2019年12月23日星期一

[morse]Ionic 檢查設備硬件功能是否已啟用或對應用程序可用

Install
ionic cordova plugin add cordova.plugins.diagnostic
npm install @ionic-native/diagnostic

Example 1:

import { Diagnostic } from '@ionic-native/diagnostic/ngx';
constructor(private diagnostic: Diagnostic) { }
...
let successCallback = (isAvailable) => { console.log('Is available? ' + isAvailable); }
let errorCallback = (e) => console.error(e);
this.diagnostic.isCameraAvailable().then(successCallback).catch(errorCallback);
this.diagnostic.isBluetoothAvailable().then(successCallback, errorCallback);

this.diagnostic.getBluetoothState()
.then((state) => {
if (state == this.diagnostic.bluetoothState.POWERED_ON){
// do something
} else {
// do something else
}
}).catch(e => console.error(e));

Example 2:

app.module.ts

import { Diagnostic } from '@ionic-native/diagnostic/ngx';

@NgModule({

providers: [

Diagnostic

]

})

xxx.page.ts

import { Diagnostic } from '@ionic-native/diagnostic/ngx';

constructor(private _diagnostic: Diagnostic) { }

Gpsstart() {

// 檢查GPS

this._diagnostic.isGpsLocationEnabled().then(

(OnSuccess) => {

if (OnSuccess){

alert('GPS 開啟中');

this.showWatch();

}

else{

alert('GPS 沒開啟!');

// 進入 GPS 啟用設定畫面

this._diagnostic.switchToLocationSettings();

}

(OnFail) => {

alert('GPS 檢查時出現錯誤!');

this._totast.presentToastWithOptions('GPS 檢查時出現錯誤! '+ OnFail.message);

//cordova.plugins.diagnostic.switchToLocationSettings();

}

).catch(

(OnError) => {

this._totast.presentToastWithOptions('Catch error: ' + OnError.message);

}

);

}

gpsWatch() {

this.watchPosition = undefined;

const options = {

enableHighAccuracy: true,

timeout: 5000,

maximumAge: 0

};

this.gpsWatchId = this._geolocation.watchPosition(options).subscribe(

(p) => {

if (p) {

this.watchPosition = p;

}

//alert(p.coords.latitude);

error => {

// console.log('GPS Watch fail!');

// console.error(error);

// this._totast.presentToastWithOptions(error.message);

alert(error.message);

}

);

}

referance :

如何檢查是否啟用了gps

https://stackoverflow.com/questions/35304103/phonegap-how-to-check-if-gps-is-enabled

診斷-檢查設備硬件功能是否已啟用或對應用程序可用，例如相機，GPS，WiFi

https://ionicframework.com/docs/native/diagnostic

2019年12月5日星期四

[morse]Using WifiWizard2 with Ionic

安裝WifiWizrd2插件
ionic cordova plugin add wifiwizard2

home.page.html

< ion-header>
  < ion-toolbar>
    < ion-title>
     List Wifi AP
    < /ion-title>
  < /ion-toolbar>
< /ion-header>

< ion-content padding>

    < ion-button color="primary" (click)="getNetworks()">Get Networks< /ion-button>
    {{info_txt}}
    < ion-list>
        < ion-item *ngFor="let data of results">
            {{data.SSID}} -
            {{data.BSSID}}
        < /ion-item>
      < /ion-list>
< /ion-content>

home.page.ts

import { Component } from '@angular/core';

declare var WifiWizard2: any;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  results = [];
  info_txt = "";
  async getNetworks() {
    this.info_txt = "loading...";
    try {
      let results = await WifiWizard2.scan();
      this.results = results;
      this.info_txt = "";
    } catch (error) {
      this.info_txt = error;
    }
  }
}

注意: 需在模擬器或手機上才能試出效果。

2019年11月28日星期四

[morse]使用Cordova插件和Ionic Native

在開發使用 Capacitor 的應用程序時，可以同時使用 Cordova 和 Ionic Native 插件。

安裝 Cordova 插件

只需安裝所選插件，同步項目，完成所有必需的本機項目配置，即可開始：

npm install cordova-plugin-name
npx cap sync

更新 Cordova 插件

與安裝步驟相似。只需將cordova插件更新為最新版本，然後Capacitor即可獲取更改：

npm install cordova-plugin-name@latest
npx cap update

如果你不想冒險引進重大更改，使用npm update cordova-plugin-name，而不是@latest作為update方面semver。

安裝 Ionic 本機插件

Ionic Native提供TypeScript包裝器以及一致的API和命名約定，以使Cordova插件的開發更加輕鬆。Capacitor支持此功能，因此，只要找到要使用的Ionic Native包裝器，就安裝JavaScript代碼，安裝相應的Cordova插件，然後同步項目：

npm install @ionic-native/javascript-package-name
npm install cordova-plugin-name
npx cap sync

更新 Ionic 本機插件

類似於安裝步驟。更新Ionic Native JavaScript庫，刪除然後重新添加Cordova插件，然後更新您的項目：

npm install @ionic-native/javascript-package-name@latest
npm install cordova-plugin-name@latest
npx cap update

如果您不想冒險進行重大更改，請使用npm update cordova-plugin-name代替@latest。

重要說明：配置

Capacitor不支持Cordova安裝變量，自動配置或掛鉤，這是因為我們的理念是讓您控製本機項目源代碼（這意味著不需要掛鉤）。如果您的插件需要設置變量或設置，則需要通過plugin.xml在iOS和Android上的插件設置和必需設置之間進行映射來手動應用這些配置設置。

諮詢

的iOS

和

安卓系統

配置指南，以獲取有關如何配置每個平台的信息。

相容性問題

某些Cordova插件不適用於Capacitor，或者Capacitor提供了相互衝突的替代方案。有關詳細信息和已知的不兼容列表，請參見此處。

訂閱：文章 (Atom)

2022年7月3日 星期日

2022年6月9日 星期四