ठेठ AngularJS वर्कफ़्लो और प्रोजेक्ट संरचना (पायथन फ्लास्क के साथ)

Question

मैं इस पूरे एमवी * क्लाइंट-साइड फ्रेमवर्क उन्माद के लिए बहुत नया हूं। यह AngularJS होना जरूरी नहीं है, लेकिन मैंने इसे चुना क्योंकि यह नॉकआउट, एम्बर या बैकटोन की तुलना में मेरे लिए अधिक स्वाभाविक लगता है। वैसे भी वर्कफ़्लो क्या है? क्या लोग AngularJS में एक क्लाइंट-साइड एप्लिकेशन विकसित करने से शुरू करते हैं और फिर इसे बैक-एंड तक हुक करते हैं?

या फिर Django, फ्लास्क, रेल्स में बैक-एंड का निर्माण और फिर इसके लिए एक AngularJS ऐप संलग्न करने का दूसरा तरीका? क्या इसे करने का एक "सही" तरीका है, या क्या यह अंत में एक व्यक्तिगत पसंद है?

मुझे यह भी सुनिश्चित नहीं है कि फ्लास्क या एंगुलरजेएस के अनुसार मेरी परियोजना को तैयार करना है या नहीं? सामुदायिक प्रथाओं।

उदाहरण के लिए, फ्लास्क का मिनिटविट ऐप इस तरह संरचित है:

minitwit
|-- minitwit.py
|-- static
   |-- css, js, images, etc...
`-- templates
   |-- html files and base layout

AngularJS ट्यूटोरियल ऐप इस तरह संरचित है:

angular-phonecat
|-- app
    `-- css
    `-- img
    `-- js
    `-- lib
    `-- partials
    `-- index.html
|-- scripts
 `-- node.js server and test server files

मैं अपने आप से एक फ्लास्क एप्लिकेशन को देख सकता था, और यह काफी आसान है कि खुद ही ToDo List जैसे AngularJS ऐप देखें लेकिन जब इन दोनों तकनीकों का उपयोग करने की बात आती है तो मुझे समझ नहीं आता कि वे एक साथ कैसे काम करते हैं। यह लगभग ऐसा लगता है कि मुझे सर्वर-साइड वेब-फ्रेमवर्क की आवश्यकता नहीं है जब आपके पास पहले से ही AngularJS है, तो एक साधारण पायथन वेब सर्वर पर्याप्त होगा। उदाहरण के लिए AngularJS टू-ऐप में वे MongoLab का उपयोग करते हैं जो रेस्टफुल एपीआई का उपयोग कर डेटाबेस से बात करते हैं। बैक-एंड पर वेब फ्रेमवर्क होने की कोई आवश्यकता नहीं थी।

हो सकता है कि मैं बस भ्रम में हूं, और AngularJS एक फैंसी jQuery लाइब्रेरी से ज्यादा कुछ नहीं है इसलिए मुझे अपने Flask प्रोजेक्ट्स में jQuery का उपयोग करने की तरह ही उपयोग करना चाहिए (यह मानते हुए कि मैं AngularJS टेम्पलेट सिंटैक्स को कुछ के लिए बदल देता हूं जो कि Jinja2 के लिए संघर्ष नहीं करता है)। मुझे उम्मीद है कि मेरे सवाल कुछ समझ में आएंगे। मैं मुख्य रूप से बैक-एंड पर काम करता हूं और यह क्लाइंट-साइड फ्रेमवर्क मेरे लिए एक अज्ञात क्षेत्र है।

Answer 1

मैं मानक संरचना में फ्लास्क ऐप को निम्न प्रकार से व्यवस्थित करना शुरू करूंगा:

app
|-- app.py
|-- static
    |-- css
    |-- img
    |-- js
|-- templates

और जैसा कि btford ने बताया है, अगर आप एक Angular ऐप कर रहे हैं, तो आप Angular क्लाइंट-साइड टेम्प्लेट का उपयोग करने और सर्वर-साइड टेम्प्लेट से दूर रहने पर ध्यान देना चाहेंगे। रेंडर_टेमप्लेट ('index.html') के उपयोग से फ्लास्क आपके कोणीय टेम्प्लेट को जिन्जा टेम्प्लेट के रूप में व्याख्या करने का कारण बनेगा, इसलिए वे सही तरीके से प्रस्तुत करेंगे। इसके बजाय, आप निम्न कार्य करना चाहेंगे:

