完整說明如何安裝 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.

先決條件:

1. Node.js 安裝.
2. 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

[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中引用時可用以下方法:

<select [(ngModel)]="selectedCurrency">

    <option

        *ngFor="let currency of currencies | keyvalue" 

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

            {{currency.value}}

    </option>

</select>

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

export class AppComponent {

    currencies = Currency;

    selectedCurrency: Currency;

}

Morse 2020/08/02

[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

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

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

[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提供了相互衝突的替代方案。有關詳細信息和已知的不兼容列表，請參見此處。

[morse]Capacitor 構建一個 Ionic Framework Camera 應用程序

Web框架：Ionic 4 + Angular

平台：Web，iOS，Android

通過Capacitor，可以輕鬆構建可在iOS，Android，台式機和Web上本地運行的Web應用程序。在本指南中，我們會將相機功能添加到可在Web，iOS和Android上運行的Ionic Angular應用中。準備使用一個JavaScript方法調用來捕獲照片嗎？讓我們開始吧。

所需的依存關係

構建和部署iOS和Android應用程序需要其他依賴項，包括iOS和Android設備。請按照此處的說明進行操作 在繼續之前。

準備一個離子應用程序

如果您有現有的Ionic應用程序，請跳過此部分。如果沒有，讓我們先創建一個Ionic應用程序。在終端中，安裝Ionic（這也會更新為Ionic的最新版本）：

npm install -g ionic

接下來，基於“ tabs”啟動程序項目創建一個新的Ionic應用程序，並同樣安裝Capacitor：

ionic start capApp tabs --capacitor

接下來，使用您的應用程序信息初始化電容器。

npx cap init

應用名稱： CapApp
應用包ID： com.example.capapp

添加電容器：現有的離子項目

電容器的設計可插入任何現有的現代JavaScript網絡應用程序-包括Ionic！如果您在--capacitor上面創建Ionic項目時沒有添加標誌，或者有現有的Ionic項目，則沒問題。運行以下命令：

cd capApp
ionic integrations enable capacitor

接下來，使用您的應用程序信息初始化電容器。

npx cap init

應用名稱： CapApp
應用包ID： com.example.capapp

一次構建應用

在向該項目添加任何本機平台之前，必須至少構建一次該應用程序。Web構建會創建Capacitor需要的Web資產目錄（wwwIonic項目中的文件夾）：

ionic build

接下來，添加您要為其構建的所有平台（當然，除了網絡之外）：

npx cap add ios
npx cap add android

運行這些命令後，將在項目根目錄下創建android和ios文件夾。這些是完全獨立的本機項目工件，應將其視為Ionic應用程序的一部分（即，將其檢入源代碼控制中）。

添加相機功能

接下來，我們將添加使用Capacitor Camera API使用設備的相機拍攝照片的功能。

首先，打開src/app/tab2文件夾下的Tab2 HTML頁面。添加一個圖像標籤，以顯示使用相機拍攝的當前照片，並添加一個Ionic fab按鈕，單擊該按鈕將打開相機：

<ion-content>
  <img [src]="photo" >

  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button (click)="takePicture()">
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

接下來，我們需要添加將為相機功能提供動力的邏輯。打開src/app/tab2/tab2.page.ts並導入電容器插件和相機類：

import { Plugins, CameraResultType, CameraSource } from '@capacitor/core';

接下來，實現takePicture()方法：

export class Tab2Page {
  async takePicture() {
    const image = await Plugins.Camera.getPhoto({
      quality: 100,
      allowEditing: false,
      resultType: CameraResultType.DataUrl,
      source: CameraSource.Camera
    });

    this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
  }
}

注意這裡的魔力：這裡沒有提到iOS或Android！只有一個方法調用-- Camera.getPhoto()將打開設備的相機並允許我們拍照。

接下來，我們需要告訴Angular信任動態圖像數據。為此，請DomSanitizer通過構造函數注入並用於sanitizer.bypassSecurityTrustResourceUrl()允許將圖像數據顯示在我們的應用程序中：

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

export class Tab2Page {
  photo: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) {  }
}

這是完整的Camera實施：

import { Component } from '@angular/core';
import { Plugins, CameraResultType, CameraSource } from '@capacitor/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
  photo: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) {  }

  async takePicture() {
    const image = await Plugins.Camera.getPhoto({
      quality: 100,
      allowEditing: false,
      resultType: CameraResultType.DataUrl,
      source: CameraSource.Camera
    });

    this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
  }
}

