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://127.0.0.1:3000/** 在浏览器中查看 UI。

最终的文件夹结构如下所示：

node_modules/ 文件夹包含为 mobile_angular_ui、angularjs 和 angular-route 安装的所有包。

**src/** 文件夹将包含 UI 开发所需的 HTML 和 js 文件。index.html 是启动点，当您访问 **https://127.0.0.1:3000/** 时将会看到它。

现在所需的包已安装。现在让我们讨论一下我们需要的重要 css 和 js 文件。尽管该框架适用于移动应用程序，但它也可以用于桌面应用程序。

以下是必须包含在您的 .html 文件中的重要 css 文件。

所有上述文件都位于 **node_modules/** 中。我们完成了项目设置，现在将在下一章中使用此项目来开发我们的第一个应用程序。