Мобильный пользовательский интерфейс Angular - Настройка проекта

В этой главе мы поговорим о настройке проекта. Мы собираемся использовать эту установку для работы с примерами в остальных главах.

Настройка проекта будет производиться с помощью 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"
}

Теперь выполните следующую команду, чтобы установить мобильный 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

Нам понадобится сервер, который будет запускать наше приложение в браузере. Мы будем использовать экспресс.

Команда для установки экспресса -

npm install --save-dev express

Создайте внутри корневой папки файл server.js. Этот файл будет содержать экспресс-команду для запуска сервера.

Вот детали 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. Вы можете использовать http://localhost:3000/ чтобы увидеть пользовательский интерфейс в вашем браузере.

Окончательная структура папок показана ниже -

В папке node_modules / установлены все пакеты для mobile_angular_ui, angularjs и angular-route.

В src/В папке будут находиться файлы HTML и js, необходимые для разработки пользовательского интерфейса. Index.html - это начальная точка, которая будет видна, когда вы нажметеhttp://localhost:3000/.

Теперь необходимые пакеты установлены. Давайте теперь поговорим о важных файлах css и js, которые нам нужны. Хотя фреймворк предназначен для мобильных приложений, его также можно использовать для настольных приложений.

Ниже приведены важные файлы css, которые обязательно должны быть включены в ваши файлы .html.

Старший Нет	Описание файла
1	mobile-angular-ui-base.css Этот файл css предназначен для мобильных устройств и планшетов.
2	mobile-angular-ui-desktop.css Адаптивный файл css, предназначенный для использования на настольных и мобильных устройствах.
3	mobile-angular-ui-hover.css Здесь есть правила CSS для зависания.
4	angular.min.js AngularJS файл, который нам нужен для начала работы над проектом.
5	mobile-angular-ui.min.js Это js-файл мобильного angular UI, который нам нужно использовать в модуле зависимостей в модуле AngularJS. Это основной модуль.
6	angular-route.min.js Это файл маршрута AngularJS, используемый для маршрутизации.

Все вышеперечисленные файлы находятся внутри node_modules/. Мы закончили с настройкой проекта, теперь мы собираемся использовать этот проект в следующей главе для разработки нашего первого приложения.