快訊!我的新書登上天瓏網路書店11月份暢銷榜第一名啦!看過的都說讚!歡迎大家前往訂購!
>>>> AI 職場超神助手:ChatGPT 與生成式 AI 一鍵搞定工作難題 <<<<

[新手教程-1] 建立一個Angular5的專案

這系列的文章為我在官網學習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的設定檔。

17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。

如果你認同我或想支持我的努力,歡迎請我喝一杯咖啡!讓我更有動力分享知識!