#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, it is ideally designated as a 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.

<pre> / /client /server </pre>

The client is an AngularJS based application, I reused the AngularJS Seed sandbox, and copy the app folder in the former Grails application.

The server is nearly no difference from the original Grails application, 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).

https://spring.io/understanding/cors

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. Use the following command to install the templates for this projects.

<pre> grails install-templates </pre>

Open the web.xml file under the src/templates/war folder.

Add the configuration of CORS filter.

<pre> &lt;filter> &lt;filter-name>CORS Filter&lt;/filter-name> &lt;filter-class>org.ebaysf.web.cors.CORSFilter&lt;/filter-class> &lt;init-param> &lt;description>A comma separated list of allowed origins. Note: An '*' cannot be used for an allowed origin when using credentials.&lt;/description> &lt;param-name>cors.allowed.origins&lt;/param-name> &lt;param-value>http://localhost:8000, http://localhost:8080&lt;/param-value> &lt;/init-param> &lt;init-param> &lt;description>A comma separated list of HTTP verbs, using which a CORS request can be made.&lt;/description> &lt;param-name>cors.allowed.methods&lt;/param-name> &lt;param-value>GET,POST,HEAD,OPTIONS,PUT,DELETE&lt;/param-value> &lt;/init-param> &lt;init-param> &lt;description>A comma separated list of allowed headers when making a non simple CORS request.&lt;/description> &lt;param-name>cors.allowed.headers&lt;/param-name> &lt;param-value>Content-Type,X-Requested-With,Authorization,Origin,Access-Control-Request-Method,Access-Control-Request-Headers&lt;/param-value> &lt;/init-param> &lt;init-param> &lt;description>A comma separated list non-standard response headers that will be exposed to XHR2 object.&lt;/description> &lt;param-name>cors.exposed.headers&lt;/param-name> &lt;param-value>&lt;/param-value> &lt;/init-param> &lt;init-param> &lt;description>A flag that suggests if CORS is supported with cookies&lt;/description> &lt;param-name>cors.support.credentials&lt;/param-name> &lt;param-value>true&lt;/param-value> &lt;/init-param> &lt;init-param> &lt;description>A flag to control logging&lt;/description> &lt;param-name>cors.logging.enabled&lt;/param-name> &lt;param-value>true&lt;/param-value> &lt;/init-param> &lt;init-param> &lt;description>Indicates how long (in seconds) the results of a preflight request can be cached in a preflight result cache.&lt;/description> &lt;param-name>cors.preflight.maxage&lt;/param-name> &lt;param-value>10&lt;/param-value> &lt;/init-param> &lt;/filter> &lt;filter-mapping> &lt;filter-name>CORS Filter&lt;/filter-name> &lt;url-pattern>/*&lt;/url-pattern> &lt;/filter-mapping> </pre>

Run the server project as a Grails application from command line or IDE.

And then run the client project as a NodeJS application.

<pre> node scripts\web-server.js </pre>

Navigate to http://localhost:8000/app/index.html#/.

##Sample codes

The code is hosted on https://github.com/hantsy/angularjs-grails-sample/.