This document discusses combining Grails and Angular frameworks. It describes using Grails 3.2.1 or higher with the Angular2 profile to separate the back-end and front-end into different folders. The Angular CLI is used to scaffold components, services, and classes in TypeScript. Both the back-end and front-end can be run locally and deployed together, with the back-end providing REST APIs and the front-end consuming them via an Angular service. Benefits include reduced tooling, integrated tasks, and separated concerns, while improvements could include better client scaffolding and support for additional SPA frameworks.

1. Unleashing the Dynamic Duo
Dr. Rubén Mondéjar
Grails & Angular

2. About Me
twitter : @Ruuben4
homepage :
http://deim.urv.cat/~ruben.mondejar
Working
Groovy & Grails
AngularJS
MicroServices
Teaching / Research
Software Architecture
Web Development
Distributed Systems

3. Contents
Introduction
Best Solution
Conclusions

4. Contents
Introduction
Angular2 Profile
Conclusions

5. Single Page Application
Inception

6. Architecture

7. Architecture

8. Back-End

9. Back-End

10. Front-End

11. Front-End

12. SPA Frameworks

13. How it feels to learn JavaScript (2016)
https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

14. Angular2 Profile
Grails 3.2.1+

15. Grails 2 + Angular
●Summary :
○Groovy Calamari Issue 70
http://groovycalamari.com/issues/70
●Example
https://github.com/rmondejar/grails-angular-duo

16. Grails 3.x
●Gradle powered
sdk use install 3.2.6
sdk use grails 3.2.6

17. ●Gradle powered
●Angular2 profile
Grails 3.2.1+
sdk use grails 3.2.6
grails create-app --inplace -profile angular2

18. client/
gradle/
gradlew
gradlew.bat
server/
settings.gradle
Grails 3.2.1+
●Gradle powered
●Angular2 profile
○Folder separation
sdk use grails 3.2.6
grails create-app --inplace -profile angular2

19. REST API
/server/grails-app/domain/duo/Example.groovy
import grails.rest.Resource
@Resource(uri='/examples')
class Example {
String title
int num
}
/server/grails-app/init/duo/Bootstrap.groovy
class BootStrap {
def init = { servletContext ->
10.times {
new Example(title: "Example #${it+1}", num: it+1).save()
}
}
(...)
server/grails create-domain-class duo.Example
http://localhost:8080/examples
[{"id":1,"num":1,"title":"Example #1"},
{"id":2,"num":2,"title":"Example #2"},
{"id":3,"num":3,"title":"Example #3"},
{"id":4,"num":4,"title":"Example #4"},
{"id":5,"num":5,"title":"Example #5"},
{"id":6,"num":6,"title":"Example #6"},
{"id":7,"num":7,"title":"Example #7"},
{"id":8,"num":8,"title":"Example #8"},
{"id":9,"num":9,"title":"Example #9"},
{"id":10,"num":10,"title":"Example #10"}]

20. Local Execution
./gradlew server:bootRun
http://localhost:8080/
Starting a Gradle Daemon (subsequent builds will be faster)
:server:compileJava UP-TO-DATE
:server:compileGroovy UP-TO-DATE
:server:buildProperties UP-TO-DATE
:server:processResources UP-TO-DATE
:server:classes UP-TO-DATE
:server:findMainClass
:server:bootRun
Grails application running at http://localhost:8080 in environment: development

21. Client side
●Minimal NPM ecosystem
1. NVM tool (optional)
2. Node (NPM)
3. Angular CLI

22. Client side
●Minimal NPM ecosystem
●First time (using nvm tool)
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
nvm install --lts
nvm use node
npm install -g angular-cli
Requirements
● NVM tool
● Node (NPM)
● Angular CLI
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && .
"$NVM_DIR/nvm.sh" # This loads nvm

23. Client side
● Minimal NPM ecosystem
● First time (using nvm tool)
●Typically (fresh terminal)
nvm use node
Now using node v6.9.5 (npm v3.10.10)

24. Angular2
● TypeScript
● Modules
● Components
● Services
● Classes
Angular 2 for Java Developers
https://www.slideshare.net/slideshow/embed_code/key/BefUJQP36rJ3PM

25. Angular CLI
Angular2 template app

26. Angular CLI
Angular2 template app
Scaffolding
ng generate class Example -> /client/app/example.ts
export class Example {
num: number;
title: string = '';
constructor(values: Object = {}) {
Object.assign(this, values);
}
}

27. Angular CLI
Scaffold Usage
Component ng g component my-new-component
Directive ng g directive my-new-directive
Service ng g service my-new-service
Class ng g class my-new-class
Interface ng g interface my-new-interface
Module ng g module my-module

28. REST Client
ng generate service Example -> /client/app/example.service.ts
get(id: number): Promise<Example> {
return this.http.get('http://localhost:8080/examples/${id}')
.toPromise().then( (response) => {
let example: Example = new Example(response.json());
return template;
})
.catch( (error) => {
this.handleResponseError(error)
});
}

29. Local Execution
./gradlew server:bootRun ./gradlew client:bootRun
http://localhost:8080/ http://localhost:4200
Starting a Gradle Daemon (subsequent builds will be faster)
:server:compileJava UP-TO-DATE
:server:compileGroovy UP-TO-DATE
:server:buildProperties UP-TO-DATE
:server:processResources UP-TO-DATE
:server:classes UP-TO-DATE
:server:findMainClass
:server:bootRun
Grails application running at http://localhost:8080 in environment: development
Starting a Gradle Daemon, 1 busy Daemon could not be reused, use --status for
details
:client:nodeSetup SKIPPED
:client:npmSetup SKIPPED
:client:npmInstall UP-TO-DATE
:client:bootRun
** NG Live Development Server is running on http://localhost:4200. **
webpack: Compiled successfully.
[default] Checking started in a separate process...
[default] Ok, 2.106 sec.

30. Local Execution
./gradlew server:bootRun
./gradlew bootRun --parallel
./gradlew client:bootRun
http://localhost:8080/
http://localhost:4200
http://localhost:4200/

31. Testing
Client application comes with some executable tests
./gradlew test
Executes unit tests with Karma and Jasmine
Integration tests will execute e2e tests with Protractor
./gradlew integrationTest

32. Build
●Back-End
./gradlew war
/server/build/libs/duo.war
●Front-End
ng build
/client/src/dist

33. Deployment

34. Cross-Origin

35. CORS
By default is enabled
server/grails-app/conf/application.yml
grails:
cors:
enabled: true
REST service can be accessed from different domains

36. API Securitization
Spring Security REST
http://alvarosanchez.github.io/grails-angularjs-springsecurity-workshop/

37. Repository
●Example
https://github.com/rmondejar/grails3-angular2-duo

38. Conclusions
In March 2017

39. Benefits
Reduced Toolkit
Integrated Tasks
Separated Folders

40. Benefits
Extended Profiles
Boilerplate code
Scaffolding

41. Improvements
Client Scaffolding
TypeScript code
Unique build
Gradle Task (Back-End)
More SPA Frameworks
Ex. Angular 4

42. Unleashing the Dynamic Duo
Dr. Rubén Mondéjar
Grails & Angular