Yii2: Простое приложение c AngularJS фронтендом. Подготовка

Для начала, подготовим рабочее окружение, скачаем все необходимые библиотеки и создадим шаблоны будущих приложений. Будем считать, что у нас есть 2 домена: client.local и server.local. Создадим для них корневые соответствующие корневые каталоги: client и server. И настроим наш веб-сервер. Примерная конфигурации для apache:

В дальнейшем будем работать с этими каталогами по отдельности.

Клиентская часть

Создадим в каталоге client подкаталоги assetscontrollersmodelsviews.

Структура, похожая на структуру basic приложения Yii 2.0, выбрана для простоты понимания. Рассмотрим ее:

  • assets — используемые сторонние библиотеки: angularjs и bootstrap;
  • controllers — контроллеры angularjs;
  • models — сервисы, работающие с нашим будущим серверным RESTful api;
  • views — шаблоны отображения данных, почти как в Yii.

Twitter Bootstrap

Скачиваем актуальную версию библиотеки с ресурса разработчиков http://getbootstrap.com/ и распаковываем в каталог assets:

Google AngularJS

Скачиваем актуальную версию с сайта http://angularjs.org/ и распаковываем в тот же каталог assets. В результате, мы получаем следующие каталоги:

Подключаем AngularJS и Bootstrap в HTML

Создадим файл client/index.html и опишем в нем подключение нужных библиотек:

Серверная часть

За основу возьмем простой шаблон Yii 2.0 приложения basic. Перейдем в каталог server и выполним команды:

Контроль

Проверим результаты подготовительной работы.

Открываем адрес http://client.local в любимом браузере. Мы должны увидеть пустое белое окно:

Yii2 angularjs application

А по адресу http://server.local, мы можем найти готовое Yii2 приложение basic:

Yii2 angularjs application

На сегодня все, а в следующий раз мы займемся доработкой этого приложения.

Введение;
Подготовка;
Серверная часть;
Клиентская часть 1;
Клиентская часть 2.

2 thoughts on “Yii2: Простое приложение c AngularJS фронтендом. Подготовка

  1. Сергей

    Зачем прописывать скрипты в layout. Что мешает подключить их через assets

    1. nix Автор записи

      В данном случае, точкой входа клиентского приложения является статичный файл index.html. Именно поэтому скрипты подключены в нем.
      В случае отрисовки клиентской части из yii, подключать файлы стилей и скриптов, конечно же, следует использованием ресурсов (assets).

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *