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

Question

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

228

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

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

Я также не уверен, следует ли структурировать мой проект в соответствии с Flask или AngularJS? сообщества.

Например, приложение Minask для 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 to-do они используют MongoLab для связи с базой данных с помощью Restful API. Не было необходимости иметь веб-фреймворк на back-end.

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

Sahat Yalkabov 17 июль 2012, в 12:06

Источник

Теги:

javascript

python

angularjs

flask

6 ответов

36

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

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

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

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

btford 17 июль 2012, в 20:02

26

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

Хорошая точка зрения! Я не особенно знаком с Flask; спасибо за предоставление некоторого опыта по этому вопросу.
btford 18 июль 2012, в 19:11
3

также ознакомьтесь с нашим руководством, в котором показано, как создавать приложения с использованием angular и все инструменты, которые мы предоставляем: docs.angularjs.org/tutorial
Igor Minar 24 июль 2012, в 19:46
2

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

Показать ещё 2 комментария

23

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

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

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

Bijan 06 фев. 2014, в 19:49

17

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

topless 02 сен. 2013, в 11:55

1

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

project
|-- server
|-- client

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

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

John Kevin M. Basco 08 март 2015, в 04:42

0

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

0

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

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

Kudehinbu Oluwaponle 08 сен. 2017, в 00:41

Ещё вопросы

+1 - но я бы не сказал , что колба ориентирован на старого стиля веб - приложений - это обеспечивает все помощники, нужно , чтобы использовать его в качестве веб - API бэкэндом тоже ;-) Существует также Колба-Restless , если вы хотите быть возможность с легкостью генерировать JSON-обслуживающий API для вашего веб-приложения с помощью Flask-SQLAlchemy - просто к вашему сведению :-)
Хорошая точка зрения! Я не особенно знаком с Flask; спасибо за предоставление некоторого опыта по этому вопросу.
также ознакомьтесь с нашим руководством, в котором показано, как создавать приложения с использованием angular и все инструменты, которые мы предоставляем: docs.angularjs.org/tutorial
Мне кажется справедливым поместить папку app из angular-phonecat в статическую папку. Но я думаю, что файл index.html должен быть помещен в папку шаблонов minitwit. Папки css и img должны быть перемещены в «статические».
Кевин: Вы можете просмотреть ссылку, которая ведет на страницу входа в Facebook.

Ryan · Accepted Answer · 2013-02-28T21-48-00.000Z

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

Я столкнулся с этой проблемой: контекст файла не сохранился, когда я пытался обслуживать index.html статически. Я app.root_path с этим, app.root_path свой статический файл app.root_path . В противном случае, это хорошее место.
Можете ли вы объяснить больше о «Обратите внимание, что использование send_file () означает, что файлы будут кэшироваться, поэтому вы можете использовать make_response () вместо этого, по крайней мере, для разработки»? Спасибо
Как вы управляете сборками, такими как использование grunt с таким подходом?
@nam, я думаю, что он имеет в виду, что если вы вносите небольшие изменения в js и т. д. во время отладки, вы не увидите эффекта в браузере, потому что send_file кэширует файлы, обслуживаемые с тайм-аутом = SEND_FILE_MAX_AGE_DEFAULT. Есть способы переопределить это, но гораздо проще просто использовать make_response, пока вы не будете готовы к развертыванию.
@ -Art пожизненный-коротко, что является правильным.
@ SaadFarooq Я не рассматриваю ворчание здесь, потому что это немного усложняет ситуацию. Если вы готовы использовать что-то вроде Grunt, то имеет смысл создать отдельный репозиторий для кода переднего плана, затем собрать все вместе, скопировать и вставить его в репозиторий Flask или отправить его в CDN и сослаться на него. из index.html.
как насчет шаблонов, которые вы хотите включить в ng-include? это должно быть в статических шаблонах или в каком-то другом месте?
Угловые шаблоны известны как частичные. Если вы включаете какие-либо шаблоны, я бы положил их в эту папку.
В чем преимущество предоставления угловых html-файлов с помощью flask, а не напрямую через сервер?
что вы имеете в виду "Использование render_template ('index.html') заставит Flask интерпретировать ваши угловые шаблоны как шаблоны jinja, поэтому они не будут правильно отображаться."? Вы имеете в виду, как angular и jinja2 делят фигурные скобки? Я считаю, что jinja2 можно настроить на использование синтаксиса. Я понимаю, почему вы не хотите использовать его вообще. Но я не уверен, почему я должен держаться подальше от использования render_template.
Также, вы можете объяснить, как make_response сравнивается с send_static_file? Я видел, как они оба использовали для достижения одинаковых результатов.
Вы можете использовать render_template, если хотите. Просто оберните любое угловое содержимое в {% raw%} {% endraw%}, и Flask не будет отображать этот бит.
Этот шаблон проекта великолепен. Спасибо за ссылку!