[morse]如何使用Netlify部署Angular應用

1. 在 Netlify 上創建一個帳戶。您可以選擇入門計劃。
2. 使用 Angular CLI  創建Angular項目（如果尚未創建）。
3. 導出路由以使用HTML5歷史記錄API時，請確保 useHash為false。默認情況下為false：只是不提供值。
4. 創建一個 _redirects 文件。您還需要將 _redirects 文件添加到 angular.json 的 assets 部分中，以便Angular在構建應用程序時將其包括在內，以便 Netlify 可以檢測到它。否則，瀏覽器刷新將無法進行。如果您使用其他使用路由的框架（例如 React 或 Vue.js），則也需要此文件。
5. 在 Netlify 上，配置應部署的項目。Netlify 與 GitHub，GitLab 和Bitbucket 集成良好。
6. 在 Netlify 上，您應該指定 build 命令。您應該在生產模式下構建應用程序，以獲得最佳性能和最小的捆綁包大小。在Angular中，您使用 Ahead-of-Time（AOT）編譯器：ng build — prod — aot。

Netlify上單頁應用程序的_redirects示例文件

# Rewrite all requests to any file that doesn’t already exist to the index page, where router can handle it.
/* /index.html 200

[morse]Angular reactive forms 雙向綁定 (Angular two way binding in reactive forms)

<form [formGroup]="form">
  <input name="first" formControlName="first" [(ngModel)]="example.first"/>
  <input name="last" formControlName="last" [(ngModel)]="example.last"/>
</form>

export class App {
  form: FormGroup;
  example = { first: '', last: '' };

  constructor(builder: FormBuilder) {
    this.form = builder.group({
      first: '',
      last: ''
    })
  }
}

Angular: Property 'controls' does not exist on type 'AbstractControl'. ng build --prod error 異常解決

使用 ng build --prod ng build --prod 編譯時報錯


ERROR in src/app/components/hr/arrangeshifts/arrangeshifts-form/arscal-selected/arscal-selected.component.html(23,13): Property 'controls' does not exist on type 'AbstractControl'.


報錯的地方是

  <div formArrayName="itemRow" *ngFor="let f of itemFG.get('itemRow').controls; let i=index;">

解決方法有二:


1.

在ts文件中添加方法:

formData { 
    return <FormArray>this.itemFG.get('itemRow'); 
}


在html中:

<div formArrayName="itemRow" *ngFor="let f of formData; let i=index" >





2.

直接改變html:

  <div formArrayName="itemRow" *ngFor="let f of itemFG.get('itemRow')['controls']; let i=index; >

Angular environments (使用環境變數)

開發環境及生產環境

使用 Angular CLI 建立的專案預設會有兩個環境設定，一個是開發環境，另一個是生產環境，分別由 environment.ts 及 environment.prod.ts 兩個檔案所描述。

常用的指令，像是 ng serve 時，預設使用開發環境；使用 ng build –prod 時，則會使用生產環境。

新增及使用環境變數

使 apiUrl 為例，設定兩個檔案

environment.ts:

export const environment = {
  production: false,
  apiUrl: 'http://localhost/api/',
};

environment.prod.ts:

export const environment = {
  production: true,
  apiUrl: 'http://demo.com/api/',
};

然後編輯 foo.service.ts

import { environment } from '../../environments/environment';
‧‧‧
private baseUrl : string = environment.apiUrl + 'foo';
‧‧‧

在開發環境時，baseUrl 是 ‘http://localhost/api/foo’

在生產環境時，baseUrl 是 ‘http://demo.com/api/foo’

這樣就可以達到開發跟生產環境使用不同的設定。

[morse]Clone an Array / Object

Clone an Array :

const myClonedArray  = Object.assign([], myArray);

Clone an object :

const myClonedObject = Object.assign({}, myObject);

Example:

        this.arsCalendarRows.map(
          row => {
            const a = Object.assign({}, row);
                     delete a['emp_no'];
                     delete a['emp_name'];
            this.arsCalendarRows2.push(a);
          });

將 Visual Studio Code 的編輯行設定高亮(Highlight)顯示

在使用 Visual Studio Code 時因為當前編輯行並不突顯, 感覺很費眼力，也容易使得眼睛疲勞，對眼睛的視力造成傷害。

找了很久，終於發現能夠突顯前編輯行的方法，就是使用增加擴充功能(Highlight Line)的安裝與設置參數，來改善這個惱人的困擾。

安裝設定的方法很容易如下: (看圖，照作即可)

Javascript 中 slice()、splice()、split() 易混淆指令解說

slice()

複製開始與結束點（結束點不算）中的內容

對象：
可操控Array及String

arr.slice()
arr.slice(begin)
arr.slice(begin, end)

用法：
begin 為開始的索引值，負數代表從後面開始算起，-1為倒數第一個元素。
end 為結束的索引值，沒有填寫時則得到arr中的所有元素。
因為是做shallow copy，所以原值不改變。

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var fruit1 = fruits.slice(1);
var fruit2 = fruits.slice(1, 3);
var fruit3 = fruits.slice(-3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// fruit1 contains ['Orange', 'Lemon', 'Apple', 'Mango']
// fruit2 contains ['Orange', 'Lemon']
// fruit3 contains ["Lemon", "Apple", "Mango"]

splice()

從Array中添加/刪除項目，回傳被刪除的項目。

對象：
可操控Array

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)

用法：
start 增加/刪除項目的位置，負數代表從後方算起。
deleteCount 刪除的個數，如為0則不會刪除。
item… 添加的新項目。
會改變原值

var myFish1 = ['angel', 'clown', 'drum', 'sturgeon'];
var removed1 = myFish1.splice(2, 1, 'trumpet');

// myFish1 is ["angel", "clown", "trumpet", "sturgeon"]
// removed1 is ["drum"]

var myFish2 = ['angel', 'clown', 'drum', 'sturgeon'];
var removed2 = myFish2.splice(-2, 2, 'trumpet');

// myFish2 is ["angel", "clown", "trumpet"]
// removed2 is ["drum", "sturgeon"]

split()

分割字串成字串組

對象：
可操控String

stringObject.split(separator,howmany)

用法：
separator 字串符或正則表達式，從該參數指定的地方分割stringObject。
howmany 返回值的最大長度，超過該長度則不顯示。
不改變原值

var str="How are you ?"
var splits1 = str.split(" ");
var splits2 = str.split("");
var splits3 = str.split(" ",3);

//splits1 contains ["How", "are", "you", "?"]
//splits2 contains ["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "?"]
//splits3 contains ["How", "are", "you"]