Alur kerja AngularJS dan struktur proyek Khas (dengan Python Flask)


226

Saya cukup baru untuk seluruh hiruk-pikuk kerangka klien-sisi MV * ini. Tidak harus AngularJS, tapi saya mengambilnya karena rasanya lebih alami bagi saya daripada Knockout, Ember atau Backbone. Lagi pula seperti apa alur kerjanya? Apakah orang-orang mulai dengan mengembangkan aplikasi sisi klien di AngularJS dan kemudian menghubungkan bagian belakang ke sana?

Atau sebaliknya dengan terlebih dahulu membangun back-end di Django, Flask, Rails dan kemudian melampirkan aplikasi AngularJS ke sana? Apakah ada cara yang "benar" untuk melakukannya, atau pada akhirnya hanya preferensi pribadi?

Saya juga tidak yakin apakah akan menyusun proyek saya sesuai dengan Flask atau AngularJS? praktik masyarakat.

Misalnya, aplikasi minitwit Flask disusun seperti:

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

Aplikasi tutorial AngularJS disusun seperti ini:

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

Saya dapat membayangkan aplikasi Flask dengan sendirinya, dan cukup mudah untuk melihat aplikasi AngularJS seperti ToDo List dengan sendirinya tetapi ketika harus menggunakan kedua teknologi ini, saya tidak mengerti bagaimana mereka bekerja bersama. Sepertinya saya tidak membutuhkan kerangka kerja sisi server ketika Anda sudah memiliki AngularJS, server web Python sederhana sudah cukup. Dalam aplikasi to-do AngularJS misalnya mereka menggunakan MongoLab untuk berbicara dengan database menggunakan Restful API. Tidak perlu memiliki kerangka kerja web di back-end.

Mungkin saya hanya sangat bingung, dan AngularJS tidak lebih dari perpustakaan jQuery mewah jadi saya harus menggunakan seperti saya akan menggunakan jQuery di proyek Flask saya (dengan asumsi saya mengubah sintaks template AngularJS menjadi sesuatu yang tidak bertentangan dengan Jinja2). Saya harap pertanyaan saya masuk akal. Saya terutama bekerja di back-end dan kerangka kerja sisi klien ini adalah wilayah yang tidak diketahui bagi saya.

Jawaban:


171

Saya akan memulai dengan mengatur aplikasi Labu dalam struktur standar sebagai berikut:

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

Dan seperti yang disebutkan oleh btford, jika Anda melakukan aplikasi Angular, Anda akan ingin fokus menggunakan templat sisi klien Angular dan menjauh dari templat sisi server. Menggunakan render_template ('index.html') akan menyebabkan Flask untuk mengartikan template sudut Anda sebagai template jinja, sehingga mereka tidak akan merender dengan benar. Sebagai gantinya, Anda ingin melakukan hal berikut:

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

Perhatikan bahwa menggunakan send_file () berarti file akan di-cache, jadi Anda mungkin ingin menggunakan make_response () sebagai gantinya, setidaknya untuk pengembangan:

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

Setelah itu, bangun bagian AngularJS dari aplikasi Anda, modifikasi struktur aplikasi sehingga terlihat seperti ini:

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

Pastikan index.html Anda menyertakan AngularJS, serta file lainnya:

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

Pada titik ini, Anda belum membangun RESTful API Anda, sehingga Anda dapat meminta pengontrol js Anda mengembalikan data sampel yang telah ditentukan (hanya pengaturan sementara). Saat Anda siap, terapkan RESTful API dan kaitkan ke aplikasi sudut Anda dengan angular-resource.js.

EDIT: Saya mengumpulkan templat aplikasi yang, meskipun sedikit lebih kompleks dari apa yang saya jelaskan di atas, menggambarkan bagaimana orang dapat membangun aplikasi dengan AngularJS + Flask, lengkap dengan komunikasi antara AngularJS dan API Flask sederhana. Ini dia jika Anda ingin memeriksanya: https://github.com/rxl/angular-flask


1
Saya menemukan masalah ini: konteks file tidak terpelihara ketika saya mencoba untuk melayani index.html secara statis. Saya menyiasati ini dengan menambahkan file statis saya dengan app.root_path. Kalau tidak, ini cukup tepat.
Makoto

Bisakah Anda menjelaskan lebih lanjut tentang "Perhatikan bahwa menggunakan send_file () berarti bahwa file akan di-cache, jadi Anda mungkin ingin menggunakan make_response () sebagai gantinya, setidaknya untuk pengembangan"? Terima kasih
nam

Bagaimana Anda mengelola bangunan, seperti menggunakan gerutuan dengan pendekatan ini?
Saad Farooq

1
@nam, saya pikir maksudnya adalah bahwa jika Anda membuat perubahan kecil di js Anda dll saat debugging, Anda tidak akan melihat efek di browser karena send_file cache file dilayani dengan batas waktu = SEND_FILE_MAX_AGE_DEFAULT. ada beberapa cara untuk menimpanya, tetapi lebih mudah menggunakan make_response sampai Anda siap untuk ditempatkan.
ars-longa-vita-brevis

@ SaadFarooq Saya tidak menutupi dengkuran di sini karena itu agak rumit. Jika Anda siap untuk menggunakan sesuatu seperti Grunt, maka masuk akal untuk memiliki repo terpisah untuk kode front-end, lalu bundel semuanya bersama-sama, salin-tempel ke dalam repo Flask atau dorong ke CDN, dan rujuk dari index.html.
Ryan

38

Anda bisa mulai di kedua ujung.