@app.route("/")
def index():
    return send_file('templates/index.html')

ध्यान दें कि send_file () का उपयोग करने का अर्थ है कि फाइलें कैश हो जाएंगी, इसलिए आप कम से कम विकास के लिए make_response () का उपयोग करना चाह सकते हैं:

    return make_response(open('templates/index.html').read())

बाद में, अपने ऐप के अंगुलरजेएस भाग का निर्माण करें, ऐप संरचना को संशोधित करें ताकि यह इस तरह दिखाई दे:

app
|-- app.py
|-- static
    |-- css
    |-- img
    |-- js
        |-- app.js, controllers.js, etc.
    |-- lib
        |-- angular
            |-- angular.js, etc.
    |-- partials
|-- templates
    |-- index.html

सुनिश्चित करें कि आपके index.html में AngularJS, साथ ही कोई अन्य फ़ाइलें शामिल हैं:

<script src="static/lib/angular/angular.js"></script>

इस बिंदु पर, आपने अभी तक अपने RESTful API का निर्माण नहीं किया है, इसलिए आप अपने js नियंत्रकों को पूर्वनिर्धारित नमूना डेटा (केवल एक अस्थायी सेटअप) लौटा सकते हैं। जब आप तैयार हों, RESTful API को लागू करें और इसे कोणीय-संसाधन.js के साथ अपने कोणीय ऐप पर हुक करें।

संपादित करें: मैंने एक ऐप टेम्प्लेट को एक साथ रखा है, हालांकि थोड़ा और जटिल है कि मैंने जो ऊपर वर्णित किया है, वह दिखाता है कि कोई भी कैसे AngularJS + फ्लास्क के साथ एक ऐप बना सकता है, जो AngularJS और एक साधारण फ्लास्क एपीआई के बीच संचार के साथ पूरा होता है। यहाँ यह है अगर आप इसे देखना चाहते हैं: https://github.com/rxl/angular-flask

Comments

मैं इस मुद्दे पर आया था: जब मैंने index.html की सेवा करने का प्रयास किया तो फ़ाइल का संदर्भ संरक्षित नहीं था। मैंने अपनी स्थिर फ़ाइल के साथ इसे शामिल करके इसे प्राप्त किया app.root_path। अन्यथा, यह सुंदर जगह है।

— माकोटो

क्या आप "नोट करें कि send_file () का उपयोग करने के बारे में अधिक बता सकते हैं कि फाइलें कैश हो जाएंगी, इसलिए हो सकता है कि आप make_response () के बजाय कम से कम विकास के लिए उपयोग करना चाहें"? साभार

— नाम

आप इस दृष्टिकोण के साथ ग्रन्ट का उपयोग करने जैसे बिल्ड कैसे प्रबंधित करते हैं?

— साद फारूक

@nam, मुझे लगता है कि उनका क्या मतलब है कि यदि आप डीबग करते समय अपने js आदि में छोटे बदलाव कर रहे हैं, तो आपको ब्राउज़र में प्रभाव दिखाई नहीं देगा क्योंकि send_file caches फ़ाइलों को टाइमआउट = SEND_FILE_MAX_AGE_DE_FAFAULT के साथ परोसा जा रहा है। इसे ओवरराइड करने के तरीके हैं, लेकिन यह बहुत सरल है कि आप केवल मेक_पर्सन का उपयोग करें जब तक कि आप तैनाती के लिए तैयार न हों।

— ars-longa-vita-brevis

@SaadFarooq मैं यहां ग्रन्ट को कवर नहीं करता क्योंकि यह चीजों को काफी जटिल बनाता है। यदि आप Grunt जैसी किसी चीज़ का उपयोग करने के लिए तैयार हैं, तो इसका मतलब है कि फ्रंट-एंड कोड के लिए एक अलग रेपो है, फिर सब कुछ एक साथ बंडल करें, इसे फ्लास्क रेपो में कॉपी-पेस्ट करें या इसे CDN पर धकेलें, और इसे संदर्भ दें index.html से।

— रयान

Answer 2

आप दोनों छोर पर शुरू कर सकते हैं।

