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

Я досить новий у всьому шаленстві на базі клієнта MV *. Це не повинно бути AngularJS, але я вибрав це, тому що він відчуває себе більш природним, ніж будь-який нокаут, Ембер або хребет. Як би там не було? Чи починають люди розробляти клієнтську програму в AngularJS, а потім підключати її до задньої частини?

Або навпаки, спочатку побудувавши бек-енд у Django, Flask, Rails, а потім приєднавши до нього додаток AngularJS? Чи є "правильний" спосіб це зробити, чи це зрештою лише особисті переваги?

Я також не впевнений, чи будувати мій проект відповідно до колби чи 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 для спілкування з базою даних за допомогою API Restful. Не було потреби мати веб-каркас на задньому плані.

Можливо, я просто жахливо розгублений, і 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-контролери повернути заздалегідь задані зразкові дані (лише тимчасові настройки). Коли ви будете готові, реалізуйте API RESTful та підключіть його до свого кутового додатка з angular-resource.js.

EDIT: Я зібрав шаблон програми, який хоч і трохи складніший, ніж те, що я описав вище, ілюструє, як можна створити додаток за допомогою 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-подібні додатки, тоді як колба дає можливість робити як веб-додатки старого стилю, так і створювати RESTful API. У кожного підходу є переваги та недоліки, тому це дійсно залежить від того, що ви хочете зробити. Якщо ви дасте мені деяку інформацію, я можу дати подальші рекомендації.

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

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

Ще один варіант - повністю розділити два.

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

Файли, пов'язані з колбою, перебувають у папці сервера, а файли, пов'язані з angularjs, під папкою клієнта. Таким чином, буде легше змінити бекенд або фронт-енд. Наприклад, ви можете в майбутньому перейти з колби на Django або AngularJS на ReactJS.

Я думаю, що важливо визначити, в якому кінці ви хочете зробити більшу частину обробки даних - передній або задній.
Якщо це передній кінець, тоді перейдіть з кутовим робочим процесом, а це означає, що додаток для колби буде функціонувати як більше api, де закінчиться розширення, схоже на колбу.

Але якщо я, як і я, ви виконуєте більшу роботу над бекендом, тоді перейдіть зі структурою колби і підключіть лише кутовий (або в моєму випадку vue.js) для створення переднього кінця (коли це необхідно)