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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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