เวิร์กโฟลว์ AngularJS ทั่วไปและโครงสร้างโครงการ (พร้อม Python Flask)

ฉันค่อนข้างใหม่กับความคลั่งไคล้เฟรมเวิร์กฝั่งไคลเอนต์ MV * ทั้งหมด มันไม่จำเป็นต้องเป็น AngularJS แต่ฉันเลือกมันเพราะมันให้ความรู้สึกเป็นธรรมชาติมากกว่า Knockout, Ember หรือ Backbone อย่างไรก็ตามเวิร์กโฟลว์เป็นอย่างไร ผู้คนเริ่มต้นด้วยการพัฒนาแอปพลิเคชันฝั่งไคลเอ็นต์ใน AngularJS แล้วต่อท้ายแบ็คเอนด์หรือไม่

หรือวิธีอื่น ๆ โดยการสร้างแบ็คเอนด์ใน Django, Flask, Rails ก่อนจากนั้นจึงติดตั้งแอพ AngularJS มีวิธีที่ "ถูกต้อง" ในการทำมันหรือเป็นเพียงการตั้งค่าส่วนตัวในที่สุด?

ฉันยังไม่แน่ใจว่าจะจัดโครงสร้างโครงการตาม Flask หรือ AngularJS หรือไม่ แนวทางปฏิบัติของชุมชน

ตัวอย่างเช่นแอป minitwit ของ Flask มีโครงสร้างดังนี้:

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

ฉันสามารถนึกภาพแอพ Flask ด้วยตัวเองและมันค่อนข้างง่ายที่จะเห็นแอพ AngularJS เช่น ToDo List ด้วยตัวเอง แต่เมื่อมันมาถึงการใช้ทั้งสองเทคโนโลยีฉันไม่เข้าใจว่าพวกเขาทำงานร่วมกันอย่างไร ดูเหมือนว่าฉันไม่จำเป็นต้องมีเว็บเฟรมเวิร์กฝั่งเซิร์ฟเวอร์เมื่อคุณมี AngularJS แล้วเว็บเซิร์ฟเวอร์ Python แบบง่าย ๆ ก็จะพอเพียง ในแอปสิ่งที่ต้องทำ AngularJS พวกเขาใช้ MongoLab เพื่อพูดคุยกับฐานข้อมูลโดยใช้ Restful API ไม่จำเป็นต้องมีเฟรมเวิร์กเว็บในส่วนท้าย

บางทีฉันสับสนมากและ AngularJS ไม่ใช่อะไรที่มากกว่า jQuery library ดังนั้นฉันควรใช้เหมือนกับฉันจะใช้ jQuery ในโครงการ Flask ของฉัน (สมมติว่าฉันเปลี่ยนไวยากรณ์เทมเพลต AngularJS เป็นสิ่งที่ไม่ขัดแย้งกับ Jinja2) ฉันหวังว่าคำถามของฉันจะเข้าท่า ฉันทำงานบน back-end เป็นหลักและกรอบฝั่งไคลเอ็นต์นี้เป็นอาณาเขตที่ไม่รู้จักสำหรับฉัน

ฉันจะเริ่มต้นด้วยการจัดระเบียบแอพ Flask ในโครงสร้างมาตรฐานดังนี้

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

และตามที่ btford กล่าวไว้หากคุณกำลังทำแอพพลิเคชั่น Angular คุณจะต้องมุ่งเน้นไปที่การใช้เทมเพลตฝั่งไคลเอ็นต์ของ Angular และอยู่ห่างจากเทมเพลตฝั่งเซิร์ฟเวอร์ การใช้ render_template ('index.html') จะทำให้ Flask ตีความเทมเพลตเชิงมุมของคุณเป็นเทมเพลต jinja ดังนั้นจึงไม่สามารถแสดงผลได้อย่างถูกต้อง คุณจะต้องทำสิ่งต่อไปนี้แทน:

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

