Creating applications with Grails, Angular JS

and Spring Security

Álvaro Sánchez-Mariscal

Álvaro Sánchez-Mariscal Software Engineer Grails Development Team sanchezmariscala@ociweb.com

OCI is the new home of Grails More at ociweb.com/grails

The workshop

bit.ly/grails-angular-workshop

Creating REST API’s with Grails

The REST Profile

• Targeted at building REST applications.

• REST Specific plugins and commands.

• No GSP, asset pipeline, UI plugins.

• JSON / Markup views instead.

The REST Profile

• Profile specific commands:

• create-domain-resource - creates an

@Resource domain

• create-restful-controller - creates a RestfulController

The REST Profile• Statically compiled, extensible JSON views:

json.person{name"bob"}

{"person":{"name":"bob"}}

Create the project

$ grails create-app -profile rest-api -features hibernate5,json-views todo

| Application created at /tmp/todo

Create a domain resource

$ grails create-domain-resource todo

| Created grails-app/domain/todo/Todo.groovy| Created src/test/groovy/todo/TodoSpec.groovy

REST Domain classpackage com.exampleimport grails.rest.Resource@Resource(uri = '/todos') class Todo { String description boolean completed}

Create a restful controller

$ grails create-restful-controller todo.Todo

| Created grails-app/controllers/todo/TodoController.groovy

RESTful Controllerpackage com.exampleimport grails.rest.RestfulControllerclass TodoController extends RestfulController { static responseFormats = ['json'] TodoController() { super(Todo) } def pending() { respond Todo.findAllByCompleted(false), view: 'index' } }

JSON Viewimport com.example.Todomodel { Todo todo} json { hal.links(todo) id todo.id description todo.description completed todo.completed}

Demo - REST API

Working with the Angular JS profile

The Angular JS Profile

• Extends the REST profile.

• Adds project setup for AngularJS.

• Code generation for AngularJS.

• Scaffolding available via plugin.

The Angular JS Profile• Profile specific commands:

• create-ng-controller

• create-ng-service

• create-ng-domain

• create-ng-directive

• create-ng-component

• create-ng-module

Create the project

$ grails create-app -profile angular -features hibernate5,json-views todo

| Application created at /tmp/todo

Scaffold all the things!

$ grails ng-generate-all todo.Todo

Demo - AngularJS scaffolding

The Angular 2 Profile

• Available since Grails 3.2.1.

• Multi-project build:

• Client: a pure Angular 2 project, Angular CLI-based.

• Server: a pure rest-api Grails project.

The Angular 2 Profile

$ ng serve $ ./gradlew client:bootRun

CORS

• Supported in Grails core since 3.2.2

• application.yml

grails: cors: enabled: true

Demo - Angular 2 profile

Adding Security with Spring Security REST

Spring Security REST• Compatibility layer over Spring Security Core.

• Login and logout REST endpoints.

• Token validation filter.

• Stateless by default, with JWT (signed and encrypted)

• Memcached, Redis, GORM and Grails Cache token storages.

• Implicit grant support through 3rd party providers.

• RFC 6750 Bearer Token support.

Create the project

$ grails create-app -profile angular -features hibernate,json-views,security todo

| Application created at /tmp/todo

The interceptorangular .module("todo") .factory('authInterceptor', function ($rootScope, $window) { return { request: function (config) { config.headers = config.headers || {}; if ($window.sessionStorage.token) { config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token; } return config; } }; }) .config(function ($httpProvider) { $httpProvider.interceptors.push('authInterceptor'); }) .controller("TodoController", TodoController);

Demo - All together

Thank you!

Álvaro Sánchez-Mariscal