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

Ответ 1

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

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

И как сказал btford, если вы используете приложение Angular, вам нужно сосредоточиться на использовании клиентских шаблонов Angular и избегать шаблонов на стороне сервера. Использование render_template ('index.html') заставит Flask интерпретировать ваши шаблоны Angular как шаблоны 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-контроллеры вернуть предопределенные данные образца (только временная настройка). Когда вы будете готовы, внедрите API RESTful и подключите его к вашему приложению Angular с помощью angular -resource.js.

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

Ответ 2

Вы можете начать с обоих концов.

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

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

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

Ответ 3

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

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

Enjoy: http://www.youtube.com/watch?v=2geC50roans

Ответ 4

изменить. Новый Angular2 руководство по стилю предлагает аналогичную, если не такую ​​же структуру, в гораздо большем количестве деталь.

Ниже приведен ответ на масштабные проекты. Я потратил довольно много времени на размышления и эксперименты с несколькими подходами, поэтому я могу объединить некоторые серверные рамки (Flask with App Engine в моем случае) для функциональных возможностей back-end вместе с инфраструктурой на стороне клиента, например 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
        |-- ...

и т.д.

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

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

Ответ 5

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

project
|-- server
|-- client

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

Я написал учебник по использованию Flask и AngularJS вместе. Вы можете проверить это - http://tutsbucket.com/tutorials/building-a-blog-using-flask-and-angularjs-part-1/

Ответ 6

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

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