跳至主要内容

Create a restful application with AngularJS and Grails(4):Standalone AngularJS application


Standalone AngularJS application

In the real world applications, it is usually required to integrate the third party APIs into the project. Most of case, the third party service is provided as flexible REST APIs for developers.
Imagine the REST API in this sample could sever other applications, such as a mobile app or other website in future, ideally it should be designated as an API centric application.
The AngularJS codes can be moved to a standalone application, and consume the REST web service remotely, like other applications.
Split the original codes into two projects.
/
 /client
 /server
The client is an AngularJS based application. The codes are based on AngularJS Seed sandbox. I copied the app folder in the former Grails application.
The server is nearly no difference from the original Grails part, but the app folder in the web-app folder is moved to client. Additionally, you have to configure CORS in the server side.

Configure CORS

There is a good post from the Spring community to help you understand CORS(Cross-Origin Resource Sharing).
The post provides a solution to resolve the limitation of cross domain resource accessing.
But I would like use a CORS filter from Ebay, I have used it in projects and it has some configuration options.
By default, the Grails application does not includes a web.xml file, it is generated from the default templates at runtime. Use the following command to install the templates for this projects.
grails install-templates
Open the web.xml file under the src/templates/war folder.
Configure CORS filter in the web.xml.
<filter>
 <filter-name>CORS Filter</filter-name>
 <filter-class>org.ebaysf.web.cors.CORSFilter</filter-class>
 <init-param>
  <description>A comma separated list of allowed origins. Note: An '*' cannot be used for an allowed origin when using credentials.</description>
  <param-name>cors.allowed.origins</param-name>
  <param-value>http://localhost:8000, http://localhost:8080</param-value>
 </init-param>
 <init-param>
  <description>A comma separated list of HTTP verbs, using which a CORS
   request can be made.</description>
  <param-name>cors.allowed.methods</param-name>
  <param-value>GET,POST,HEAD,OPTIONS,PUT,DELETE</param-value>
 </init-param>
 <init-param>
  <description>A comma separated list of allowed headers when making a non simple CORS request.</description>
  <param-name>cors.allowed.headers</param-name>
  <param-value>Content-Type,X-Requested-With,Authorization,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
 </init-param>
 <init-param>
  <description>A comma separated list non-standard response headers that will be exposed to XHR2 object.</description>
  <param-name>cors.exposed.headers</param-name>
  <param-value></param-value>
 </init-param>
 <init-param>
  <description>A flag that suggests if CORS is supported with cookies</description>
  <param-name>cors.support.credentials</param-name>
  <param-value>true</param-value>
 </init-param>
 <init-param>
  <description>A flag to control logging</description>
  <param-name>cors.logging.enabled</param-name>
  <param-value>true</param-value>
 </init-param>
 <init-param>
  <description>Indicates how long (in seconds) the results of a preflight request can be cached in a preflight result cache.</description>
  <param-name>cors.preflight.maxage</param-name>
  <param-value>10</param-value>
 </init-param>
</filter>
<filter-mapping>
 <filter-name>CORS Filter</filter-name>
 <url-pattern>/*</url-pattern>
</filter-mapping>
Run the server project as a Grails application from command line or IDE. Now it works as a REST API producer and severs client applications.
And then run the client project as a NodeJS application.
node scripts\web-server.js

Sample codes

标签：

评论

发表评论

此博客中的热门博文

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. Getting Started with Zend Framework 2 Getting Started with REST and Zend Framework 2 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" =...
发表评论
阅读全文

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 the   Post   entity 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 convert...
发表评论
阅读全文

AngularJS CakePHP Sample codes

Introduction This sample is a Blog application which has the same features with the official CakePHP Blog tutorial, the difference is AngularJS was used as frontend solution, and CakePHP was only use for building backend RESR API. Technologies AngularJS   is a popular JS framework in these days, brought by Google. In this example application, AngularJS and Bootstrap are used to implement the frontend pages. CakePHP   is one of the most popular PHP frameworks in the world. CakePHP is used as the backend REST API producer. MySQL   is used as the database in this sample application. A PHP runtime environment is also required, I was using   WAMP   under Windows system. Post links I assume you have some experience of PHP and CakePHP before, and know well about Apache server. Else you could read the official PHP introduction( php.net ) and browse the official CakePHP Blog tutorial to have basic knowledge about CakePHP. In these posts, I tried to ...
2 条评论
阅读全文