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

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.

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

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.

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

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.

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.

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)