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