Mobile Angular UI - การตั้งค่าโครงการ

บทนี้จะดำเนินการเกี่ยวกับการตั้งค่าโครงการ เราจะใช้ประโยชน์จากการตั้งค่านี้เพื่อทำงานกับตัวอย่างในบทที่เหลือ

การตั้งค่าโปรเจ็กต์จะทำโดยใช้ npm เนื่องจากง่ายต่อการติดตั้งแพ็คเกจที่ต้องการ

เปิดพรอมต์คำสั่งของคุณและสร้างไดเร็กทอรีชื่อ uiformobile / และเข้าสู่ไดเร็กทอรีโดยใช้คำสั่ง cd

ตอนนี้ดำเนินการคำสั่งต่อไปนี้ -

npm init

คำสั่ง npm init จะเริ่มต้น proect -

มันจะสร้าง package.json ดังภาพด้านล่าง -

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

ตอนนี้เรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้ง ui เชิงมุมมือถือ

npm install --save mobile-angular-ui

ในการทำงานกับ Mobile Angular UI เราต้องใช้ AngularJS ให้เราติดตั้งโดยใช้คำสั่งต่อไปนี้ -

npm install --save-dev angular

เรายังต้องการเส้นทางเชิงมุมเพื่อทำงานกับการกำหนดเส้นทาง ในการติดตั้งคำสั่งคือ -

npm install --save-dev angular-route

เราต้องการเซิร์ฟเวอร์ที่จะเรียกใช้แอปของเราในเบราว์เซอร์ เราจะใช้ประโยชน์จากการด่วน

คำสั่งในการติดตั้ง 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 คุณสามารถใช้ประโยชน์จากไฟล์ http://localhost:3000/ เพื่อดู UI ในเบราว์เซอร์ของคุณ

โครงสร้างโฟลเดอร์สุดท้ายดังแสดงด้านล่าง -

โฟลเดอร์ node_modules / มีแพ็กเกจทั้งหมดที่ติดตั้งสำหรับ mobile_angular_ui, angularjs และ angular-route

src/โฟลเดอร์จะมีไฟล์ HTML และ js ที่จำเป็นสำหรับการพัฒนา UI index.html คือจุดเริ่มต้นที่จะเห็นเมื่อคุณตีhttp://localhost:3000/.

ตอนนี้ติดตั้งแพ็คเกจที่จำเป็นแล้ว ตอนนี้ให้เราพูดถึงไฟล์ css และ js ที่สำคัญที่เราต้องการ แม้ว่าเฟรมเวิร์กจะมีไว้สำหรับแอปพลิเคชันมือถือ แต่ก็สามารถใช้สำหรับแอปเดสก์ท็อป

ต่อไปนี้เป็นไฟล์ css สำคัญที่จำเป็นต้องรวมไว้ในไฟล์. html ของคุณ

ซีเนียร์ No	ไฟล์และคำอธิบาย
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 UI เชิงมุมมือถือที่เราต้องใช้ในโมดูลการพึ่งพาในโมดูล AngularJS นี่คือโมดูลหลัก
6	angular-route.min.js นี่คือไฟล์เส้นทาง AngularJS ที่ใช้สำหรับการกำหนดเส้นทาง

ไฟล์ทั้งหมดข้างต้นมีอยู่ภายใน node_modules/. เราตั้งค่าโครงการเสร็จแล้วตอนนี้เราจะใช้ประโยชน์จากโครงการนี้ในบทถัดไปเพื่อพัฒนาแอปแรกของเรา