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

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

Ответ 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) для сборки переднего конца (при необходимости)