Mobile Angular UI - Projekteinrichtung

Dieses Kapitel befasst sich mit dem Projekt-Setup. Wir werden dieses Setup verwenden, um mit Beispielen in den restlichen Kapiteln zu arbeiten.

Die Projekteinrichtung erfolgt mit npm, da alle erforderlichen Pakete einfach installiert werden können.

Öffnen Sie Ihre Eingabeaufforderung, erstellen Sie ein Verzeichnis mit dem Namen uiformobile / und geben Sie das Verzeichnis mit dem Befehl cd ein.

Führen Sie nun den folgenden Befehl aus:

npm init

Der Befehl npm init initialisiert das Projekt -

Es wird package.json wie unten gezeigt erstellen -

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

Führen Sie nun den folgenden Befehl aus, um die mobile Winkel-Benutzeroberfläche zu installieren.

npm install --save mobile-angular-ui

Um mit Mobile Angular UI arbeiten zu können, benötigen wir AngularJS. Lassen Sie uns das mit dem folgenden Befehl installieren -

npm install --save-dev angular

Wir brauchen auch die Winkelroute, um mit dem Routing arbeiten zu können. Um es zu installieren, lautet der Befehl -

npm install --save-dev angular-route

Wir benötigen einen Server, auf dem unsere App im Browser ausgeführt wird. Wir werden Express verwenden.

Der Befehl zum Installieren von Express lautet -

npm install --save-dev express

Erstellen Sie eine Datei server.js im Stammordner. Diese Datei enthält den Befehl express zum Starten des Servers.

Hier sind die Details von 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}!'))

Verwenden Sie den folgenden Befehl, um den Server zu starten:

node server.js.

Der Server startet an Port 3000. Sie können verwenden http://localhost:3000/ um die Benutzeroberfläche in Ihrem Browser zu sehen.

Die endgültige Ordnerstruktur ist wie folgt:

Im Ordner node_modules / sind alle Pakete für mobile_angular_ui, anglejs und angle-route installiert.

Das src/Der Ordner enthält die für die Entwicklung der Benutzeroberfläche erforderlichen HTML- und JS-Dateien. Die index.html ist der Startpunkt, der angezeigt wird, wenn Sie drückenhttp://localhost:3000/.

Jetzt sind die erforderlichen Pakete installiert. Lassen Sie uns nun über die wichtigen CSS- und JS-Dateien sprechen, die wir benötigen. Obwohl das Framework für mobile Anwendungen gedacht ist, kann es auch für Desktop-Apps verwendet werden.

Im Folgenden sind die wichtigen CSS-Dateien aufgeführt, die in Ihren HTML-Dateien enthalten sein müssen.

Sr.Nr.	Dateibeschreibung
1	mobile-angular-ui-base.css Diese CSS-Datei ist für mobile Geräte und Tablets gedacht.
2	mobile-angular-ui-desktop.css Responsive CSS-Datei zur Verwendung auf Desktop- und Mobilgeräten.
3	mobile-angular-ui-hover.css Dies hat CSS-Regeln für Hover.
4	angular.min.js AngularJS-Datei, die wir benötigen, um mit dem Projekt zu beginnen.
5	mobile-angular-ui.min.js Dies ist die mobile Angular UI JS-Datei, die wir im Abhängigkeitsmodul im AngularJS-Modul verwenden müssen. Dies ist das Kernmodul.
6	angular-route.min.js Dies ist eine AngularJS-Routendatei, die für das Routing verwendet wird.

Alle oben genannten Dateien sind im Inneren vorhanden node_modules/. Wir sind mit dem Projekt-Setup fertig. Jetzt werden wir dieses Projekt im nächsten Kapitel nutzen, um unsere erste App zu entwickeln.