Mobile Angular UI - Konfiguracja projektu

W tym rozdziale zajmiemy się konfiguracją projektu. Zamierzamy wykorzystać tę konfigurację do pracy z przykładami w pozostałych rozdziałach.

Konfiguracja projektu zostanie przeprowadzona za pomocą npm, ponieważ łatwo jest zainstalować wymagane pakiety.

Otwórz wiersz poleceń i utwórz katalog o nazwie uiformobile / i wejdź do katalogu za pomocą polecenia cd.

Teraz wykonaj następujące polecenie -

npm init

Polecenie npm init zainicjuje proect -

Utworzy plik package.json, jak pokazano poniżej -

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

Teraz uruchom następujące polecenie, aby zainstalować mobilny kątowy interfejs użytkownika.

npm install --save mobile-angular-ui

Do pracy z Mobile Angular UI potrzebujemy AngularJS. Zainstalujmy to za pomocą następującego polecenia -

npm install --save-dev angular

Potrzebujemy również trasy kątowej do pracy z trasowaniem. Aby go zainstalować, polecenie brzmi -

npm install --save-dev angular-route

Potrzebowalibyśmy serwera, który będzie uruchamiał naszą aplikację w przeglądarce. Skorzystamy z ekspresu.

Polecenie instalacji Express to -

npm install --save-dev express

Utwórz plik server.js w folderze głównym. Ten plik będzie zawierał polecenie ekspresowe do uruchomienia serwera.

Oto szczegóły 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}!'))

Aby uruchomić serwer, użyj następującego polecenia -

node server.js.

Serwer wystartuje na porcie 3000. Możesz skorzystać z http://localhost:3000/ aby zobaczyć interfejs użytkownika w przeglądarce.

Ostateczna struktura folderów jest taka, jak pokazano poniżej -

W folderze node_modules / są zainstalowane wszystkie pakiety dla mobile_angular_ui, angularjs i angular-route.

Plik src/folder będzie zawierał pliki HTML i js wymagane do tworzenia interfejsu użytkownika. Index.html to punkt początkowy, który będzie widoczny po trafieniuhttp://localhost:3000/.

Teraz wymagane pakiety są zainstalowane. Porozmawiajmy teraz o ważnych plikach css i js, których potrzebujemy. Chociaż framework jest przeznaczony dla aplikacji mobilnych, może być również używany do aplikacji komputerowych.

Poniżej przedstawiono ważne pliki css, które muszą być dołączone do plików .html.

Sr.No	Opis pliku
1	mobile-angular-ui-base.css Ten plik css jest przeznaczony dla urządzeń mobilnych i tabletów.
2	mobile-angular-ui-desktop.css Responsywny plik css przeznaczony do użytku na komputerach stacjonarnych i urządzeniach mobilnych.
3	mobile-angular-ui-hover.css To ma reguły css dla najechania.
4	angular.min.js Plik AngularJS, którego potrzebujemy, aby rozpocząć projekt.
5	mobile-angular-ui.min.js To jest plik js mobilnego kątowego interfejsu użytkownika, którego potrzebujemy w module zależności w module AngularJS. To jest podstawowy moduł.
6	angular-route.min.js To jest plik trasy AngularJS używany do routingu.

Wszystkie powyższe pliki znajdują się w środku node_modules/. Skończyliśmy konfigurację projektu, teraz zamierzamy wykorzystać ten projekt w następnym rozdziale, aby opracować naszą pierwszą aplikację.