Ubuntu 15.04下Angular 2的安裝與使用

2020-06-16 17:13:50

Ubuntu 15.04下Angular 2安裝前準備

安裝依賴（g++、libssl-dev）

在安裝node.js之前，如果沒有安裝g++和libssl-dev的，按照以下步驟安裝：

sudo apt-get install g++ 
sudo apt-get install

安裝nodejs

較舊的版本會產生錯誤，但較新版本正常。

接下來就是安裝node.js了：

mkdir tools 
cd tools/ 
wget https://nodejs.org/dist/v7.10.0/node-v7.10.0-linux-x64.tar.xz 
tar xvf node-v7.10.0-linux-x64.tar.xz 
cd node-v7.10.0-linux-x64/

新增軟連線

sudo ln -s /home/solin/tools/node-v7.10.0-linux-x64/bin/node /usr/local/bin/node
sudo ln -s /home/solin/tools/node-v7.10.0-linux-x64/bin/npm /usr/local/bin/npm

這樣就安裝好了，可以在終端檢視版本號：

node -v
npm -v

安裝Angular

node.js 和 npm 都安裝好後可以安裝angular2了，按照官網給的步驟：

npm install -g @angular/cli

建立連結

sudo ln -s /home/solin/tools/node-v7.10.0-linux-x64/bin/ng /usr/local/bin/ng

檢視Angular 2版本

ng -v

檢視是否安裝成功

註：如果如果之前已存在

npm uninstall -g angular-cli  
npm cache clean  
npm install -g angular-cli@latest

Angular簡單使用

建立一個新專案

開啟終端視窗。

通過執行以下命令生成一個新的專案和框架應用程式：

ng new my-app

請耐心設定新專案需要時間，大部分時間用於安裝npm軟體包。

啟動服務

轉到專案目錄並啟動伺服器。

cd my-app

ng serve --open

ng serve當您對這些檔案進行更改時，該命令啟動伺服器，監視您的檔案，並重新構建應用程式。

使用--open（或只-o）選項將自動開啟您的瀏覽器http://localhost:4200/。

您的應用程式向您傳送訊息：

編輯您的第一個Angular元件

Angular CLI為您建立了第一個Angular元件。這是根元件，它被命名app-root。你可在./src/app/app.component.ts找到它。

開啟元件檔案並更改title屬性app works!為My First Angular App：

# src/app/app.component.ts 
exportclassAppComponent { 
  title = 'My First Angular App'; 
}

瀏覽器會自動重新載入修訂的標題。

優化元件

開啟src/app/app.component.css並給元件一些風格。

# src/app/app.component.css 
h1 { 
  color: #369; 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 250%; 
}

本文永久更新連結地址：http://www.linuxidc.com/Linux/2017-05/144268.htm