आप सही हैं कि आपको शायद AngularJS के साथ पूर्ण सर्वर-साइड ढांचे की आवश्यकता नहीं है। आम तौर पर स्थिर HTML / CSS / जावास्क्रिप्ट फ़ाइलों की सेवा करना बेहतर होता है, और ग्राहक को उपभोग करने के लिए अंतिम छोर के लिए एक RESTful API प्रदान करना। एक चीज जो आपको शायद बचनी चाहिए, वह है सर्वर-साइड टेम्पलेट को AngularJS क्लाइंट-साइड टेम्पलेट के साथ मिलाना।

यदि आप अपनी फ़ाइलों की सेवा के लिए फ्लास्क का उपयोग करना चाहते हैं (आप ओवरकिल हो सकते हैं, लेकिन फिर भी आप इसका उपयोग कर सकते हैं) तो आप "मिनिरलिट" के "स्टैटिक" फ़ोल्डर में "कोणीय-फोनकैट" से "ऐप" की सामग्री की नकल करेंगे।

AJAX जैसे अनुप्रयोगों में AngularJS को अधिक लक्षित किया जाता है, जबकि फ्लास्क आपको पुरानी शैली के वेब ऐप दोनों के साथ-साथ Restful API बनाने की क्षमता प्रदान करता है। प्रत्येक दृष्टिकोण के फायदे और नुकसान हैं, इसलिए यह वास्तव में निर्भर करता है कि आप क्या करना चाहते हैं। यदि आप मुझे कुछ जानकारी देते हैं, तो मैं आगे की सिफारिशें करने में सक्षम हो सकता हूं।

Comments

+1 - लेकिन मैं यह नहीं कहूंगा कि फ्लास्क को पुरानी शैली के वेब ऐप्स पर लक्षित किया गया है - यह आपको उन सभी सहायकों को प्रदान करता है, जिन्हें आपको वेब एपीआई बैकएंड के रूप में भी उपयोग करने की आवश्यकता है ;-) यदि आप बनना चाहते हैं, तो फ्लास्क-रेस्टलेस भी है। वास्तव में आसानी से फ्लास्क- SQLAlchemy का उपयोग करके अपने वेब ऐप के लिए एक JSON सेवारत एपीआई उत्पन्न करने में सक्षम - सिर्फ FYI :-)

— शॉन विएरा

अच्छी बात! मैं फ्लास्क से विशेष रूप से परिचित नहीं हूँ; विषय पर कुछ विशेषज्ञता प्रदान करने के लिए धन्यवाद।

— बीटीफोर्ड

हमारे ट्यूटोरियल की भी जाँच करें, जिसमें दिखाया गया है कि कोणीय के साथ क्रूड

— इगोर मीनार

मेरे लिए, "एंगुलर-फोनकैट" से "ऐप" फोल्डर को स्टैटिक फोल्डर में लाना उचित लगता है। लेकिन मुझे लगता है कि index.html फ़ाइल को minitwit टेम्प्लेट फ़ोल्डर में डाला जाना चाहिए। Css और img फ़ोल्डर्स को "static" में ले जाना चाहिए।

— नेजो

Answer 3

जॉन लिंडक्विस्ट (angular.js और jetbrains गुरु) द्वारा यह आधिकारिक Jetbrains PyCharm वीडियो एक अच्छा शुरुआती बिंदु है क्योंकि यह फ्लास्क के भीतर webservice, डेटाबेस और angular.js के परस्पर क्रिया को दर्शाता है।

वह 25 मिनट से भी कम समय में फ्लास्क, स्क्वैल्सीमे, फ्लास्क-रेस्टलेस और कोणीय.जेएस के साथ एक Pinterest क्लोन बनाता है ।

आनंद लें: http://www.youtube.com/watch?v=2geC50roans

Answer 4

संपादित करें : नई Angular2 शैली मार्गदर्शिका एक समान बताती है, यदि समान संरचना अधिक विवरण में नहीं है।

नीचे दिए गए जवाब बड़े पैमाने पर परियोजनाओं को लक्षित करते हैं। मैंने काफी समय सोचने और कई दृष्टिकोणों के साथ प्रयोग करने में बिताया है, इसलिए मैं कुछ सर्वर साइड फ्रेमवर्क (ऐप केस के साथ फ्लास्क मेरे मामले में) को बैकग्राउंड कार्यक्षमता के साथ-साथ क्लाइंट साइड फ्रेमवर्क जैसे कोणीय के साथ जोड़ सकता हूं। दोनों उत्तर बहुत अच्छे हैं, लेकिन मैं थोड़ा अलग दृष्टिकोण सुझाना चाहूंगा जो (कम से कम मेरे दिमाग में) अधिक मानवीय तरीके से तराजू।

