Controller untuk SPA dengan angularjs

bootstrap.php

<?php
/**
 * file @views/test-angular/bootstrap.php
 */

use dee\angular\Angular;

/* @var $this yii\web\View */
?>

<?=
Angular::widget([
    'routes' => [
        '/' => [
            'view' => 'index',
            'controller' => 'IndexCtrl', // optional
        ],
        '/view/:id' => [
            'view' => 'view',
            'di' => [],
        ],
        '/edit/:id' => [
            'view' => 'edit',
            'di' => [],
        ],
        '/create' => [
            'view' => 'create',
            'di' => [],
        ],
    ]
])?>
<?php
$js = <<<JS
    dApp.factory('Rest', function () {
        var NAME = '_test';
        var s = localStorage.getItem(NAME);
        var items = s ? JSON.parse(s) : {};

        return {
            all: function () {
                return items;
            },
            get: function (id) {
                return items[id];
            },
            save: function (item) {
                var keys = Object.keys(items);
                var id = 1;
                if(keys.length){
                    id = keys[keys.length-1]*1 + 1;
                }
                items[id] = item;
                localStorage.setItem(NAME,JSON.stringify(items));
                return id;
            },
            update: function (id, item) {
                items[id] = item;
                localStorage.setItem(NAME,JSON.stringify(items));
            },
            remove: function (id){
                delete items[id];
                localStorage.setItem(NAME,JSON.stringify(items));
            }
        };
    });
JS;

$this->registerJs($js, \yii\web\View::POS_END);

create.php

<?php
/**
 * file @views/test-angular/create.php
 */

use dee\angular\Angular;

/* @var $this yii\web\View */
/* @var $angular Angular */
?>
<div>
    Name : <input type="text" ng-model="item.name"><br>
    Value : <input type="text" ng-model="item.value"><br>
    <button ng-click="save()">Save</button>
</div>

<?php $angular->beginScript() ?>
<script>
$location = $injector.get('$location');
Rest = $injector.get('Rest');
$scope.item = {};
$scope.save = function () {
    id = Rest.save($scope.item);
    $location.path('/view/' + id)
}
</script>
<?php
$angular->endScript();

edit.php

<?php
/**
 * file @views/test-angular/edit.php
 */

use dee\angular\Angular;

/* @var $this yii\web\View */
/* @var $angular Angular */
?>
<div>
    <b>{{id}}</b><br>
    Name : <input type="text" ng-model="item.name"><br>
    Value : <input type="text" ng-model="item.value"><br>
    <button ng-click="save()">Save</button>
</div>

<?php $angular->beginScript() ?>
<script>
$location = $injector.get('$location');
$routeParams = $injector.get('$routeParams');
Rest = $injector.get('Rest');

$scope.id = $routeParams.id;
$scope.item = Rest.get($scope.id);

$scope.save = function () {
    id = Rest.update($scope.id, $scope.item);
    $location.path('/view/' + $scope.id)
}
</script>
<?php
$angular->endScript();

index.php

<?php
/**
 * file @views/test-angular/index.php
 */

use dee\angular\Angular;

/* @var $this yii\web\View */
/* @var $angular Angular */
?>
<a href="#/create" class="btn btn-success">New Item</a><br>
<table width="100%">
    <thead>
        <tr>
            <th width="10%">ID</th>
            <th width="60%">NAME</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="(id,item) in items">
            <td>{{id}}</td>
            <td>{{item.name}}</td>
            <td>
                <a ng-href="#/view/{{id}}"><i class="glyphicon glyphicon-eye-open"></i></a>
                <a ng-href="#/edit/{{id}}"><i class="glyphicon glyphicon-pencil"></i></a>
                <a href="javascript:;" ng-click="deleteItem(id)"><i class="glyphicon glyphicon-trash"></i></a>
            </td>
        </tr>
    </tbody>
</table>

<?php $angular->beginScript() ?>
<script>
// ini akan ditambahkan ke IndexCtrl
Rest = $injector.get('Rest');
$scope.items = Rest.all();
$scope.deleteItem = function (id) {
    Rest.remove(id);
    $scope.items = Rest.all();
}
</script>
<?php
$angular->endScript();

TestAngularController.php

<?php

namespace app\controllers;

/**
 * Description of TestAngularController
 *
 * @author Misbahul D Munir <[email protected]>
 * @since 1.0
 */
class TestAngularController extends \yii\web\Controller
{
    public function actionIndex()
    {
        return $this->render('bootstrap');
    }
}

view.php

<?php
/**
 * file @views/test-angular/view.php
 */

use dee\angular\Angular;

/* @var $this yii\web\View */
/* @var $angular Angular */
?>

<a href="#/">List</a><br>
<pre>
Id = {{id}}
Item = {{item | json}}
</pre>

<?php $angular->beginScript() ?>
<script>
$location = $injector.get('$location');
$routeParams = $injector.get('$routeParams');
Rest = $injector.get('Rest');

$scope.id = $routeParams.id;

$scope.item = Rest.get($scope.id);

</script>
<?php $angular->endScript();