मोबाइल कोणीय यूआई - परियोजना सेटअप

यह अध्याय प्रोजेक्ट सेटअप पर काम करेगा। हम बाकी अध्यायों में उदाहरणों के साथ काम करने के लिए इस सेटअप का उपयोग करने जा रहे हैं।

एनपीएम का उपयोग करके प्रोजेक्ट सेटअप किया जाएगा, क्योंकि आवश्यक किसी भी पैकेज को स्थापित करना आसान है।

अपने कमांड प्रॉम्प्ट को खोलें और एक डायरेक्टरी बनाएं जिसे uiformobile / कहा जाता है और सीडी कमांड का उपयोग करके डायरेक्टरी दर्ज करें।

अब निम्नलिखित कमांड निष्पादित करें -

npm init

कमांड npm init प्रॉजेक्ट को इनिशियलाइज़ करेगा -

यह नीचे दिखाए अनुसार पैकेज बनाएगा।

{
   "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

मोबाइल कोणीय UI के साथ काम करने के लिए, हमें AngularJS की आवश्यकता है। आइए हम निम्नलिखित कमांड का उपयोग करके स्थापित करें -

npm install --save-dev angular

हमें रूटिंग के साथ काम करने के लिए कोणीय-मार्ग की भी आवश्यकता है। इसे स्थापित करने के लिए कमांड है -

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/ अपने ब्राउज़र में UI देखने के लिए।

अंतिम फ़ोल्डर संरचना नीचे दी गई है -

फ़ोल्डर नोड_मॉड्यूल्स / में सभी पैकेज mobile_angular_ui, angularjs और कोणीय-मार्ग के लिए स्थापित किए गए हैं।

src/फ़ोल्डर में UI के विकास के लिए आवश्यक HTML और js फाइलें होंगी। Index.html प्रारंभ बिंदु है जो आपके हिट होने पर देखा जाएगाhttp://localhost:3000/.

अब आवश्यक पैकेज स्थापित किए गए हैं। आइए अब हम उन महत्वपूर्ण css और js फाइलों के बारे में बात करते हैं जिनकी हमें आवश्यकता है। हालाँकि यह फ्रेमवर्क मोबाइल एप्लिकेशन के लिए है, लेकिन इसका उपयोग डेस्कटॉप एप्लिकेशन के लिए भी किया जा सकता है।

निम्नलिखित महत्वपूर्ण सीएसएस फाइलें हैं जो आपके .html फाइलों में शामिल होना अनिवार्य हैं।

अनु क्रमांक	फाइल विवरण
1	mobile-angular-ui-base.css यह css फाइल मोबाइल डिवाइस और टैबलेट के लिए है।
2	mobile-angular-ui-desktop.css उत्तरदायी सीएसएस फ़ाइल का उपयोग डेस्कटॉप और मोबाइल उपकरणों पर किया जाना था।
3	mobile-angular-ui-hover.css इस hover के लिए सीएसएस नियम हैं।
4	angular.min.js AngularJS फ़ाइल जिसे हमें परियोजना के साथ शुरू करने की आवश्यकता है।
5	mobile-angular-ui.min.js यह मोबाइल कोणीय UI js फ़ाइल है जिसे हमें AngularJS मॉड्यूल में निर्भरता मॉड्यूल में उपयोग करने की आवश्यकता है। यह कोर मॉड्यूल है।
6	angular-route.min.js यह एक AngularJS मार्ग फ़ाइल है जिसका उपयोग रूटिंग के लिए किया जाता है।

उपरोक्त सभी फाइलें अंदर मौजूद हैं node_modules/। हम प्रोजेक्ट सेटअप के साथ कर रहे हैं, अब हम अपने पहले ऐप को विकसित करने के लिए अगले अध्याय में इस परियोजना का उपयोग करने जा रहे हैं।