Soru Tipik AngularJS iş akışı ve proje yapısı (Python Flask ile)


Bu MV * istemci tarafı çerçeve çılgınlığı için oldukça yeni. AngularJS olmak zorunda değil ama onu seçtim çünkü benim için Knockout, Ember veya Backbone'dan daha doğal. Neyse iş akışı nasıl? İnsanlar, AngularJS'de istemci tarafında bir uygulama geliştirerek ve ardından arka uçları ona bağlayarak mı başlıyorlar?

Ya da arka taraftaki ilk Django, Flask, Rails ve daha sonra bir AngularJS uygulaması ekleyerek arka uçta inşa ederek? Bunu yapmak için "doğru" bir yolu var mı, yoksa sonunda sadece kişisel bir tercih mi?

Projemi Flask veya AngularJS'ye göre yapıp yapılamayacağından da emin değilim? topluluk uygulamaları.

Örneğin, Flask'ın minitwit uygulaması şu şekilde yapılandırılmıştır:

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

AngularJS öğretici uygulaması şu şekilde yapılandırılmıştır:

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

Ben kendi başına bir Flask uygulaması resim olabilir ve kendisi tarafından ToDo Listesi gibi AngularJS uygulaması görmek oldukça kolay ama bu iki teknolojiyi kullanmaya gelince nasıl birlikte çalıştıklarını anlamıyorum. AngularJS, basit bir Python web sunucusunun yeterli olması durumunda, neredeyse sunucu tarafında bir web çerçevesine ihtiyacım yok gibi görünüyor. AngularJS yapılacaklar uygulamasında örneğin Restful API kullanarak veritabanına konuşmak için MongoLab kullanırlar. Arka tarafta bir web çerçevesi olması gerekmiyordu.

Belki de sadece çok şaşkın ve AngularJS bir fantezi jQuery kitaplıktan başka bir şey değil, tıpkı benim Flask projelerinde jQuery kullanacağım gibi kullanmam gerekir (Jinery2 ile çatışmayan bir şeye AngularJS şablon sözdizimini değiştirdiğimi varsayarak). Umarım sorularım mantıklıdır. Esas olarak arka uçta çalışıyorum ve bu müşteri tarafı çerçevesi benim için bilinmeyen bir bölge.


220
2017-07-17 12:10


Menşei




Cevaplar:


Flask uygulamasını standart yapıda aşağıdaki gibi düzenleyerek başlayacağım:

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

Ve bahsettiğimiz gibi, bir Açısal uygulama yapıyorsanız, Açısal istemci tarafı şablonları kullanmaya odaklanmak ve sunucu tarafı şablonlardan uzak durmak istersiniz. Render_template ('index.html') kullanarak, Flask'ın açısal şablonlarınızı jinja şablonları olarak yorumlamasına neden olacak ve bu yüzden doğru şekilde oluşturulmayacak. Bunun yerine, aşağıdakileri yapmak isteyeceksiniz:

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

Send_file () işlevinin dosyaların önbelleğe alınacağı anlamına geldiğini unutmayın, bu nedenle en azından geliştirme için make_response () öğesini kullanmak isteyebilirsiniz:

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

Daha sonra, uygulamanızın AngularJS bölümünü oluşturun ve uygulama yapısını değiştirerek şöyle görünmesini sağlayın:

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

İndex.html dosyanızın, AngularJS'nin yanı sıra diğer dosyaları içerdiğinden emin olun:

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

Bu noktada, RESTful API'nizi henüz oluşturmadınız, böylece js denetleyicilerinizin önceden tanımlanmış örnek verilerini (yalnızca geçici bir kurulum) geri getirmesini sağlayabilirsiniz. Hazır olduğunuzda RESTful API'yi uygulayın ve angular-application.js ile açısal uygulamanıza bağlayın.

DÜZENLEME: Yukarıda tarif ettiğim gibi biraz daha karmaşık olsa da, AngularJS + Flask ile AngularJS ve Flask API arasındaki iletişim ile tamamlanmış bir uygulamayı nasıl oluşturabileceğini gösteren bir uygulama şablonu hazırladım. İşte kontrol etmek isterseniz: https://github.com/rxl/angular-flask


167
2018-02-28 20:23



Bu sorunla karşılaştım: index.html'ye statik olarak hizmet vermeye çalıştığımda dosyanın içeriği korunmadı. Statik dosyamı önceden ekleyerek app.root_path. Aksi takdirde, bu güzel bir nokta. - Makoto
Daha fazla bilgi açıklayabilir misiniz? "Send_file () kullanarak dosyaların önbelleğe alınacağı anlamına gelir, bu nedenle make_response () yerine en azından geliştirme için" "kullanmak isteyebilirsiniz"? Teşekkürler - nam
Bu yaklaşımı ile homurdanı kullanmak gibi yapıları nasıl yönetiyorsunuz? - Saad Farooq
@nam, onun ne anlama geldiğini düşünürken, js'nizde hata ayıklama yaparken küçük değişiklikler yapıyorsanız, tarayıcıdaki etkiyi görmeyeceksiniz çünkü send_file önbellek dosyaları bir zaman aşımıyla sunulmuş olur = SEND_FILE_MAX_AGE_DEFAULT. Bunu geçersiz kılmanın yolları var ancak dağıtım için hazır olana kadar make_response'yi kullanmak çok daha basit. - ars-longa-vita-brevis
@ ars-longa-vita-brevis doğrudur. - Ryan


Her iki ucundan başlayabilirsiniz.

AngularJS ile muhtemelen tam bir sunucu tarafı çerçevesine ihtiyacınız yoktur. Statik HTML / CSS / JavaScript dosyalarının sunulması genellikle daha iyidir ve müşterinin tüketmesi için arka uç için RESTful API sağlar. Muhtemelen kaçınmanız gereken bir şey, sunucu tarafı şablonları AngularJS istemci tarafı şablonları ile karıştırmaktır.

