Yii2: Простое приложение c AngularJS фронтендом. Клиентская часть 1

Ну что же, серверная часть готова, самое время взяться за клиентскую.

Пользовательский интерфейс мы создадим используя js фреймворк angelarjs (функционал) и css фреймворк twitter bootstrap (интерфейс).

Одностраничное приложение

Вся работа с клиентской частью приложения будет осуществляться через уже созданный нами файл client/index.html, который нам и отдает веб-сервер при открытии http://client.local.

Описание приложения AngularJS

Добавим атрибут  ng-app тегу  html. Назовем наше приложение yii2AngApp.

Контроллер AngularJS по-умолчанию

Добавим атрибут ng-controller  тегу body . Сам контроллер назовем index .

Главное меню

Добавим основную разметку интерфейса приложения внутри тега body:

Класс navbar используется для отображения главного меню. Блок <div id="main" class="container">  будет контейнером для динамического содержимого. А footer , как мы можете догадаться, это просто футер.

Основной модуль

В основном модуле мы опишем настройки и компоненты приложения. Назовем новый файл client/app.js  и наполним его:

Теперь маршрут по-умолчанию /site/index  будет обрабатываться модулем yii2AngApp.site .

Модуль yii2AngApp.site

Создадим новый файл client/controllers/site.js и опишем в нем контроллер модуля yii2AngApp.site .

Получился контроллер, очень похожий на SiteController из yii2 приложения:

Мы описали маршруты, их контроллеры и шаблоны отображения.

  • templateUrl  — внешний html файл, использующийся для отображения содержимого, аналогичен представлениям в Yii 2.0;
  • controller — контроллер, который подготовит данные для отображения, аналогично yii контроллеру.

Последний блок .otherwise  указывает на действие при отсутствии маршрута.

Рассмотрим еще один фрагмент нашего контроллера:

Объект $scope  — область видимости в angularjs приложении, в данном случае, это все теги внутри тега с атрибутом ng-app .

$scope.message  — переменная, которая содержит сообщение для отображения представлением views/site/index.html.

Подключаем готовые модули

Свеже созданные модули подключаются в файле client/index.html как простые js скрипты:

Шаблоны отображения данных

Создадим файлы шаблонов, используемых контроллером.

client/views/site/index.html

client/views/site/about.html

client/views/site/contact.html

Мы сделали наброски представлений, простые болванки для соответствующих страниц. Настало время проверить в действии магию angularjs.

Контроль

Откроем в браузере адрес http://client.local. Как мы можем убедиться, простое фронтенд angularjs приложение уже работает:

Простое angularjs приложение

 

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

One thought on “Yii2: Простое приложение c AngularJS фронтендом. Клиентская часть 1”

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

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