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

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

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

...
var yii2AngApp = angular.module('yii2AngApp', [
  'ngRoute',
  'yii2AngApp.site',
  'yii2AngApp.film'
]);
// рабочий модуль
var yii2AngApp_site = angular.module('yii2AngApp.site', ['ngRoute']);
var yii2AngApp_film = angular.module('yii2AngApp.film', ['ngRoute']);
...

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

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

'use strict';
yii2AngApp_film.factory("services", ['$http','$location','$route', 
    function($http,$location,$route) {
    var obj = {};
    obj.getFilms = function(){
        return $http.get(serviceBase + 'films');
    }    
    obj.createFilm = function (film) {
        return $http.post( serviceBase + 'films', film )
            .then( successHandler )
            .catch( errorHandler );
        function successHandler( result ) {
            $location.path('/film/index');            
        }
        function errorHandler( result ){
            alert("Error data")
            $location.path('/film/create')
        }
    };    
    obj.getFilm = function(filmID){
        return $http.get(serviceBase + 'films/' + filmID);
    }

    obj.updateFilm = function (film) {
        return $http.put(serviceBase + 'films/' + film.id, film )
            .then( successHandler )
            .catch( errorHandler );
        function successHandler( result ) {
            $location.path('/film/index');
        }
        function errorHandler( result ){
            alert("Error data")
            $location.path('/film/update/' + film.id)
        }    
    };    
    obj.deleteFilm = function (filmID) {
        return $http.delete(serviceBase + 'films/' + filmID)
            .then( successHandler )
            .catch( errorHandler );
        function successHandler( result ) {
            $route.reload();
        }
        function errorHandler( result ){
            alert("Error data")
            $route.reload();
        }    
    };    
    return obj;   
}]);

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

obj.createFilm = function (film) {
        return $http.post( serviceBase + 'films', film )
        ...
    };

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

obj.getFilm = function(filmID){
        return $http.get(serviceBase + 'films/' + filmID);
    }

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

obj.updateFilm = function (film) {
        return $http.put(serviceBase + 'films/' + film.id, film )
         ...
    };

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

obj.deleteFilm = function (filmID) {
        return $http.delete(serviceBase + 'films/' + filmID)
        ...    
    };

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

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

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

'use strict';
yii2AngApp_film.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/film/index', {
        templateUrl: 'views/film/index.html',
        controller: 'index'
    })
    .when('/film/create', {
        templateUrl: 'views/film/create.html',
        controller: 'create',
        resolve: {
            film: function(services, $route){
                return services.getFilms();
            }
        }
    })
    .when('/film/update/:filmId', {
        templateUrl: 'views/film/update.html',
        controller: 'update',
        resolve: {
          film: function(services, $route){
            var filmId = $route.current.params.filmId;
            return services.getFilm(filmId);
          }
        }
    })
    .when('/film/delete/:filmId', {
        templateUrl: 'views/film/index.html',
        controller: 'delete',
    })
    .otherwise({
        redirectTo: '/film/index'
    });
}]);

yii2AngApp_film.controller('index', ['$scope', '$http', 'services', 
    function($scope,$http,services) {
    $scope.message = 'Everyone come and see how good I look!';
    services.getFilms().then(function(data){
        $scope.films = data.data;
    });    
    $scope.deleteFilm = function(filmID) {
        if(confirm("Are you sure to delete film number: " + filmID)==true && filmID>0){
            services.deleteFilm(filmID);    
            $route.reload();
        }
    };
}])
.controller('create', ['$scope', '$http', 'services','$location','film', 
    function($scope,$http,services,$location,film) {
    $scope.message = 'Look! I am an about page.';
    $scope.createFilm = function(film) {
        var results = services.createFilm(film);
    }  
}])
.controller('update', ['$scope', '$http', '$routeParams', 'services','$location','film', 
    function($scope,$http,$routeParams,services,$location,film) {
    $scope.message = 'Contact us! JK. This is just a demo.';
    var original = film.data;
    $scope.film = angular.copy(original);
    $scope.isClean = function() {
        return angular.equals(original, $scope.film);
    }
    $scope.updateFilm = function(film) {    
        var results = services.updateFilm(film);
    } 
}]);

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

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

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

client/views/film/index.html