Anda benar bahwa Anda mungkin tidak membutuhkan kerangka kerja sisi server penuh dengan AngularJS. Biasanya lebih baik untuk menyajikan file HTML / CSS / JavaScript statis, dan menyediakan API RESTful untuk dikonsumsi oleh klien. Satu hal yang mungkin harus Anda hindari adalah mencampurkan templat sisi server dengan templat sisi klien AngularJS.

Jika Anda ingin menggunakan Flask untuk melayani file Anda (mungkin berlebihan, tetapi Anda dapat menggunakannya), Anda akan menyalin konten "app" dari "angular-phonecat" ke dalam folder "statis" "minitwit".

AngularJS lebih ditargetkan pada aplikasi seperti AJAX, sedangkan labu memberi Anda kemampuan untuk melakukan kedua aplikasi web gaya lama serta membuat RESTful APIs. Ada kelebihan dan kekurangan untuk setiap pendekatan, sehingga sangat tergantung apa yang ingin Anda lakukan. Jika Anda memberi saya beberapa wawasan, saya mungkin dapat membuat rekomendasi lebih lanjut.


26
+1 - tetapi saya tidak akan mengatakan bahwa Flask ditargetkan pada aplikasi web gaya lama - ia menyediakan semua bantuan yang Anda perlukan sebagai backend API web juga ;-) Ada juga Flask-Restless jika Anda ingin menjadi mampu menghasilkan API penyajian JSON untuk aplikasi web Anda dengan sangat mudah menggunakan Flask-SQLAlchemy - hanya FYI :-)
Sean Vieira

Poin bagus! Saya tidak terlalu mengenal Flask; terima kasih telah memberikan beberapa keahlian tentang masalah ini.
btford

3
lihat juga tutorial kami yang menunjukkan cara membuat aplikasi kasar dengan sudut dan semua alat yang kami sediakan: docs.angularjs.org/tutorial
Igor Minar

2
Bagi saya, tampaknya adil untuk meletakkan folder "app" dari "angular-phonecat" ke folder statis. Tapi saya pikir file index.html harus dimasukkan ke dalam folder templat minitwit. Folder css dan img harus dipindahkan ke "statis".
Nezo

22

Video Jetbrains PyCharm resmi ini oleh John Lindquist (angular.js dan guru jetbrains) adalah titik awal yang bagus karena menunjukkan interaksi layanan web, basis data, dan angular.js dalam labu.

Dia membangun klon pinterest dengan labu, sqlalchemy, flask-gelisah dan angular.js dalam waktu kurang dari 25 menit.

Nikmati: http://www.youtube.com/watch?v=2geC50roans


17

sunting : Panduan gaya Angular2 baru menunjukkan struktur yang sama, jika tidak sama secara lebih rinci.

Jawabannya di bawah target proyek skala besar. Saya telah menghabiskan banyak waktu untuk berpikir dan bereksperimen dengan beberapa pendekatan sehingga saya dapat menggabungkan beberapa kerangka sisi server (Labu dengan App Engine dalam kasus saya) untuk fungsionalitas back-end bersama dengan kerangka sisi klien seperti Angular. Kedua jawaban itu sangat baik, tetapi saya ingin menyarankan pendekatan yang sedikit berbeda yang (dalam pikiran saya setidaknya) berskala dengan cara yang lebih manusiawi.

Ketika Anda menerapkan contoh TODO, semuanya berjalan lurus ke depan. Ketika Anda mulai menambahkan fungsionalitas dan detail kecil yang bagus untuk peningkatan pengalaman pengguna, tidak sulit untuk tersesat dalam kekacauan gaya, javascript dll.

Aplikasi saya mulai tumbuh cukup besar, jadi saya harus mengambil langkah mundur dan memikirkan kembali. Awalnya pendekatan seperti yang disarankan di atas akan berhasil, dengan menggabungkan semua gaya dan semua JavaScript, tetapi tidak modular dan tidak mudah dipelihara.

Bagaimana jika kami mengatur kode klien per fitur dan bukan per jenis file:

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

dan seterusnya.

Jika kita membangunnya seperti ini, kita dapat membungkus setiap direktori kita dalam modul sudut. Dan kami telah membagi file-file kami dengan cara yang baik sehingga kami tidak harus melalui kode yang tidak relevan ketika kami bekerja dengan fitur tertentu.

Seorang pelari tugas seperti Grunt dikonfigurasi dengan benar, akan dapat menemukan dan menggabungkan dan mengkompilasi file Anda tanpa banyak kesulitan.


1

Pilihan lain adalah memisahkan keduanya.

proyek
| - server
| - klien

File yang terkait dengan labu berada di bawah folder server dan file yang terkait dengan angularjs berada di bawah folder klien. Dengan cara ini, akan lebih mudah untuk mengubah backend atau front-end. Misalnya, Anda mungkin ingin beralih dari Flask ke Django atau AngularJS ke ReactJS di masa mendatang.


Kevin: Anda mungkin ingin meninjau tautannya, sebagai mengarahkan ke halaman masuk facebook.
RussellB

0

Saya pikir penting untuk menentukan pada akhir apa Anda ingin melakukan sebagian besar pemrosesan data Anda - ujung depan atau ujung belakang.
Jika itu front end, maka ikuti alur kerja bersudut, yang berarti aplikasi labu Anda akan berfungsi sebagai lebih banyak api di mana ekstensi seperti labu-tenang akan berakhir.

Tetapi jika seperti saya, Anda melakukan sebagian besar pekerjaan di backend, kemudian pergi dengan struktur labu dan hanya pasang sudut (atau dalam kasus saya vue.js) untuk membangun ujung depan (ketika perlu)

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.