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

2018 iT 邦幫忙鐵人賽

DAY 1

Modern Web

用30天深入Angular 5的世界系列第 1 篇

2018鐵人賽 angular typescript

Claire Chang

團隊XY - 動手不動口

2017-12-20 00:06:07

13584 瀏覽

分享至

這系列的文章為我在官網學習Angular 5時所紀錄下來的學習筆記。原文的原始教程都可在Angular的Docs看到。這三十天的筆記大綱預計分為新手教程、功能介紹、技術支援三個部份：

新手教程：一個最簡單的專案，用step by step的方式引導大家去做
功能介紹：一個個介紹Angular裡面各別的功能和特性
技術支援：涵蓋如何佈署、設定以及angular所使用的npm、typescript等的設定

本文同步發表於: Claire's BLOG

建立Angular

確認電腦已有安裝NodeJS(6.9.x以上版本)以及NPM(3.x.x以上版本)

然後安裝Angular CLI

npm install -g @angular/cli

創建專案

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的設定檔。