Angular

2022年1月17日星期一

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;
    }
  }
}

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

2022年1月17日 星期一

2020年11月5日 星期四