這系列的文章為我在官網學習Angular 5時所紀錄下來的學習筆記。
原文的原始教程都可在Angular的Docs看到。
這三十天的筆記大綱預計分為新手教程、功能介紹、技術支援三個部份：
- 新手教程：一個最簡單的專案，用step by step的方式引導大家去做
- 功能介紹：一個個介紹Angular裡面各別的功能和特性
- 技術支援：涵蓋如何佈署、設定以及angular所使用的npm、typescript等的設定
建立專案
確認電腦已有安裝NodeJS(6.9.x以上版本)以及NPM(3.x.x以上版本)
創建專案
ng new my-app
開啟專案
cd my-app ng serve --open
編輯第一個自己的頁面
打開src/app/app.component.ts，改為
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = '我的第一個網頁';
}
打開src/app/app.component.html，將內容改為
這是 {{title}}!
src資料夾內的檔案架構
| 檔案 | 目的 |
|---|---|
app/app.component. {ts,html,css,spec.ts} |
所有的 Componet、Service、Pipe、Unit test 等等..程式碼都是放在這個資料夾，而 app.component 則是 Angular CLI 預設建立的 root component |
app/app.module.ts |
預設的 root module ， 告訴 Angular 有哪些 Components 、Modules、 Services，讓 Angular 知道如何 assemble the application |
assets/* |
放圖片或者是建立 application 需要用的到材料 |
environments/* |
設定 Angular 程式碼會用到的參數，很像 Web.config 的東西。 預設為 environment.ts ， 要產生不同的 environment 的話，參考命名規則為 environment.xxx.ts，在執行或者 build Angular application 的時候加入 xxx 的參數，則可以指定到該 environmnet ，例如 : ng build -xxx、 ng serve -xxx |
favicon.ico |
網頁頁籤的 icon |
index.html |
網頁進入點，當使用者拜訪網站的時候，是執行到這個頁面。 在大部分的情況，是不需用編輯的， Angular CLI 在 build application 的時候會自動加入 js 和 css |
main.ts |
若使用JIT，這個文件為JIT compiler和bootstraps的root module，也就是編譯的起始點。也可以用ng serve –aot，改為AOT編譯而不用修改任何的code |
polyfills.ts |
因為不同的瀏覽器會支援不同的 web standards， polyfills 就像補丁的概念，補足些沒有支援的部分。Browser Support guide for more information. |
styles.css |
放置 global styles 的 CSS |
test.ts |
unit tests 的進入點，有些 unit tests 的設定也寫在這邊 |
tsconfig.{app|spec}.json |
TypeScript 編譯設定檔(tsconfig.app.json) and for the unit tests (tsconfig.spec.json). |
根目錄資料夾檔案列表
| 檔案 | 目的 |
|---|---|
e2e/ |
負責放 End-to-End 測試程式碼的資料夾 |
node_modules/ |
Node.js 建立的資料夾，負責放 third party modules 的資料夾，其 thrid party modules 清單則放在 package.json裡面 |
.angular-cli.json |
放 Angular CLI 的設定檔 Angular CLI Config Schema |
.editorconfig |
幫助開發者使用不同的 IDEs 保持檔案格式一致性的設定檔。更多資訊請見此 |
.gitignore |
Git 的設定檔，讓指定檔案不會 commit 到 Source control |
karma.conf.js |
Karma test 的 unit tests 設定 |
package.json |
npm 設定檔， third party 清單與版本資訊 |
protractor.conf.js |
Angular end-to-end test framework Protractor 設定檔 |
README.md |
專案基本說明文件 |
tsconfig.json |
TypeScript 編譯器設定檔案 |
tslint.json |
Codelyzer（用以保持code style的一致性）和TSLint的設定檔。 |