जब आप TODO उदाहरण को लागू कर रहे हैं, तो चीजें काफी सीधे हैं। जब आप कार्यक्षमता जोड़ना शुरू करते हैं और उपयोगकर्ता अनुभव में सुधार के लिए छोटे अच्छे विवरण, इसकी शैली, जावास्क्रिप्ट आदि की अव्यवस्था में खो जाना मुश्किल नहीं है।

मेरा आवेदन काफी बड़ा होने लगा, इसलिए मुझे एक कदम पीछे हटना पड़ा और पुनर्विचार करना पड़ा। प्रारंभ में जैसा कि ऊपर सुझाया गया है, सभी शैलियों को एक साथ और सभी जावास्क्रिप्ट को एक साथ रखकर काम करेगा, लेकिन यह मॉड्यूलर नहीं है और आसानी से बनाए रखने योग्य नहीं है।

क्या होगा यदि हमने ग्राहक कोड को प्रति फीचर के अनुसार व्यवस्थित किया है और प्रति फ़ाइल प्रकार के अनुसार नहीं:

app
|-- server
    |-- controllers
        |-- app.py
    |-- models
        |-- model.py
    |-- templates
        |-- index.html
|-- static
    |-- img
    |-- client
        |-- app.js
        |-- main_style.css
        |-- foo_feature
            |-- controller.js
            |-- directive.js
            |-- service.js
            |-- style.css
            |-- html_file.tpl.html
        |-- bar_feature
            |-- controller.js
            |-- directive.js
            |-- service.js
            |-- style.css
            |-- html_file.tpl.html
    |-- lib
        |-- jquery.js
        |-- angular.js
        |-- ...

और इसी तरह।

अगर हम इसे इस तरह बनाते हैं, तो हम अपनी हर डायरेक्टरी को कोणीय मॉड्यूल में लपेट सकते हैं। और हमने अपनी फ़ाइलों को एक अच्छे तरीके से विभाजित कर दिया है, जब हमें किसी विशिष्ट सुविधा के साथ काम करते समय अप्रासंगिक कोड से गुजरना नहीं पड़ता है।

ग्रंट जैसे एक कार्य धावक को ठीक से कॉन्फ़िगर किया गया है, जो आपकी फ़ाइलों को बहुत परेशानी के बिना ढूंढने और संकलित करने में सक्षम होगा।

Answer 5

एक अन्य विकल्प दोनों को पूरी तरह से अलग करना है।

परियोजना
| - सर्वर
| - ग्राहक

फ्लास्क से संबंधित फाइलें सर्वर फोल्डर के नीचे जाती हैं और एंगुलरज से संबंधित फाइलें क्लाइंट फोल्डर के नीचे जाती हैं। इस तरह, बैकएंड या फ्रंट-एंड को बदलना आसान होगा। उदाहरण के लिए, आप भविष्य में फ्लास्क से Django या AngularJS से ReactJS पर स्विच करना चाह सकते हैं।

Comments

केविन: आप लिंक की समीक्षा करना चाह सकते हैं, फेसबुक साइनइन पेज पर निर्देश के रूप में।

— रसलबी

Answer 6

मुझे लगता है कि यह निर्धारित करना महत्वपूर्ण है कि आप अपने डेटा प्रोसेसिंग में से कौन सा अंत करना चाहते हैं - फ्रंट एंड या बैक एंड।
यदि यह सामने का छोर है, तो कोणीय वर्कफ़्लो के साथ जाएं, जिसका अर्थ है कि आपका फ्लास्क ऐप एफ़ी के रूप में कार्य करेगा जहाँ फ्लास्क-रेस्टफुल जैसा विस्तार समाप्त होगा।

लेकिन अगर मेरी तरह, आप बैकएंड पर सबसे अधिक काम कर रहे हैं, तो फ्लास्क संरचना और केवल प्लग कोणीय (या मेरे मामले में vue.js) के साथ आगे के अंत का निर्माण करने के लिए जाएं (जब neccessary)