Eğer dosyalarınızı sunmak için Flask kullanmak istiyorsanız (overkill olabilir, ama yine de kullanabilirsiniz) "app" içeriğini "angular-phonecat" dan "minitwit" in "statik" klasörüne kopyalayın.

AngularJS, AJAX benzeri uygulamalarda daha fazla hedeflenirken, balon size hem eski tarz web uygulamalarını hem de RESTful API'leri oluşturma yeteneğini verir. Her yaklaşımın avantajları ve dezavantajları vardır, bu yüzden gerçekten yapmak istediğinize bağlıdır. Bana biraz bilgi verirseniz, daha fazla öneride bulunabilirim.


38
2017-07-17 19:51



+1 - ama Flask'ın eski stil web uygulamalarında hedeflendiğini söylemem. gerek bir web API arka uç olarak kullanmak için ;-) Ayrıca Matara-Huzursuz web uygulamanız için bir JSON sunma API'sini gerçekten kullanarak kolayca kullanmak istiyorsanız Matara-SQLAlchemy - Sadece FYI :-) - Sean Vieira
İyi bir nokta! Flask'a özellikle aşina değilim; Konuyla ilgili bazı uzmanlık sağladığınız için teşekkür ederiz. - btford
Ayrıca, sunduğumuz tüm takımların açısal ve tümleşik uygulamalarını nasıl oluşturacağımızı gösteren eğiticimize de göz atın: docs.angularjs.org/tutorial - Igor Minar
Bana göre, "app" klasörünü "angular-phonecat" ten sabit klasöre koymak adil görünüyor. Ama ben index.html dosyasının minitwit şablonları klasörüne yerleştirilmesi gerektiğini düşünüyorum. Css ve img klasörleri "statik" olarak taşınmalıdır. - Nezo


John Lindquist (angular.js ve jetbrains guru) tarafından hazırlanan bu resmi Jetbrains PyCharm videosu, webservice, veritabanı ve angular.js'nin balonun içindeki etkileşimini gösteren güzel bir başlangıç ​​noktasıdır.

O bir inşa pinterest klonu şişe, sqlalchemy, flask-huzursuz ve angular.js ile 25 dakikadan daha kısa sürede.

Keyfini çıkarın: http://www.youtube.com/watch?v=2geC50roans


22
2018-02-06 17:56





Düzenle: Yeni Angular2 tarzı kılavuz Aynı yapıyı çok daha ayrıntılı bir şekilde göstermez.

Aşağıdaki cevap büyük ölçekli projeleri hedeflemektedir. Düşünme ve çeşitli yaklaşımlarla deneme yapmak için epeyce zaman harcadım, böylece istemci tarafındaki bir çerçeve ile birlikte arka taraf işlevselliği için bazı sunucu tarafı çerçevesini (benim durumumda App Engine ile Flask) birleştirebiliyorum. Her iki cevap da çok iyi, ama (insan aklıma en azından) daha insani bir şekilde ölçeklenen biraz farklı bir yaklaşım önermek istiyorum.

Bir TODO örneğini uygularken, işler oldukça basittir. Kullanıcı deneyimi iyileştirmek için işlevsellik ve küçük güzel detaylar eklemeye başladığınızda, stilleri, javascript vb kaos içinde kaybolmak zor değil.

Uygulamam oldukça büyük büyümeye başladı, bu yüzden bir adım geri almak ve yeniden düşünmek zorunda kaldım. Başlangıçta yukarıda anlatılanlar gibi bir yaklaşım, tüm stilleri bir araya getirerek ve tüm JavaScriptleri birlikte çalıştırarak, ancak modüler değil ve kolayca sürdürülemez.

İstemci kodunu dosya türüne göre düzenlersek ve değil:

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

ve bunun gibi.

Bunu böyle yaparsak, her bir dizinimizi açısal bir modülde sarabiliriz. Dosyalarımızı, belirli bir özellik ile çalışırken, alakasız bir koddan geçmek zorunda kalmayacak şekilde güzel bir şekilde bölüştük.

Bir görev koşucusu gibi Homurtu Düzgün yapılandırılmış, dosyalarınızı bulmak ve birleştirmek ve sorunsuz bir şekilde derlemek mümkün olacaktır.


17
2017-09-02 10:29





Başka bir seçenek ikisini tamamen ayırmaktır.

proje
| - sunucu
| - müşteri

Şişeyle ilgili dosyalar sunucu klasörünün altına gider ve angularjs ile ilgili dosyalar istemci klasörünün altına gider. Bu şekilde arka uç veya ön uç değiştirmek daha kolay olacaktır. Örneğin, gelecekte Flask'tan Django'ya veya AngularJS'den ReactJS'ye geçmek isteyebilirsiniz.


1
2018-03-08 03:56



Kevin: Bağlantıyı facebook signin sayfasına yönlendirmek için incelemek isteyebilirsiniz. - RussellB


Veri işleminizin çoğunu ne amaçla yapmak istediğinizi belirlemenin önemli olduğunu düşünüyorum - ön uç veya arka uç.
Ön uç ise, açısal iş akışıyla devam edin, bu da flask uygulamanızın flask-dinlenmeye benzer bir uzantının biteceği bir api kadar çalışacağı anlamına gelir.

Ama benden hoşlanıyorsanız, arka uçta en çok iş yapıyorsunuz, daha sonra şişe yapısına geçin ve ön ucu (gerekli olduğunda) oluşturmak için yalnızca köşeli (veya benim durumumda vue.js) takın.


0
2017-09-07 23:18