手機版
你好,游客 登錄 注冊
背景:
閱讀新聞

在Ubuntu 18.04上安裝Angular圖文詳解

[日期:2019-04-07] 來源:Linux公社  作者:醉落紅塵 [字體: ]

在這篇文章中,我將向您展示如何在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權限登錄。

[email protected]:~/linuxidc.com$ sudo su -
[sudo] linuxidc 的密碼:

NPM用于安裝Angular。

首先,它有助于確保您已更新。

[email protected]:~# apt update

接下來我們可以安裝NodeJ。

[email protected]:~# apt install nodejs
正在讀取軟件包列表... 完成
正在分析軟件包的依賴關系樹     
正在讀取狀態信息... 完成 

然后安裝NPM。 

[email protected]:~# apt install npm

在Ubuntu 18.04上安裝Angular圖文詳解

查看版本:

[email protected]:~# npm --version
6.7.0

在Ubuntu 18.04上安裝Angular

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

[email protected]:~# npm install -g [email protected]

現在檢查版本。

[email protected]:~# npm --version
6.9.0

在Ubuntu 18.04上安裝Angular

現在我們可以安裝Angular了。

安裝Angular 7

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

[email protected]:~# npm install -g @angular/cli

在Ubuntu 18.04上安裝Angular

安裝完成后,檢查它是否安裝正確。

[email protected]:~# 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

在Ubuntu 18.04上安裝Angular

Angular CLI使用git來下載所需的模塊,因此我們需要確保配置了git。

如果尚未配置git用戶名和電子郵件,請運行以下命令來執行此操作。

[email protected]:~# git config --global user.email "[email protected]"
[email protected]:~# git config --global user.name "linuxidc"

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

創建一個新的Angular應用程序

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

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

從現在開始,您應該以普通用戶身份登錄。

[email protected]:~/linuxidc.com$ ng new linuxidc

在Ubuntu 18.04上安裝Angular

這將創建一個名為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                                            ]

在Ubuntu 18.04上安裝Angular

我們將選擇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/ **

打開瀏覽器并轉到此位置。

您將看到您的新應用程序。如下圖所示:

在Ubuntu 18.04上安裝Angular圖文詳解

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

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

總結

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

謝謝閱讀。

Linux公社的RSS地址http://www.vnrggh.live/rssFeed.aspx

本文永久更新鏈接地址http://www.vnrggh.live/Linux/2019-04/157972.htm

linux
本文評論   查看全部評論 (0)
表情: 表情 姓名: 字數

       

評論聲明
  • 尊重網上道德,遵守中華人民共和國的各項有關法律法規
  • 承擔一切因您的行為而直接或間接導致的民事或刑事法律責任
  • 本站管理人員有權保留或刪除其管轄留言中的任意內容
  • 本站有權在網站內轉載或引用您的評論
  • 參與本評論即表明您已經閱讀并接受上述條款
彩票平台