Skip to content

Latest commit

 

History

History
164 lines (116 loc) · 5.02 KB

index.md

File metadata and controls

164 lines (116 loc) · 5.02 KB
Raw

Angular CMF - resource library

The Symfony CMF has got several REST endpoint to fetch resources and work with them:

So this frontend library is able to work on both endpoints in a common way.

Install

clone the repository into your repo (TODO: use bower)

git clone https://github.com/angular-cmf/resource.git

go into the directory and run

npm install

for the npm packages. And

bower install

for the frontend dependencies.

When installing with bower, this steps are done automatically.

Configuration

Set up the Persister

TBD. #18 and #9

Set up Base paths

TBD. with the persister settings.

Usage

To use that library you will have to insert it into you frontend project like

 
<!-- some dependencies -->
<script type="application/javascript" src="lib/resource/bower_components/angular/angular.min.js"></script>
<script type="application/javascript" src="lib/resource/bower_components/angular-mocks/angular-mocks.js"></script>
<script type="application/javascript" src="lib/resource/bower_components/restangular/dist/restangular.min.js"></script>
<script type="application/javascript" src="lib/resource/bower_components/lodash/dist/lodash.min.js"></script>

<!-- use the lib -->
<script type="application/javascript" src="lib/angular-cmf/resource/dist/angularCmf.resource.min.js"></script>

and create an Angular Application

<!DOCTYPE html>
<html lang="en" ng-app="CMFapp">
<head>
    <meta charset="UTF-8">
    <title>Symfon CMF application</title>
</head>
<body>
    <div ng-controller="DocumentController as ctrl">
        <h1>{{ctrl.resource.title}}</h1>
        <p>{{ctrl.resource.body}}</p>
    </div>
    
    <script type="application/javascript" src="lib/angular-cmf/resource/dist/angularCmf.resource.min.js"></script>
    <script type="application/javascript">
        angular.module('CMFapp', ['angularCmf.resource'])
                .controller('DocumentController',['UnitOfWork', function (UnitOfWork) {
                    var vm = this;
                    vm.resource = {};
    
                    UnitOfWork.find('/foo').then(function (resource) {
                        vm.resource = resource;
                    });
                }]);
    </script>
</body>
</html>

Find a resource

When fetching a resource from the API you can use the UnitOfWork::find(id) method. The resource will be cached in a local cache (not local storage) to be avoid the second call.

UnitOfWork.find('/foo').then(function (resource) {
    vm.resource = resource;
});

As all method inside of the UnitOfWork the find() method will respond with a promise, caused by the asynchronous API call. Promises is an upcoming ES6 feature. angular-cmf/resource will provide an the same implementation angular is using: $q.

Persist/Flush a resource

To persist a resource you have to call UnitOfWork::persist(resource) which again responds with a promise. The method marks the resource as changed in the internal cache list, which no API call was done. You have to run UnitOfWork::flush() to run POST/PUT requesst for all persisted resources. This handling is very equal to a ORM called Doctrine.

angular.module('CMFapp', ['angularCmf.resource'])
    .controller('DocumentController',['UnitOfWork', function (UnitOfWork) {
        var vm = this;
        vm.resource = {};

        vm.save = function (id) {
            // does no second API call, when fetched before
            UnitOfWork.find('/foo').then(function (data) {
                UnitOfWork.persist(data).then(function () {
                    // the API call is done now
                    UnitOfWork.flush();
                })
            });
        }
    }]);

Remove a resource

As in the case of persist() the method call UnitOfWork::remove(resource); has local effects only. That means the resource will be flaged as removed. The UnitOfWork::findAll() won't return it anymore and a UnitOfWork::flush() would call the DELETE request.

angular.module('CMFapp', ['angularCmf.resource'])
        .controller('DocumentController',['UnitOfWork', function (UnitOfWork) {
            var vm = this;
            vm.resource = {};

            vm.delete = function (id) {
                // does no second API call, when fetched before
                UnitOfWork.find('/foo').then(function (data) {
                    UnitOfWork.remove(data).then(function () {
                        // the API call is done now
                        UnitOfWork.flush();
                    })
                });
            }
        }]);