Symfony Rest Angular Demo

This application is a combination of:

• REST API backend written in Symfony2 with FOSRestBundle
• Custom authentication provider for the REST API via WSSE
• MVC frontend client written in AngularJS consuming a RESTful Web Service

Application components (backend and frontend) are held in two separate Symfony bundles:

• "BlogBundle" is the REST API backend. Entities, controllers, security provider, forms and whole business logic is located here
• "ApiClientBundle" is the AngularJS frontend. It is basically collection of HTML, CSS and JavaScript resources which are automatically installed to the /web directory via Assetic.

Advanced note: best practice is to completely separate AngularJS frontend from the REST API. However in current project I decided to hold both frontend & backend in Symfony for simplicity; separating these two would make installation, user authentication and package management more complicated. In real environment you could consider two separate Git repositories (Symfony backend & Angular frontend), different domains in your webserver, and Cross-Origin Resource Sharing.

I used variety of projects as resources:

• REST API Symfony2: the best 2013 way
• angular-symfony
• Symfony Angular TodoMVC

Dependencies

• Symfony 2.7 + Doctrine + Assetic + Twig
• FOSRestBundle
  • This bundle has various tools to quickly create RESTful Web Service
• FOSUserBundle
  • This bundle takes over user management
• JMSSerializerBundle
  • This bundle works together with FOSRestBundle in order to serialize objects requested via REST API
• Hateoas
  • This bundle is used to add self links to all objects requested via RESTful Web Service
• SpBowerBundle
  • This bundle is used to manage bower assets inside ApiClientBundle
• AngularJS + ngRoute + ngCookies
• Restangular
  • This library replaces standard ngResource library to handle REST API requests
• Angular UI Bootstrap
  • This library contains majority of Bootstrap components written in "Angular Way"
• Bootstrap 3
  • Frontend theme

Composer and SpBower will automatically install all dependencies (see Installation below) Dependencies are defined in the "composer.json" and "src/Acme/ApiClientBundle/Resources/config/bower/bower.json"

Installation

Download the project using Git and then run Composer

$ git clone https://github.com/rsobon/Symfony-Rest-Angular-Demo.git
$ cd Symfony-Rest-Angular-Demo/
$ composer install

Composer will automatically download all dependencies listed above. It will also automatically run "assets:install --symlink" and "assetic:dump" commands, which will make Assetic install all public resources (JavaScript files and HTML partials) required for MVC frontend client.

I suggest to install MySQL on the server and adjust parameters.yml accordingly. Then we can run following commands to install database and sample data:

$ cd Symfony-Rest-Angular-Demo/
$ app/console doctrine:database:create
$ app/console doctrine:schema:update
$ app/console doctrine:fixtures:load

Then we have to add the first user (adjust login, password and email to your liking) and grant him ROLE_API role:

$ app/console fos:user:create admin admin@email password
$ app/console fos:user:promote admin ROLE_API

User needs the ROLE_API role to ignore standard CSRF protection in Symfony2 forms. You can adjust this setting in the FOSRestBundle configuration.

Usage

You can configure your own virtual host in your web server or use built-in web server:

$ app/console server:run

After that you can access the REST API! Now you can navigate to login page of the MVC frontend client application:

http://127.0.0.1:8000/ApiClient#/login

Run following command to show all available routes:

$ app/console debug:router

Firewall in the backend application will block all requests starting with the prefix "api/*". Navigating to following URL will result in 403 (Forbidden) Error:

http://127.0.0.1:8000/api/pages

In order to access the REST API user has to authenticate himself with the WSSE Provider.

If you have any questions feel free to ask!