โปรดทราบว่าการใช้ send_file () หมายความว่าไฟล์จะถูกแคชดังนั้นคุณอาจต้องการใช้ make_response () แทนอย่างน้อยก็เพื่อการพัฒนา:

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

หลังจากนั้นสร้างส่วน AngularJS ของแอปของคุณปรับเปลี่ยนโครงสร้างแอพเพื่อให้มีลักษณะดังนี้:

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 และเชื่อมต่อกับแอพเชิงมุมของคุณด้วย angular-resource.js

แก้ไข: ฉันได้รวบรวมเทมเพลตแอพที่ซับซ้อนกว่าที่ฉันได้อธิบายไว้ข้างต้น แต่แสดงให้เห็นว่าเราสามารถสร้างแอพด้วย AngularJS + Flask ได้อย่างไรพร้อมด้วยการสื่อสารระหว่าง AngularJS และ Flask API ที่เรียบง่าย นี่คือถ้าคุณต้องการตรวจสอบ: https://github.com/rxl/angular-flask

คุณสามารถเริ่มต้นที่ปลายทั้งสอง

คุณพูดถูกคุณอาจไม่ต้องการเฟรมเวิร์กฝั่งเซิร์ฟเวอร์แบบเต็มด้วย AngularJS โดยปกติแล้วจะดีกว่าที่จะให้บริการไฟล์ HTML / CSS / JavaScript แบบคงที่และให้ RESTful API สำหรับส่วนหลังเพื่อให้ลูกค้าใช้งาน สิ่งหนึ่งที่คุณควรหลีกเลี่ยงคือการผสมเทมเพลตฝั่งเซิร์ฟเวอร์กับเทมเพลตฝั่งไคลเอ็นต์ AngularJS

