在Ubuntu 18.04上安裝Angular圖文詳解

在這篇文章中，我將向您展示如何在Ubuntu 18.04上安裝Angular。 Angular是一個用於製作令人敬畏的網站的前端Web開發框架。

這篇文章是一系列Angular文章中的第一篇，旨在幫助您開始在Angular 7中建立網站。

我們將首先學習如何在Ubuntu 18.04上安裝Angular 7。

接下來，我們將使用Angular CLI建立一個基本應用程式。

Angular應用程式基於Typescript。 Typescript基於Javascript，但有許多改進。

首先，它是強型別的。 這有助於減輕執行時錯誤，您認為變數是一種型別但實際上是另一種型別。

其次，Typescript使用類和物件使程式碼更具可讀性。

Typescript轉換為普通的Javascript，因此您的應用程式可以在任何瀏覽器中執行。

如果您想在他們的網站上了解有關Typescript的更多資訊，請在5分鐘內了解Typescript。

安裝NodeJs和NPM

要在Ubuntu 18.04上安裝Angular，我們首先需要安裝NodeJ和Node Package Manager（NPM）。

本文假設您使用root許可權登入。

linuxidc@linuxidc:~/linuxidc.com$ sudo su -
[sudo] linuxidc 的密碼：

NPM用於安裝Angular。

首先，它有助於確保您已更新。

root@linuxidc:~# apt update

接下來我們可以安裝NodeJ。

root@linuxidc:~# apt install nodejs
正在讀取軟體包列表... 完成
正在分析軟體包的依賴關係樹     
正在讀取狀態資訊... 完成 

然後安裝NPM。 

root@linuxidc:~# apt install npm

檢視版本：

root@linuxidc:~# npm --version
6.7.0

我們現在需要使用NPM將自己更新到最新版本。

root@linuxidc:~# npm install -g npm@latest

現在檢查版本。

root@linuxidc:~# npm --version
6.9.0

現在我們可以安裝Angular了。

安裝Angular 7

我們現在將使用NPM安裝Angular CLI。

root@linuxidc:~# npm install -g @angular/cli

安裝完成後，檢查它是否安裝正確。

root@linuxidc:~# ng --version

    _                      _                ____ _    ___
    /   _ __  __ _ _  _| | __ _ _ __    / ___| |  |_ _|
  / △ | '_ / _` | | | | |/ _` | '__|  | |  | |    | |
  / ___ | | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/  __| |_|__, |__,_|_|__,_|_|      ____|_____|___|
                |___/
   

Angular CLI: 7.3.8
Node: 11.10.0
OS: linux x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.13.8
@angular-devkit/core        7.3.8
@angular-devkit/schematics  7.3.8
@schematics/angular          7.3.8
@schematics/update          0.13.8
rxjs                        6.3.3
typescript                  3.2.4

Angular CLI使用git來下載所需的模組，因此我們需要確保設定了git。

如果尚未設定git使用者名稱和電子郵件，請執行以下命令來執行此操作。

root@linuxidc:~# git config --global user.email "linux@linuxidc.com"
root@linuxidc:~# git config --global user.name "linuxidc"

我們現在可以建立您的第一個Angularjs應用程式

建立一個新的Angular應用程式

現在我們安裝了Angular，我們可以為新應用程式建立一個基本的腳手架。

我們將使用新安裝的Angular CLI來完成此任務。

從現在開始，您應該以普通使用者身份登入。

linuxidc@linuxidc:~/linuxidc.com$ ng new linuxidc

這將建立一個名為linuxidc的新應用程式。

該命令會問你幾個問題。

第一個問題詢問您是否要使用Angular路由。

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? (Use arrow keys)
? CSS
  SCSS  [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ]
  Sass  [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html      ]
  Less  [ http://lesscss.org                                                ]
  Stylus [ http://stylus-lang.com                                            ]

我們將選擇CSS（預設值），所以只需按Enter鍵即可。

安裝過程將開始下拉所需的Angular模組，並為我們的新應用程式建立目錄結構

執行我們的申請

首先更改為我們的應用程式的新建立的目錄。

cd linuxidc

我們可以使用NPM命令輕鬆執行我們的應用程式。

npm start

這將構建我們的應用程式並啟動開發http伺服器並為我們的應用程式服務。

您將在輸出中看到一個連結，告訴您如何檢視您的應用程式。

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

開啟瀏覽器並轉到此位置。

您將看到您的新應用程式。如下圖所示：

這只建立了一個非常基本的Angular應用程式框架。

在本系列的下幾篇文章中，我們將了解它所創造的內容。

總結

我希望你喜歡這篇文章。並在下面留下評論並分享到微信朋友圈，微博等社交媒體。

謝謝閱讀。