Skip to content

coolrare/sunnet-ng-14-adv

Repository files navigation

Angular 14 開發實戰:進階開發篇 實作練習專案

本次 Angular 14 開發實戰:進階開發篇 課程,將會從這份套完版後的 Angular 專案開始。開發環境請參考 Angular 14 開發環境說明 進行設定。

如果想複習基礎的套版過程,我有錄製一段教學影片請到 練習套版過程 閱讀相關資訊。

準備練習實作環境

你可以透過兩種方式取得範例專案:

  1. 點擊右側的 Releases 下載 Source code (zip) 回去解壓縮。

  2. 透過 Git 將本專案 Fork 回個人的 GitHub 帳號下,再透過 git clone 複製專案回去。

    git clone https://github.com/[YourGitHubID]/sunnet-ng-14-adv.git
    cd sunnet-ng-14-adv

取得專案後請依據已下步驟設定:

  1. 安裝 npm 套件

    npm install
  2. 開啟 Visual Studio Code 編輯器

    code .
  3. 啟動專案並開啟瀏覽器

    npm start

練習套版過程

  1. 點擊右側的 Releases 下載 startbootstrap-sb-admin-2-gh-pages.zip 回去解壓縮。

  2. 透過 ng new 命令建立 Angular 專案

  3. 參考 示範 SB Admin 2 靜態網頁版型轉成 Angular 應用程式的過程 影片進行套版!

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.