Mobile Angular UI - 專案設定

---

---

本章將介紹專案設定。我們將使用此設定在後續章節中學習示例。

專案設定將使用 npm 完成，因為它易於安裝任何所需的包。

開啟命令提示符並建立一個名為 uiformobile/ 的目錄，然後使用 cd 命令進入該目錄。

現在執行以下命令：

npm init

命令 npm init 將初始化專案：

它將建立 package.json，如下所示：

{
   "name": "uiformobile",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
}

現在執行以下命令來安裝 Mobile Angular UI。

npm install --save mobile-angular-ui

要使用 Mobile Angular UI，我們需要 AngularJS。讓我們使用以下命令安裝它：

npm install --save-dev angular

我們還需要 angular-route 來進行路由。安裝它的命令是：

npm install --save-dev angular-route

我們需要一個伺服器在瀏覽器中執行我們的應用程式。我們將使用 express。

安裝 express 的命令是：

npm install --save-dev express

在根資料夾中建立一個檔案 server.js。此檔案將包含啟動伺服器的 express 命令。

以下是 server.js 的詳細資訊：

const express=require('express')
const app=express();
const port=3000;
var path=require("path");
app.use("/node_modules", express.static("D:/uiformobile/node_modules"));
app.use("/src", express.static("D:/uiformobile/src/"));
app.use("/src/js", express.static("D:/uiformobile/src/js"));
app.all("/*", function (req, res, next) {
   res.sendFile("index.html", { root: "D:/uiformobile/" });
});
app.listen(port, () => console.log('Starting your Mobile Angular App on port ${port}!'))

要啟動伺服器，請使用以下命令：

node server.js.

伺服器將在 3000 埠啟動。您可以使用 **https://:3000/** 在瀏覽器中檢視 UI。

最終的資料夾結構如下所示：

node_modules/ 資料夾包含為 mobile_angular_ui、angularjs 和 angular-route 安裝的所有包。

**src/** 資料夾將包含 UI 開發所需的 HTML 和 js 檔案。index.html 是啟動點，當您訪問 **https://:3000/** 時將會看到它。

現在所需的包已安裝。現在讓我們討論一下我們需要的重要 css 和 js 檔案。儘管該框架適用於移動應用程式，但它也可以用於桌面應用程式。

以下是必須包含在您的 .html 檔案中的重要 css 檔案。

所有上述檔案都位於 **node_modules/** 中。我們完成了專案設定，現在將在下一章中使用此專案來開發我們的第一個應用程式。