Posted on by — Leave a comment

[新手教程-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的設定檔。
Leave a Reply