讓我們在瀏覽器中嘗試一下：

ionic serve

打開開發人員工具，然後選擇Console選項卡。然後，導航至選項卡2，然後單擊新創建的Camera fab按鈕。控制台中出現錯誤：

ERROR Error: Uncaught (in promise): TypeError: cameraModal.present is not a function

一些電容器插件（包括相機）通過Ionic PWA Elements庫提供基於Web的功能和UI 。這是一個獨立的依賴項，因此請使用終端安裝（取消ionic serve當前首先運行的命令）：

npm install @ionic/pwa-elements

@ionic/pwa-elements通過編輯導入src/main.ts：

import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

現在已正確配置了該配置，重新運行ionic serve並單擊Camera fab按鈕。如果您的計算機有任何類型的網絡攝像頭，則會顯示一個模態窗口，您可以拍照！

 “我很帥。” - 作者

接下來，讓我們在iOS和Android上運行此應用。

的iOS

電容式iOS應用通過Xcode進行配置和管理，依賴性由CocoaPods管理。在iOS設備上運行此應用之前，需要完成幾個步驟。

從終端運行Capacitor copy命令，該命令將所有Web資產（在這種情況下為Ionic Angular應用程序）複製到本地iOS項目中：

npx cap copy

注意：對代碼的本機部分進行更新（例如添加新插件）後，請使用以下sync命令：

npx cap sync

接下來，運行Capacitor open命令，以Xcode打開本機iOS項目：

npx cap open ios

在Xcode中，App在左側的Project Navigator中單擊，然後在該Signing部分中，選擇您的開發團隊。

接下來，要使Camera插件正常工作，我們必須配置“隱私-攝像機使用”權限。首次Camera.getPhoto()調用後，iOS會自動顯示一個模式對話框，提示用戶允許該應用使用相機。要進行設置，Info.plist必須修改文件（這裡有更多細節）。要訪問它，請單擊“信息”，然後展開“自定義iOS目標屬性”。

中的每個設置Info.plist都有一個低級參數名稱和一個高級名稱。默認情況下，屬性列表編輯器顯示高級名稱，但是切換到顯示原始的低級名稱通常很有用。為此，請在屬性列表編輯器中的任意位置單擊鼠標右鍵，然後切換“顯示原始鍵/值”。

找到NSCameraUsageDescription鍵（或添加鍵）並將“值”設置為描述應用程序為何需要使用相機的原因，例如“拍照”。權限提示打開時，該值將顯示給應用程序用戶。

有了權限，我們準備在真實設備上嘗試該應用程序！將iOS設備連接到Mac計算機，然後在Xcode中單擊“構建”按鈕以在設備上構建，安裝並啟動該應用程序：

在選項卡二上點擊“相機”按鈕後，將顯示權限提示。點擊確定，然後用相機拍攝照片。之後，照片顯示在應用程序中：

安卓系統

電容器Android應用是通過Android Studio配置和管理的。在Android設備上運行此應用之前，需要完成幾個步驟。

從終端運行Capacitor copy命令，該命令將所有Web資產（在這種情況下為Ionic Angular應用程序）複製到本地Android項目中：

npx cap copy

注意：對代碼的本機部分進行更新（例如添加新插件）後，請使用以下sync命令：

npx cap sync

接下來，運行Capacitor open命令，這將在Android Studio中打開本機Android項目：

npx cap open android

與iOS相似，我們必須啟用正確的權限才能使用相機。在AndroidManifest.xml文件中配置這些。Android Studio可能會自動打開此文件，但如果沒有打開，請在下找到它android/app/src/main/。

滾動到該Permissions部分，並確保包括以下條目：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

保存文件。有了權限，我們準備在真實設備上嘗試該應用程序！將Android設備連接到計算機。在Android Studio中，單擊“運行”按鈕，選擇連接的Android設備，然後單擊“確定”以在您的設備上生成，安裝並啟動該應用程序。

再次，在選項卡二上點擊“相機”按鈕時，應顯示權限提示。點擊確定，然後用相機拍攝照片。之後，照片應出現在應用程序中。

下一步是什