自學筆記

Angular 2 快速上手

 

• New Feature（ 新特徵 ）
• 效能更好
• 跨平台 (worker,server,ionic)
• Mobile (Android 4.1 , iOS 7.1 , ie9+)
• Flexible ( TypeScript/ES6,ES5 ,dart )
• ng2將helloworld負載減少到<10KB
• 比起angular1性能提升啟動時間加快，跨平台可支持服務端渲染。

---

參考此連結：

 

https://angular.io/docs/ts/latest/quickstart.html

1. 首先要學習到什麼：
2. 開發環境
3. Angular2應用的根元件。
4. 告訴Angular2 如何表示跟組件的main.ts文件。
5. 編寫載入頁面 index.html

---

• 開發環境：

• Prerequisite: Node.js
• https://nodejs.org/en/download/
• Install 安裝node.js & npm

• 至少 node.js v4.x.x / npm 3.x.x 版本

 

• 創建文件夾
• TypeScript編譯器所需要tsconfig.json檔案
• 新增Typings.json 尋找無法找到的TypeScript文件
• 新增Package.json來定義所需的library與script
• 安裝npm 與 Typings 文件

---

Step 1:創建文件夾於桌面

 

如圖所示位置在：

/User/frances  

 

已知位置在”frances$”，因個人習慣將資料夾指定到某位置（demo 建立在桌面上）

名稱自訂（自定名稱為 angular_typescript）

輸入指令 cd 到桌面建立angular_typescript資料夾

---

---

• Linux指令

• pwd =====>（顯示目前的路徑）
• mkdir   ========> （建立新資料夾）
• cd ======> （指定到哪個資料夾）
• touch ==> （建立”檔案”）

---

新增 angular 執行檔案

 

package.json 

tsconfig.json

typings.json

systemjs.config.js

（此詳細內容參考官方網站）

---

 

安裝  Install packages 

終端機輸入 

 

完成安裝後出現以下畫面

 

假如 typings 檔案不能npm install，請手動安裝。

安裝過程中可能出現紅色 error，但npm run typings install通常安裝後會成功。 

安裝完成後出現兩個檔案分別為

angular_typescript / node_modules / typings

---

 

Step 2： 新增 Angular component

新增了一個資料夾為app

 在app底下在新增兩個檔案，分別為：

 

---

Step 3：新增檔案 app/main.ts

Step 4：在 angular_typescript 新增index.html

 

加入 styles.css

---

Step : 6 

 

啟動 npm

Typescript 監控模式，一個為精簡版服務器 另一個則是靜態服務器加載在瀏覽器中的index.html，並刷新應用程式更改瀏覽器內容。