###### tags: `Guide` `Git` `npm` `Angular`
# 🌝Angular基礎教學01 #基礎語法與工具使用介紹
## 內容大綱
**主要內容如下:**
1. 如何下載專案
2. 如何執行專案
3. 如何修改專案

**開發前需準備:**
[🌝Angular基礎教學00 #環境安裝](https://hackmd.io/@Ru/BkH2l834v)
| 工具 | 說明 |
| -------- | -------- |
| [VSCode](https://code.visualstudio.com/)| 用於開發的文字編輯器，安裝完後還需要安裝其他擴充套件。|
| [Git](https://git-scm.com/downloads)| 版本控制。|
| [Node.js](https://nodejs.org/en/)|使用npm命令必要的函式庫。|

**官網相關事項:**
[A1官網](https://hackmd.io/XdsQiHvrTC2mTU0Yj0HLbQ)
[A1工具人](https://chrome.google.com/webstore/detail/a1%E5%B7%A5%E5%85%B7%E4%BA%BA/mlfkmmfpdbbapenelagipdglfkpnpalh)

## Git
[Git概念、常用語法](https://hackmd.io/@Ru/SJMOfeCGw)
[Git Downloads](https://git-scm.com/downloads)
### Git介紹
Git 是一種==分散式版本的版本控制系統(Version Control System)==，它可以快速又有效率的管理專案，並提供各種作業系統平台版本，==免費==自由下載使用，建立個人或團隊的版本控制，可以==協助開發人員同步開發==。
### Git使用
#### *step1.* 新增資料夾
- 在桌面新增資料夾

#### *step2.* 複製網址
- [A1OfficialWeb版控](https://digiwina1.visualstudio.com/A1OfficialWeb)

#### *step3.* git clone
- 用`vsCode`開啟step1.新增的資料夾
- 在CLI輸入`git clone + 網址`
- ```
git clone https://digiwina1.visualstudio.com/A1OfficialWeb/_git/A1OfficialWeb

   ![](https://i.imgur.com/Ey7Z9R9.png)

#### *step4.* 切換分支 ==!!非常重要==
 - `VSCode`左下角點擊後，上方會跳出分支。
 -  分支
    - develop: 正常開發時使用。
    - hotfix: develop在開發時，但有急件時使用。
    - release: 發布時使用。

---

## npm、Node.js
[🌝[T]npm腳本](https://hackmd.io/@Ru/HJpjOH-sH)
[Node.js Download for Windows (x64)](https://nodejs.org/en/)
### npm、Node.js介紹
下載`Node.js`時會自帶`npm`，開發者可以透過`npm cli`，進行套件的安裝及管理，簡單說就是 ==`npm`是`Node.js`的模組管理工具==。
> npm，Node Package Manager的簡稱，是個線上套件庫，可以下載各式各樣的Javascript套件使用

### npm使用
#### *step1.* npm install 
 - clone後第一次要run使用即可。
 - 開發者可以透過專案中的`package.json`，羅列出專案需要哪些套件，npm 便會自動依照`package.json`的內容下載套件。
`npm install`完後，下載的套件會在`node_module`資料夾之中
 ![](https://i.imgur.com/lDZx70Q.png)

#### *step2.* npm run start/npm run start_
 - 在CLI輸入`npm run start_`後，就可以在瀏覽器開啟專案。
   >npm run [script] 會執行`package.json`內script寫好的命令。
   
   ![](https://i.imgur.com/1iaV3R0.png)
   
 - 網址要手動修改

線上訂購 /buy/order
http://localhost:4200/#/buy/order

會員中心 /member/memberCenter
http://localhost:4200/#/member/memberCenter

   ![](https://i.imgur.com/IFvE1IS.png =300x) ![](https://i.imgur.com/YUa4wSw.png =300x)

### 補充
#### *1.* Angular CLI (Angular Command-Line-Interface)，`ng`
 - Angular CLI，是Angular2發展的指令列工具，可以快速產生開發程式時需要的檔案範本。
 - 需透過npm安裝

npm install -g @angular/cli

 - 新增Angular專案

ng new my-dream-app

 - 新增完要記得到專案底下

cd my-dream-app

 - 執行

ng serve

---

## Angular
![](https://i.imgur.com/oSbZeBP.png)
### Angular介紹

Angular是一個基於TypeScript的開源Web應用框架，由Google的Angular團隊以及社群共同領導。
> * Angular通常是指Angular2+的說法
> * AngularJS跟Angular2+是不一樣的東西

### Angular使用
這邊主要介紹的是`typescript`及`html`一些基本的語法，並沒有`ng`的功能。

#### *TypeScript.*
 - 強行別
   - 跟JavaScript(弱型別)最大的不同
   - 會幫忙檢查給的型別對不對
 - Typeof
   - Number

const rb1 = 0;

   - String

const rb1 = '0';

   - Boolean

const rb1 = true; // true || false

   - Array

const rb1: Array<any> = [];
const rb2: any[] = [];

 - Function

test() {
console.log('ruby');
}

 - if、for

const rb1 = true;
if (rb1) {
console.log('ruby true');
} else {
console.log('ruby false');
}

if (rb1 === true) {
console.log('ruby true');
} else if (rb1 === false) {
console.log('ruby false');
}

 - `=` `==` `===` 差異
   - `=`: rb1 = 1 ==> rb1會是1
   - `==`: 1 == '1' ==> true
   - `===`: 1 === '1' ==> false

#### *HTML.*
 - 標記語言（markup language）
 - 資料繫結
   - 屬性繫結: {{屬性名稱}}
     .ts

title = '雲端進銷存';

     .html 

<div>{{title}}</div>

   - 內嵌繫結: [html 屬性名稱] = "屬性名稱"
     .ts

isHidden = true;

     .html

<div [hidden]=isHidden></div>

   - 雙向繫結: [(ngModel)] = "屬性名稱"
     .ts

modelValue = '';

     .html

<input [(ngModel)]="modelValue">

   - 事件繫結: (觸發事件)="處理函式"
     .ts

title = '雲端進銷存'
test() {
this.title = '雲端進銷存+';
}

     .html

<div (click)="test()">{{title}}</div>

### Angular實作
![](https://i.imgur.com/qOxYofU.png)

#### *Goal1.* 調整畫面
 - html練習
 - 套用class

#### *Goal2.* 參數資料
 - ts練習

#### *Goal3.* 更新程式
 - 推上版控`git push`
 - 程式發布 [A1teamWork](https://a1tws.azurewebsites.net/#/login)