Перевод статьи Глена Джексона Tutorial: Using AngularJS with Django
~~Я надеялся написать быстрое руководство, что бы вы начали использовать Angular с Django~~ которое становилось руководством по поглощению Red Bull. Мои извинения, если оно получится небрежным к концу!
Почитав посты на тему совместного использования Django и AngularJS, я чувтсвовал, что большинство из них были “велосипедными”. Хотя пример кода, который здесь приводится, сырой, он должен показать, как я использую их в проектах.
Модели
Давайте начнем с типичной модели
1 2 3 |
|
Ок, пока ничего особенного. Все что вы сделали - это создали простую модель, которая содержит основные сведения о работе.
REST API (Tastypie)
AngularJS построен так, что бы использовать веб-сервисы, поэтому вам нужен способ плучать данные только что созданной модели Job
.
Для Django есть хороший выбор вариантов для создания RESTful API. TastyPie является отличным REST фреймворком для Django. Он невероятно мощный, но простой в установке и использовании. Однако, по-моему, таких же результатов можно добиться используя Django REST framework, или даже самостоятельно создав ответы на запросы API средствами Django. Выбор остается за вами. В этом уроке мы будем использовать TastyPie.
Если вам не знаком TastyPie, ознакомьтесь с документацией. Я не буду вдаваться в подробности относительно установки. И предполагаю, он уже установлен, добавлен в INSTALLED_APPS
и вы готовы продолжить.
Сперва, вам нужно создать ресурс для модели Job
. TastyPie использует понятие ресурс. Это описывается как посредник между конечным пользователем и объектом (в данном случае это будет модель Job
).
Начните с создания соответствующего ресурса для модели Job
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
Насколько я помню, документация TastyPie предлагает назвать файл ресурсов как api.py. Так же предлагаю и я, но это не обязательно. Вы можете назвать этот файл как угодно, но это хорошо для сохранения постоянства.
Есть несколько вещей, происходящих в JobResource
, которые выходят за рамки данного руковосдства. Но, я просто хотел бы обратить внимание на то, как JobResource
наследует ModelResource
. Вы используете TastyPie с ORM Django (модель Job
). Другими словами, многие из основных API ORM вым доступны.
TastyPie так же может обрабатывать данные и без ORM. Расширяя и наследуя ресурс, вы так же можете получить все вкусности TastyPie для API которое захотите предложить, но без привязки к ORM. Это особенно полезно при совершении запросов, не поддерживающих ORM, NoSQL баз как описано в документации.
Пока что вы создали модель данных (Job
) и способ взаимодействия с нею (JobResource
). Далее, вам нужен способ подключения к ресурсу через определеный URL, что в конечном итоге позволит AnagularJS его использовать. В Django вы можете сделать это используя URL роутер. Просто подключите экземпляр ресурса к определенному URL:
1 2 3 4 5 6 7 8 9 10 |
|
Аттрибут resource_name
, определенный в JobResource
- это название ресурса в URL. По нему вы знаете где находится работающее API для ресурса JobResource
. Проверьте что все это работает, запустив локальный сервер и посетив адрес http://127.0.0.1:8000/api/v1/job/?format=json
Теперь у вас есть рабочее API для вашей модели Job
. Просто.
Формы
Перед тем как начать использовать AngularJS нам нужно сделать форму для Job
с использованием Django. Позже, эта форма позволит вам редактировать данные модели Job
в одностраничном приложении. Я знаю о чем вы думаете: “Почему в Django”?
Одним из приципов в Django является прицип “на повторяйся” (DRY). Так что не имеет смысла создавать формы с помощью HTML для AngularJS, а затем делать то же для Django. К тому же Django хорошо справляется с соданием форм. Возможно у вас есть несколько форм, которые нужно преобразовать, так почему бы не сделать это автоматическим? Посмотрите в сторону django-angular. Это один классный пакет, познакомившись с которым вы будете рады (я знаю о чем говорю).
django-angular - это набор утилит, которые помогают упростить интеграцию Django и AngularJS с помощью повторно используемых компонентов
Опять же, здесь я не буду вдаваться в подробности относительно установки и настройки. Я предлагаю вам ознакомиться с документацией и начать использовать django-angular прямо сейчас! Достаточно сказать, что один из его многочисленных компонентов позволит вам использовать формы Django для валидации в AngularJS. Объединив его с пакетом crispy forms
вы получите мощное решение “все-в-одном” - вот за что я люблю Django и его сообщество.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
AngularJS
Для простоты сделайте 3 новых шаблона, расположенных так:
1 2 3 4 |
|
Это предполагает, что приложение jobs
установлено и настроено. Базовый шаблон будет выглядеть примерно так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
Django-angular предлагает полезные шаблонные теги, которые включат необходимый для вас JavaScript. Я рекомендую использовать CDN и загрузить туда файлы, какие можно. Это дает географические и пропускные преимущества.
Теперь создадим шаблон страницы, который будет рендерится нашим проектом. index.html будет служить главной страницей нашего одностраничного приложения, и позже может быть использован для всех CRUD (Create Read Update Delete) представлений.
1 2 3 4 5 6 7 8 9 10 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
|
Шаблон и JS код выше очень простые, наследуется от базового шаблона. Есть несколько аттрибутов, которые вы возможно не видели прежде и в которых нужно будет разобраться.
Первый из них: ng-app="JobApp"
. Без этого тега процесс AngularJS не запустится. Эта директива говорит фреймворку AngularJS какой элемент является корневым в приложении. Все, что вы добавите внутрь этого элемента будет частью шаблона под управлением AngularJS.
Далее, посмотрите на скрипт, который вы включили в index.html
. Это скрипт app.js
, который является модулем AngularJS. Модуль AngularJS представляет собой набор функций, которые выполняются когда приложение загружено.
1
|
|
Строка, расположенная выше, создает модуль JobApp
. В index.html вы уже создали его экземпляр с помощью директивы ng-app="JobApp"
. Основное, что здесь делается: сообщается AngularJS, что модуль app.js
управляет содержимым этого тега.
Фактически, вы можете установить аттрибут ng-app
для любого элемента в DOM. Например, если вы хотите, что бы часть шаблона не управлялась через Angular, вы можете сделать так:
1 2 3 4 |
|
app.config
в app.js также показывает начало вашей URL-маршрутизации. AngularJS поддерживает URL-маршрутизацию по умолчанию через сервис $route
в ядре Angular, но этого недостаточно и это имеет некоторые ограничения.
Один из модулей, которые вы включили, это AngularUI роутер ui.route
. AngularUI роутер - это дополнительный модуль URL-маршрутизации для Angular, организованный в контексте состояний, которые опционально могуть иметь прикрепленные реакции на определенные URL’ы.
В этом руководстве предусмотрено одно состояние, которое назыаается new
, но вы можете определять много различных состояний для вашего приложения. Вы даже можете добавить поведение для того случая, когда ни одного состояния не обнаружено:
1 2 3 4 5 6 7 8 |
|
Если вы не знакомы с этим, то я предлагаю почитать о AngularUI Router после того как закончите с этим руководством.
Последний элемент в index.html, с которым вам нужно разобраться - это ui-view
. Это тоже относится к AngularUI Router. Директива ui-view
определяет куда разместь ваш шаблон.
Последний шаблон, который нужно создать - /jobs/new.html. Он будет содержать простую форму, которую вы сделали ранее с использованием django-angular.
1 2 3 |
|
Теперь вам нужно всего лишь представление и URL для подключения формы.
1 2 3 4 5 6 7 8 9 10 11 12 |
|
1 2 3 4 5 6 7 8 9 10 11 |
|
Теперь отправьте ваш браузер по адресу http://127.0.0.1:8000/job/#new и вы должны увидеть форму для добавления работы в вашем новом одностраничном приложении.
Последний шаг - сделать возможным отправку POST-данных при нажатии на кнопку с ng-click="submitJob()"
. Измените контроллер как показано ниже, используя restangular.
RestAngular - это модуль для AngularJS упрощает работу с GET, DELETE и UPDATE запросами, используя минимум клентского кода. Он идеально подходит для любого веб приложения, которое получает данные через REST API.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
|
Что дальше
Материала слишком много для одного поста в блоге. Дальше - практиковаться и изучать видео уроки по AngularJS.