<div>
    <h1>Каталог фильмов</h1>    
    <p>{{ message}}</p>
    <div ng-show="films.length > 0">
        <a class="btn btn-primary" href="#/film/create">
            <i class="glyphicon glyphicon-plus"></i> Добавить
        </a>
        <table class="table table-striped table-hover">
            <thead>
            <th>Название</th>
            <th>Режиссер</th>
            <th>Описание</th>
            <th>Год</th>
            <th style="width:80px;">Действия&nbsp;</th>
            </thead>
            <tbody>
                <tr ng-repeat="data in films">
                    <td>{{data.title}}</td>
                    <td>{{data.director}}</td>
                    <td>{{data.storyline}}</td>
                    <td>{{data.year}}</td>
                    <td>
                        <a class="btn btn-primary btn-xs" href="#/film/update/{{data.id}}">
                            <i class="glyphicon glyphicon-pencil"></i>
                        </a> 
                        <a class="btn btn-danger btn-xs" ng-click="deleteFilm(data.id)">
                            <i class="glyphicon glyphicon-trash"></i>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div ng-show="films.length == 0">
        Каталог фильмов пуст
    </div>
</div>

client/views/film/create.html

<div>
    <h1>Каталог фильмов: добавление фильма</h1>

    <p>{{ message}}</p>
    <form role="form" name="myForm">
        <div class= "form-group" ng-class="{error: myForm.title.$invalid}">
            <label> Название </label>
            <div>
                <input name="title" ng-model="film.title" type= "text" class= "form-control" placeholder="Название фильма" required/>
                <span ng-show="myForm.title.$dirty && myForm.title.$invalid" class="help-inline">Название обязательно</span>
            </div>
        </div>
        <div class= "form-group">
            <label> Описание </label>
            <div>
                <textarea name="storyline" ng-model="film.storyline" class= "form-control" placeholder= "Описание фильма"></textarea>
            </div>
        </div>
        <div class= "form-group" ng-class="{error: myForm.director.$invalid}">
            <label> Режиссер </label>
            <div>
                <input name="director" ng-model="film.director" type= "text" class= "form-control" placeholder="Режиссер" required/>
                <!--<span ng-show="myForm.director.$dirty && myForm.director.$invalid" class="help-inline">Режиссер обязателен</span>-->
            </div>
        </div>
        <div class= "form-group" ng-class="{error: myForm.year.$invalid}">
            <label> Год </label>
            <div>
                <input name="year" ng-model="film.year" type= "text" class= "form-control" placeholder="Год год выпуска" required/>
                <span ng-show="myForm.year.$dirty && myForm.year.$invalid" class="help-inline">Год обязателен</span>
            </div>
        </div>

        <a href="#/film/index" class="btn btn-default">Cancel</a>
        <button ng-click="createFilm(film);" 
                ng-disabled="myForm.$invalid"
                type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

client/views/film/update.html

<div>
    <h1>Каталог фильмов: редактирование фильма</h1>

    <p>{{ message}}</p>
    <form role="form" name="myForm">
        <div class= "form-group" ng-class="{error: myForm.title.$invalid}">
            <label> Название </label>
            <div>
                <input name="title" ng-model="film.title" type= "text" class= "form-control" placeholder="Название фильма" required/>
                <span ng-show="myForm.title.$dirty && myForm.title.$invalid" class="help-inline">Название обязательно</span>
            </div>
        </div>
        <div class= "form-group">
            <label> Описание </label>
            <div>
                <textarea name="storyline" ng-model="film.storyline" class= "form-control" placeholder= "Описание фильма"></textarea>
            </div>
        </div>
        <div class= "form-group" ng-class="{error: myForm.director.$invalid}">
            <label> Режиссер </label>
            <div>
                <input name="director" ng-model="film.director" type= "text" class= "form-control" placeholder="Режиссер" required/>
                <!--<span ng-show="myForm.director.$dirty && myForm.director.$invalid" class="help-inline">Режиссер обязателен</span>-->
            </div>
        </div>
        <div class= "form-group" ng-class="{error: myForm.year.$invalid}">
            <label> Year </label>
            <div>
                <input name="year" ng-model="film.year" type= "text" class= "form-control" placeholder="Год выпуска" required/>
                <span ng-show="myForm.year.$dirty && myForm.year.$invalid" class="help-inline">Year Required</span>
            </div>
        </div>

        <a href="#/film/index" class="btn btn-default">Cancel</a> 
        <button ng-click="updateFilm(film);" 
                ng-disabled="isClean() || myForm.$invalid"
                type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

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

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

...
<ul class="nav navbar-nav navbar-right">
    <li><a href="#/"><i class="glyphicon glyphicon-home"></i> Главная</a></li>
    <li><a href="#/film/index"><i class="glyphicon glyphicon-film"></i> Каталог фильмов</a></li>
...

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

...
    <script src="models/film.js"></script>
    <script src="controllers/film.js"></script>
...

Готово

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

Заключение

Задача минимум выполнена: мы можем легко добавлять, редактировать и удалять нужные элементы каталога. Конечно, это примитивное приложение, однако, оно было создано с целью показать, как легко и быстро, буквально за 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.