Типичный рабочий процесс AngularJS и структура проекта (с колбой Python)

Я довольно Новичок во всем этом безумии MV * на стороне клиента. Это не обязательно должен быть AngularJS, но я выбрал его, потому что он чувствует себя более естественным для меня, чем нокаут, Эмбер или позвоночник. В любом случае, каков рабочий процесс? Люди начинают с разработки клиентского приложения в AngularJS, а затем подключают к нему серверную часть?



или наоборот, сначала создав бэк-энд в Django, Flask, Rails, а затем прикрепив к нему приложение AngularJS? Есть "правильный" способ сделать это, или это просто личное предпочтение в конце концов?



Я также не уверен, следует ли структурировать мой проект в соответствии с колбой или 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


я мог бы представить приложение колбы само по себе, и это довольно легко увидеть AngularJS приложение, как Todo список сам по себе, но когда он приходит чтобы использовать обе эти технологии я не понимаю, как они работают вместе. Мне почти кажется, что мне не нужен серверный веб-фреймворк, когда у вас уже есть AngularJS, достаточно простого веб-сервера Python. Например, в приложении AngularJS to-do они используют MongoLab для общения с базой данных с помощью Restful API. Нет необходимости иметь веб-фреймворк на заднем конце.



может быть, я просто ужасно запутался, и AngularJS-это не более чем причудливая библиотека jQuery, поэтому я должен использовать так же, как я бы использовал jQuery в своих проектах Flask (предполагая, что я изменяю синтаксис шаблона AngularJS на что-то, что не конфликтует с Jinja2). Я надеюсь, что мои вопросы имеют какой-то смысл. Я в основном работаю на бэк-энде, и этот фреймворк на стороне клиента является для меня неизвестной территорией.

526   6  

6 ответов:

Я бы начал с организации приложения Flask в стандартной структуре следующим образом:

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

и как упоминал btford, если вы делаете Угловое приложение, вы хотите сосредоточиться на использовании угловых шаблонов на стороне клиента и держаться подальше от шаблонов на стороне сервера. Использование 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

убедитесь, что ваш индекс.html включает в себя AngularJS, а также любые другие файлы:

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

на данный момент Вы еще не создали свой RESTful API, поэтому у вас могут быть контроллеры js возврат предопределенных данных образца (только временная настройка). Когда вы будете готовы, реализуйте RESTful API и подключите его к своему угловому приложению с помощью angular-resource.js.

EDIT: я собрал шаблон приложения, который, хотя и немного сложнее, чем то, что я описал выше, иллюстрирует, как можно построить приложение с AngularJS + Flask, в комплекте с коммуникацией между AngularJS и простым API Flask. Вот он, если вы хотите, чтобы проверить его: https://github.com/rxl/angular-flask

166  
2013-08-02 18:58:46

вы можете начать с любого конца.

вы правы, что вам, вероятно, не нужен полный серверный фреймворк с AngularJS. Обычно лучше обслуживать статические файлы HTML/CSS / JavaScript и предоставлять RESTful API для серверной части для использования клиентом. Одна вещь, которую вы, вероятно, должны избегать,-это смешивание шаблонов на стороне сервера с шаблонами на стороне клиента AngularJS.

Если вы хотите использовать колбу для обслуживания ваших файлов (может быть перебор, но вы можете использовать его тем не менее) вы скопируете содержимое "приложения" из "angular-phonecat" в "статическую" папку "minitwit"."

AngularJS больше ориентирован на AJAX-подобные приложения, в то время как flask дает вам возможность делать как старые веб-приложения, так и создавать RESTful API. Есть преимущества и недостатки каждого подхода, так что это действительно зависит от того, что вы хотите сделать. Если вы дать мне некоторые идеи, я мог бы сделать дальнейшие рекомендации.

38  
2012-11-09 18:47:54

Это официальное видео Jetbrains PyCharm от John Lindquist (angular.js и jetbrains guru) - хорошая отправная точка, поскольку она показывает взаимодействие веб-сервиса, базы данных и angular.js внутри колбы.

Он строит клон pinterest с колбой, sqlalchemy, колба-беспокойный и угловой.js менее чем за 25 минут.

наслаждайтесь: http://www.youtube.com/watch?v=2geC50roans

22  
2014-03-22 02:16:10

редактировать новая руководство по стилю Angular2 предлагает аналогичную, если не ту же структуру гораздо более подробно.

ответ ниже целевых крупномасштабных проектов. Я потратил довольно много времени на размышления и эксперименты с несколькими подходами, поэтому я могу объединить некоторые серверные рамки (в моем случае Flask с App Engine) для внутренней функциональности вместе с клиентской платформой, такой как Angular. Оба ответа очень хороши, но я хотел бы предложить немного другой подход, который (по крайней мере, на мой взгляд) масштабируется более человеческим способом.

когда вы реализуете пример TODO, все довольно прямолинейно. Когда вы начинаете добавлять функциональность, хотя и небольшие приятные детали для улучшения пользовательского опыта, его не трудно заблудиться в хаосе стилей, javascript и т. д..

мое приложение начало расти довольно большой, так что мне пришлось сделать шаг назад и переосмыслить. Первоначально подход, предложенный выше, будет работа, имея все стили вместе и все 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
        |-- ...

и так далее.

если мы построим его так, мы можем обернуть каждый наш каталог в угловой модуль. И мы разделили наши файлы таким образом, что нам не нужно проходить через нерелевантный код, когда мы работаем с конкретным особенность.

бегун задачи, как грунт правильно настроенный, сможет найти и объединить и скомпилировать ваши файлы без особых хлопот.

17  
2016-08-31 15:56:36

другой вариант-полностью разделить их.

project
|-- server
|-- client

файлы, связанные с flask, находятся в папке сервера, а файлы, связанные с angularjs, - в папке клиента. Таким образом, будет легче изменить бэкэнд или фронт-энд. Например, вы, возможно, захотите, чтобы перейти из колбы в Джанго или AngularJS ReactJS, чтобы в будущем.

1  
2017-12-20 04:47:45

Я думаю, что важно определить, на каком конце вы хотите сделать большую часть обработки данных - передний конец или задний конец.
Если это передний конец, то идите с угловым рабочим процессом, что означает, что ваше приложение flask будет функционировать как больше api, где расширение, такое как flask-restful, закончится.

но если вы, как и я, делаете большую часть работы на бэкэнде, то идите со структурой колбы и только подключайте угловой ( или в моем случае vue.js) построить передний конец (когда обязательно)

0  
2017-09-08 02:18:01

Comments

    Ничего не найдено.
Click here to cancel reply.