如何運行 Angular 項目 [分步說明]
已發表: 2020-09-21AngularJS 是任何全棧開發人員的必備工具。 它對於前端開發至關重要，因為它簡化了 HTML 指令的使用。 使用 Angular 開發 Web 應用程序變得更加容易。 因此，在本文中，我們將討論如何開始使用 Angular。 我們將討論如何安裝 Angular 以及如何運行 Angular 項目。
目錄
Angular CLI：簡介
如果你想處理 Angular 項目，你應該有 Angular CLI。 它是 Angular 的官方工具，用於處理 Angular 項目並對其進行初始化。 Angular CLI 減少了初始化過程中的許多麻煩。 如果您使用 Angular CLI，則不必執行多個配置和構建工具來啟動項目。
Angular CLI 允許你只用一個命令來啟動一個項目。 使用另一個命令，您可以使用本地開發服務器為項目提供服務。 Angular CLI 適用於 Node.js。 因此，要在您的系統上運行 Angular CLI，您應該首先在系統中安裝 Node.js。
Node.js 用於服務器和開發服務器端應用程序，而 Angular 是前端解決方案。 Node.js 僅幫助您使用 Angular CLI。
如何安裝角？
第一步
在你的系統中安裝 Angular 之前，你的系統中應該有 Node 和 npm。 您可以使用 Node Version Manager 安裝它，也可以使用您操作系統的官方包管理器。 您還可以選擇從其網站安裝 Node。 我們建議從網站安裝它，因為它既快速又簡單。 你只需要前往node.js 的下載頁面。
第二步
進入 node.js 的下載頁面後，根據您的操作系統選擇您需要的版本，然後按照安裝嚮導中指定的步驟進行操作。 如果您之前已經在系統中安裝了 node.js，則可以跳過這一步（和上一步）。
第三步：
要檢查您的設備中是否安裝了 Node，請打開命令提示符並運行以下命令：
$節點-v
它將顯示系統中當前安裝的 Node 版本。
第三步
檢查您的系統中是否安裝了 Node 後，您可以通過運行命令提示符的以下命令在您的設備中安裝 Angular：
$ npm install @angular/cli
運行上述命令後，Angular CLI 將安裝在您的設備中。 您已經完成了“如何安裝 Angular”部分。
學習：印度的 Angular 開發人員薪水：適合新手和有經驗的人
如何運行 Angular 項目？
由於我們已經在我們的系統中安裝了 Angular，我們現在將專注於啟動一個新項目。
第一步
我們將通過運行以下命令創建一個工作區和啟動應用程序：
ng new angular-tour-of-heres
我們添加了 angular-tour-of-heroes 作為我們工作區的名稱。 “ng new”命令將提示您要在入門應用程序中添加的功能。 由於這是一個教程，我們將選擇默認值並按 Return 或 Enter 繼續。
第二步
現在，Angular CLI 已經安裝了所需的 npm 包和依賴項。 您已經準備好使用“歡迎應用程序”和一個新的工作區。 您還將有一個與應用程序同名的根文件夾（angular-tour-of-heroes）和一個骨架應用程序項目。
在這一步中，我們必須為應用程序提供服務。 我們將通過前往工作區目錄並啟動應用程序來做到這一點：
cd 英雄之旅
ng服務-打開
'ng serve' 命令將創建應用程序、啟動開發服務器、查看項目的源文件，並在修改必要文件時重新構建應用程序。
第三步
如果要修改應用程序，則必須前往 IDE 或編輯器中的 src/app 文件夾。 我們將通過更改此項目的組件來編輯我們的應用程序。 組件是 Angular 應用程序的構建塊。 它們處理 Angular 項目的幾乎所有基本功能，例如顯示數據、響應輸入等。
在這一步中，打開您的 IDE 並前往項目目錄並找到您的項目的組件文件：
- app.component.ts
- app.component.html
- app.component.css
第一個文件是基於 TypeScript 的類代碼，第二個文件是 HTML 中的模板，最後一個具有私有 CSS 樣式。
第四步
我們的項目已經建立，所有文件都準備好了。 在這一步中，我們將通過為其添加標題來對其進行個性化設置。 要更改您的 Angular 項目標題，請轉到 app.component.ts 文件並刪除存在的默認模板。 Angular CLI 會自動生成一個生成模板。 您可以將其替換為以下內容：
<h1>{{你的標題}}</h1>
花括號是插值綁定語法。 您可以將“您的標題”替換為您想要的標題。 輸入所需的標題後，刷新瀏覽器，您的應用程序將具有新標題。
第五步
如果沒有任何樣式，應用程序的個性化將是不完整的。 因此，在這一步中，我們將修改 Angular 應用程序的樣式。 當你創建一個新項目時，Angular CLI 會為你的應用程序生成一個空的 styles.css。 您可以在此處輸入您想要的樣式。
在 IDE 中打開 src/styles.css 文件並開始修改應用程序的樣式。 修改應用程序的樣式並保存更改。 刷新瀏覽器時，您會在應用中看到更改。
結帳：如何在 Angular JS 中實現分頁？
了解有關 Angular 和全棧開發的更多信息
現在您知道瞭如何在系統中安裝 Angular 以及如何運行 Angular 項目。 一旦你掌握了它的竅門，你就會發現使用 Angular 比你想像的要容易得多。 有了一點經驗，您就可以開始使用 Angular 進行前端 Web 開發項目。
如果您有興趣了解有關 Angular 和前端 Web 開發的更多信息，那麼這裡有一些額外的資源：
- 前端開發人員簡歷指南
- 成為前端開發人員的 10 大技能
- 前端項目思路
另一方面，您可以參加全棧開發課程，並通過視頻、項目和測驗向行業專家學習。
如果您有興趣了解有關全棧軟件開發的更多信息，請查看 upGrad 和 IIIT-B 的全棧軟件開發 PG 文憑，該文憑專為在職專業人士設計，提供 500 多個小時的嚴格培訓、9 個以上的項目和作業, IIIT-B 校友身份，實用的實踐頂點項目和頂級公司的工作協助。