/ng-advanced-220717

Angular 進階開發練功坊

Primary LanguageCSS

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

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

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

準備練習實作環境

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

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

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

    git clone https://github.com/[YourGitHubID]/ng-advanced-220717.git
cd ng-advanced-220717

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

  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.