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


226

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

Ответы:


171

Я бы начал с организации приложения 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


1
Я столкнулся с этой проблемой: контекст файла не сохранился, когда я пытался обслуживать index.html статически. Я справился с этим, добавив мой статический файл в app.root_path. В противном случае, это хорошее место.
Макото

Можете ли вы объяснить больше о «Обратите внимание, что использование send_file () означает, что файлы будут кэшироваться, поэтому вы можете использовать make_response () вместо этого, по крайней мере, для разработки»? Спасибо
нам

Как вы управляете сборками, такими как использование grunt с таким подходом?
Саад Фарук

1
@nam, я думаю, что он имеет в виду, что если вы вносите небольшие изменения в js и т. д. во время отладки, вы не увидите эффекта в браузере, потому что send_file кэширует файлы, обслуживаемые с тайм-аутом = SEND_FILE_MAX_AGE_DEFAULT. Есть способы переопределить это, но гораздо проще использовать make_response, пока вы не будете готовы к развертыванию.
ars-longa-vita-brevis

@ SaadFarooq Я не рассматриваю ворчание здесь, потому что это немного усложняет ситуацию. Если вы готовы использовать что-то вроде Grunt, то имеет смысл создать отдельный репозиторий для внешнего кода, затем собрать все вместе, скопировать и вставить его в репозиторий Flask или отправить его в CDN и сослаться на него. из index.html.
Райан

38

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

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

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

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


26
+1 - но я бы не сказал , что колба ориентирован на старого стиля веб - приложений - это обеспечивает все хелперы вам нужно , чтобы использовать его в качестве веб - API бэкэндом тоже ;-) Существует также Колба-Restless , если вы хотите быть возможность с легкостью сгенерировать JSON-обслуживающий API для вашего веб-приложения с помощью Flask-SQLAlchemy - только к вашему сведению :-)
Шон Виейра

Хорошая точка зрения! Я не особенно знаком с Flask; спасибо за предоставление некоторого опыта по этому вопросу.
Btford

3
также ознакомьтесь с нашим руководством, в котором показано, как создавать приложения с использованием angular и все инструменты, которые мы предоставляем: docs.angularjs.org/tutorial
Игорь Минар,

2
Мне кажется справедливым поместить папку app из angular-phonecat в статическую папку. Но я думаю, что файл index.html должен быть помещен в папку шаблонов minitwit. Папки css и img должны быть перемещены в «статические».
Незо

22

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

Он создает клон с интересом с помощью фляги, sqlalchemy, фляги-беспокойства и angular.js менее чем за 25 минут.

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


17

редактирование : новое руководство по стилю 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
        |-- ...

и так далее.

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

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


1

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

проект
| - сервер
| - клиент

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


Кевин: Вы можете просмотреть ссылку, которая ведет на страницу входа в Facebook.
RussellB

0

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.