跳至主要内容

Create a restful application with AngularJS and Zend 2 framework


Create a restful application with AngularJS and Zend 2 framework

This example application uses AngularJS/Bootstrap as frontend and Zend2 Framework as REST API producer.

The backend code

This backend code reuses the database scheme and codes of the official Zend Tutorial, and REST API support is also from the Zend community.
Zend2 provides a AbstractRestfulController for RESR API producing.
class AlbumController extends AbstractRestfulController {

    public function getList() {
        $results = $this->getAlbumTable()->fetchAll();
        $data = array();
        foreach ($results as $result) {
            $data[] = $result;
        }

        return new JsonModel(array(
            'data' => $data)
        );
    }

    public function get($id) {
        $album = $this->getAlbumTable()->getAlbum($id);
        return new JsonModel(array("data" => $album));
    }

    public function create($data) {
        
        $data['id']=0;
        $form = new AlbumForm();
        $album = new Album();
        $form->setInputFilter($album->getInputFilter());
        $form->setData($data);

        $id=0;
        if ($form->isValid()) {
            $album->exchangeArray($form->getData());
            $id = $this->getAlbumTable()->saveAlbum($album);
        }else {           
          print_r(  $form->getMessages());
        }

        return new JsonModel(array(
            'data' => $id,
        ));
    }

    public function update($id, $data) {
        $data['id'] = $id;
        $album = $this->getAlbumTable()->getAlbum($id);
        $form = new AlbumForm();
        $form->bind($album);
        $form->setInputFilter($album->getInputFilter());
        $form->setData($data);
        
        if ($form->isValid()) {
            $id = $this->getAlbumTable()->saveAlbum($form->getData());
        }

        return new JsonModel(array(
            'data' => $id,
        ));
    }

    public function delete($id) {
        $this->getAlbumTable()->deleteAlbum($id);

        return new JsonModel(array(
            'data' => 'deleted',
        ));
    }

    protected $albumTable;

    public function getAlbumTable() {
        if (!$this->albumTable) {
            $sm = $this->getServiceLocator();
            $this->albumTable = $sm->get('Album\Model\AlbumTable');
        }
        return $this->albumTable;
    }

}
The naming convention of the methods for REST API is listed in the following table.
URLHTTP MethodController MethodDescription
/albumsGETgetListGet the list of Albums
/albumsPOSTcreateCreate a new Album
/albums/:idGETgetGet the details of a Album
/albums/:idPUTudpateUpdate a Album by id
/albums/:idDELETEdeleteDelete a Album by id
Besides the naming convention, you have to set the routing rule to make it work.
Change the content of module/Album/config/module.config.php to the following.
<?php

return array(
    'controllers' => array(
        'invokables' => array(
            'Album\Controller\Album' => 'Album\Controller\AlbumController',
        ),
    ),
    // The following section is new and should be added to your file
    'router' => array(
        'routes' => array(
            'album' => array(
                'type' => 'segment',
                'options' => array(
                    'route' => '/albums[/:id]',
                    'constraints' => array(
                        'id' => '[0-9]+',
                    ),
                    'defaults' => array(
                        'controller' => 'Album\Controller\Album'
                    ),
                ),
            ),
        ),
    ),
    'view_manager' => array(
        'strategies' => array(
            'ViewJsonStrategy',
        ),
    ),
);

For producing REST API, it needs render a JSON view instead of the HTML view.

The frontend AngluarJS pages

It is very similar with the before AngularJS CakePHP application andAngularJS Grails application.
I do not want to duplicate the codes in this post, please checkout the codes github.com.

Run the application

Clone the source from github.com.
git clone https://github.com/hantsy/angularjs-zf2-sample
Run php composer.phar install to install the depencies automaticially. This applicalication also used Composer to manage the dependencies.
Create a vhost setting in Apache for this application, set the value of the DocumentRoot is <your application path>/public.
<VirtualHost *:80>
    ServerName zf2-tutorial.localhost
    DocumentRoot E:/MyWorks/hantsy-labs/angularjs-zf2-sample/public

    SetEnv APPLICATION_ENV "development"
    <Directory E:/MyWorks/hantsy-labs/angularjs-zf2-sample/public>
        DirectoryIndex index.php
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>
Change the database setting(username and password) in theconfig/autoload/local.php.
return array(
     'db' => array(
         'username' => 'root',
         'password' => '',
     ),
 );
Start apache server.
albums

Sample codes

Clone the sources from my github.com.
git clone https://github.com/hantsy/angularjs-zf2-sample
And switch to stage1 branch.
git checkout stage1

评论

此博客中的热门博文

Build a Reactive application with Angular 5 and Spring Boot 2.0

I have created a post to describe Reactive programming supports in Spring 5 and its subprojects, all codes of this article are updated the latest Spring 5 RELEASE, check spring-reactive-sample under my Github account.
In this post, I will create a simple blog system, including:
A user can sign in and sign out.An authenticated user can create a post.An authenticated user can update a post.Only the user who has ADMIN role can delete a post.All users(including anonymous users) can view post list and post details.An authenticated user can add his comments to a certain post. The backend will be built with the latest Spring 5 reactive stack, including:
Spring Boot 2.0, at the moment the latest version is 2.0.0.M7Spring Data MongoDB supports reactive operations for MongoDBSpring Session adds reactive support for WebSessionSpring Security 5 aligns with Spring 5 reactive stack The frontend is an Angular based SPA and it will be generated by Angular CLI.
The source code is hosted on Github, …

Activating CDI in JSF 2.3

Activating CDI in JSF 2.3 When I upgraed my Java EE 7 sample to the newest Java EE 8, the first thing confused me is the CDI beans are not recoganized in Facelects template in a JSF 2.3 based web applicaiton, which is working in the development version, but in the final release version, they are always resolved as null. I filed an issue on Mojarra and discussed it with the developers from communities and the JSF experts.
According to the content of README, In a JSF 2.3 application, to activate CDI support, declaring a 2.3 versioned faces-config.xml and adding javax.faces.ENABLE_CDI_RESOLVER_CHAIN in web.xml is not enough, you have to declare @FacesConfig annotated class to enable CDI.
Here is the steps I created a workable JSF 2.3 applicatoin in Java EE 8.
Create a Java web application, this can be done easily by NetBeans IDE, or generated by Maven archetype, for exmaple.
$ mvn archetype:generate -DgroupId=com.example -DartifactId=demo -DarchetypeArtifactId=maven-archetype-w…

JPA 2.1: Attribute Converter

JPA 2.1: Attribute Converter If you are using Hibernate, and want a customized type is supported in your Entity class, you could have to write a custom Hibernate Type. JPA 2.1 brings a new feature named attribute converter, which can help you convert your custom class type to JPA supported type. Create an Entity Reuse thePostentity class as example. @Entity @Table(name="POSTS") public class Post implements Serializable { private static final long serialVersionUID = 1L; @Id @GeneratedValue(strategy = GenerationType.AUTO) @Column(name="ID") private Long id; @Column(name="TITLE") private String title; @Column(name="BODY") private String body; @Temporal(javax.persistence.TemporalType.DATE) @Column(name="CREATED") private Date created; @Column(name="TAGS") private List<String> tags=new ArrayList<>(); } Create an attribute converter In this example…