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

На данный момент мы имеем готовое RESTful api приложение в серверной части и простое AngularJS приложение в клиентской части. Дело за малым, обеспечить связь второго с данными из первого.

Доработаем главный модуль app.js

Добавим описание модуля, обеспечивающего работу с данными о фильмах, yii2AngApp.film:

Модель данных для фильмов

Создадим новый файл client/models/film.js, он будет отвечать за crud операции через rest. Функционально, он будет аналогом модели в yii2.

Функции obj.getFilm, obj.createFilm, obj.updateFilm и другие, являются транспортом для соответствующих crud операций через rest. Для примера, код:

Создает новый фильм путем запроса методом POST.

Получает данные фильма с заданным id методом запроса GET.

Вносит изменения в данные фильма методом запроса UPDATE.

Удаляет запись с соответствующим id методом запроса DELETE.

Контроллер модуля yii2AngApp_film

Создадим новый файл client.local/controllers/film.js.

Структура аналогична контроллеру site. Сначала описываем маршруты и обслуживающие их функции и представления.

Шаблоны для модуля yii2AngApp_film

Файлы шаблонов будем хранить в каталоге client/views/film. Шаблоны будут содержать html разметку и элементы данных нашего angularjs приложения.

client/views/film/index.html

client/views/film/create.html

client/views/film/update.html

Последние штрихи

Не забываем добавить ссылку на каталог в меню:

и подключить модель и контроллер каталога:

Готово

Проверяем работу нашего каталога фильмов:

Yii2 AngularJS simple application

Заключение

Задача минимум выполнена: мы можем легко добавлять, редактировать и удалять нужные элементы каталога. Конечно, это примитивное приложение, однако, оно было создано с целью показать, как легко и быстро, буквально за 20-30 минут, можно собрать современное html5 приложение с использованием Yii 2.0, AngularJS и немножко Twitter Bootstrap.

При подготовке использованы материалы:

  1. The Definitive Guide to Yii 2.0;
  2. AngularJS Developer Guide;
  3. How To Create Single Page Application in minutes! with AngularJs 1.3 and Yii 2.0.

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

      1. вообще неправильно маршруты в js-файлах хардкодить. а поменяется если что-то в url-менеджере. добавите/уберете суффикс, да мало ли что. и что все в js вручную переписывать? о_О

    1. Похоже на проблему CORS. Если браузер хром — попробуйте другой.
      Проверьте, передается ли заголовок Access-Control-Allow-Origin в запросе. Пример.

  1. Почему после добавления контроллера {{ message}} на главной странице (контроллер site) стал выводить message из index контроллера film $scope.message = ‘Everyone come and see how good I look!’;

    В чем может быть проблема?

  2. Здравствуйте, всё заработало с первого раза.
    Но есть некоторые моменты.

    При удалении фильма ругается на то, что не определён роут.

    Консоль:

    ReferenceError: $route is not defined
    at r.$scope.deleteFilm (http://site.lock/controllers/film.js:48:17)
    at fn (eval at (http://site.lock/assets/angular/angular.min.js:216:110), :2:382)
    at Jc.(anonymous function).compile.d.on.e (http://site.lock/assets/angular/angular.min.js:257:177)
    at r.$get.r.$eval (http://site.lock/assets/angular/angular.min.js:133:446)
    at r.$get.r.$apply (http://site.lock/assets/angular/angular.min.js:134:175)
    at HTMLAnchorElement. (http://site.lock/assets/angular/angular.min.js:257:229)
    at Of (http://site.lock/assets/angular/angular.min.js:35:394)
    at HTMLAnchorElement.d (http://site.lock/assets/angular/angular.min.js:35:341)

    Подскажите пожалуйста как его определить

  3. Подскажите как сделать авторизацию при таком подходе (полное разделение клиентской части на ангуляре и серверное на пхп)?

      1. Общая схема такая:
        1. Клиентское приложение (angular) запрашивает у пользователя логин/пароль;
        2. Клиентское приложение, на основании логина и пароля, получает от сервера (yii2) авторизационный токен и сохраняет его;
        3. В каждый запрос к серверу, клиентское приложение включает авторизационный токен;
        4. На основании полученного авторизационного токена, сервер определяет пользователя и работает дальше/отказывает, если недостаточно прав или не верный токен.

        Для конкретной реализации можно взять https://jwt.io (есть библиотеки под все современные языки).
        В приложении Yii2 нужно для класса, реализующего \yii\web\IdentityInterface, реализовать метод findIdentityByAccessToken().

  4. Круто! То что нужно для изучения REST с помощью Angular и Yii2. Автору респект! Отличный материал! Правда кое где по коду замечал косячки, исправлял у себя и всё получилось! Спасибо!

  5. Классный материал! Но вот есть один момент. Когда создаю вторую страницу и размещаю на ней данные из другой таблицы, но той же базы, то каталог с фильмами перестает грузиться. В консоли сразу видно, что всегда прогружаются данные для второй таблицы. Как это можно исправить?

      1. Получилось добавить еще одну таблицу. на другую вкладку.Проблема в том, что при добавлении в зависимость модулей, каждый последующий перезаписывает предыдущий. Исправлял так: в app.js убрал модуль yii2AngApp.film, из контроллера film.js перенес данные в site.js(Т.е прописать в site.js пути и функции для своего view). После создал модель site.js и данные из модели film.js перенес туда. Все, теперь site.js поддерживает по этому алгоритму добавление неограниченного количества таблиц, просто нужно дописывать пути в конфигах, добавлять новые контроллеры и закидывать в модель функции для новых таблиц.

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

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