หากคุณต้องการใช้ Flask เพื่อให้บริการไฟล์ของคุณ (อาจเกินขีด จำกัด แต่คุณสามารถใช้งานได้อย่างไรก็ตามคุณจะต้องคัดลอกเนื้อหาของ "แอพ" จาก "angular-phonecat" ไปยังโฟลเดอร์ "static" ของ "minitwit"

AngularJS มีการกำหนดเป้าหมายเพิ่มเติมที่แอปพลิเคชันที่คล้ายกับ AJAX ในขณะที่ขวดให้ความสามารถในการทำทั้งเว็บแอปแบบเก่าและสร้าง RESTful API มีข้อดีและข้อเสียสำหรับแต่ละวิธีดังนั้นมันขึ้นอยู่กับสิ่งที่คุณต้องการทำ หากคุณให้ข้อมูลเชิงลึกแก่ฉันฉันอาจจะสามารถให้คำแนะนำเพิ่มเติมได้

วิดีโออย่างเป็นทางการของ Jetbrains PyCharm โดย John Lindquist (angular.js และ jetbrains guru) เป็นจุดเริ่มต้นที่ดีเพราะมันแสดงให้เห็นถึงความสัมพันธ์ของ webservice ฐานข้อมูลและ angular.js ภายในขวด

เขาสร้างโคลน pinterestด้วย flask, sqlalchemy, flask-restless และ angular.js ในเวลาน้อยกว่า 25 นาที

สนุก: http://www.youtube.com/watch?v=2geC50roans

แก้ไข : คู่มือสไตล์ใหม่ของAngular2แนะนำสิ่งที่คล้ายกันหากไม่มีโครงสร้างเดียวกันในรายละเอียดที่มากขึ้น

คำตอบด้านล่างกำหนดเป้าหมายโครงการขนาดใหญ่ ฉันใช้เวลาคิดและทดลองกับวิธีการหลายอย่างค่อนข้างนานดังนั้นฉันจึงสามารถรวมเฟรมเวิร์กฝั่งเซิร์ฟเวอร์ (Flask กับ App Engine ในกรณีของฉัน) สำหรับการทำงานแบ็คเอนด์พร้อมกับเฟรมเวิร์กฝั่งไคลเอ็นต์เช่น Angular ทั้งสองคำตอบนั้นดีมาก แต่ฉันอยากจะแนะนำวิธีการที่แตกต่างออกไปเล็กน้อยซึ่งอย่างน้อยในใจของฉัน (ในใจของฉัน) ชั่งน้ำหนักในแบบของมนุษย์มากขึ้น

เมื่อคุณใช้ตัวอย่างสิ่งที่ต้องทำสิ่งต่าง ๆ ค่อนข้างตรงไปตรงมา เมื่อคุณเริ่มเพิ่มฟังก์ชันการทำงานและรายละเอียดเล็ก ๆ น้อย ๆ เพื่อการปรับปรุงประสบการณ์การใช้งานของผู้ใช้มันไม่ยากที่จะหลงทางในรูปแบบที่วุ่นวายจาวาสคริปต์ ฯลฯ

แอปพลิเคชันของฉันเริ่มมีขนาดค่อนข้างใหญ่ดังนั้นฉันจึงต้องย้อนกลับไปคิดใหม่ เริ่มแรกวิธีการที่แนะนำข้างต้นจะใช้งานได้โดยมีสไตล์ทั้งหมดเข้าด้วยกันและ JavaScript ทั้งหมดเข้าด้วยกัน แต่ไม่ได้เป็นแบบแยกส่วนและไม่สามารถบำรุงรักษาได้ง่าย

จะเกิดอะไรขึ้นถ้าเราจัดระเบียบรหัสลูกค้าต่อคุณสมบัติและไม่ใช่ตามประเภทไฟล์:

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
        |-- ...

และอื่น ๆ

ถ้าเราสร้างมันขึ้นมาแบบนี้เราสามารถหุ้มไดเร็กตอรี่ทั้งหมดของเราในโมดุลเชิงมุม และเราได้แบ่งไฟล์ของเราออกเป็นวิธีที่ดีที่เราไม่ต้องใช้รหัสที่ไม่เกี่ยวข้องเมื่อเราทำงานกับคุณสมบัติเฉพาะ

นักวิ่งงานอย่างGruntได้รับการกำหนดค่าอย่างเหมาะสมจะสามารถค้นหาและเชื่อมต่อและคอมไพล์ไฟล์ของคุณได้โดยไม่ยุ่งยาก

อีกทางเลือกหนึ่งคือการแยกทั้งสองอย่างสมบูรณ์

โครงการ
| - เซิร์ฟเวอร์
| - ลูกค้า

ไฟล์ที่เกี่ยวข้องกับขวดจะอยู่ภายใต้โฟลเดอร์เซิร์ฟเวอร์และไฟล์ที่เกี่ยวข้องกับ angularjs จะอยู่ภายใต้โฟลเดอร์ไคลเอนต์ วิธีนี้จะเป็นการง่ายกว่าที่จะเปลี่ยนแบ็กเอนด์หรือส่วนหน้า ตัวอย่างเช่นคุณอาจต้องการเปลี่ยนจาก Flask เป็น Django หรือ AngularJS เป็น ReactJS ในอนาคต

ฉันคิดว่ามันเป็นสิ่งสำคัญที่จะต้องตัดสินใจว่าคุณต้องการจะทำการประมวลผลข้อมูลส่วนใหญ่ของคุณอย่างไร - front end หรือ back end
หากเป็นส่วนหน้าให้ไปกับเวิร์กโฟลว์เชิงมุมซึ่งหมายความว่าแอพพลิเคชั่นขวดของคุณจะทำงานเหมือน api มากขึ้นซึ่งส่วนขยายเช่นการพักผ่อนของขวดจะมาถึง

แต่ถ้าชอบฉันคุณกำลังทำงานกับแบ็กเอนด์มากที่สุดจากนั้นไปกับโครงสร้างขวดและเสียบเฉพาะเชิงมุม (หรือในกรณีของฉัน vue.js) เพื่อสร้างส่วนหน้า (เมื่อจำเป็น)