Grails 3 with Angular 2

Long time no see guys.
Today I make an experiment of Grails 3.2.9 with Angular 2, let’s see how It work.

Prerequisites

To use this profile, you should have Node, NPM, and the Angular CLI installed. Node should be at least version 5 and NPM should be at least version 3.
Node && NPM
Angular CLI

Create App

First of all I’ve created an app called “sample-angular2” using command :

> grails create-app sample-angular2 --profile angular

then navigate to the project

> cd sample-angular2

you should see files like this :

• client/
  gradle/
  gradlew
  gradlew.bat
  server/
  settings.gradle

  this will create 2 things that is
  – Server part as a Grails app
  – Client part as an Angular2

  Running The App

  To execute the server side application only, you can execute the bootRun task in the server project:

  ./gradlew server:bootRun

  The same can be done for the client application:

  ./gradlew client:bootRun

  To execute both, you must do so in parallel:

  ./gradlew bootRun --parallel

so I execute both with command:

./gradlew bootRun --parallel

now I’m waiting so long :'(

navigate to http://localhost:4200/ You will get something like this. Done !

Create a domain Todo

navigate to server folder

> cd server
> grails create-domain-resource todo

grails will create a resource REST of todo class in

server/grails-app/domain/sample/angular2/Todo.groovy

you will get this

 then I add properties to my Todo

package sample.angular2
import grails.rest.*

@Resource(uri = '/todos', readOnly = false, formats = ['json', 'xml'])
class Todo {
 String title
 Boolean isCompleted = false
}

Notice the @Resource annotation: it’s an AST transformation that will generate at compile time a REST controller for the domain it’s annotated to. The generated controller will have the usual CRUD methods:
Create: save().
Read: index() for all elements, and show() for a single one.
Update: update().
Delete: delete().

In addition to that, if we define the annotation parameter uri, those operations will also be mapped to the corresponding HTTP methods: POST for create(), DELETE for delete(), etc.

Create Objects

I add this code to Bootstrap locate in : server/grails-app/init/sample/angular2/Bootstrap.groovy

package sample.angular2

class BootStrap {

  def init = { servletContext ->
    5.times { new Todo(title: "Todo ${it+1}").save() }
  }
  def destroy = {
  }
}

to init some todo object
The I test by using command :

> curl -i 0:8080/todos

to retrieve todo list from server side

I will get this as a result

HTTP/1.1 200 

X-Application-Context: application:development

Content-Type: application/json;charset=UTF-8

Transfer-Encoding: chunked

Date: Fri, 03 Feb 2017 10:30:31 GMT

[{"id":1,"isCompleted":false,"title":"Todo 1"},{"id":2,"isCompleted":false,"title":"Todo 2"},

{"id":3,"isCompleted":false,"title":"Todo 3"},{"id":4,"isCompleted":false,"title":"Todo 4"},

{"id":5,"isCompleted":false,"title":"Todo 5"}]

Writing a custom RESTful controller

start with creating a controller called todo inside server folder

server> grails create-restful-controller Todo
| Created grails-app/controllers/sample/angular2/TodoController.groovy

This will create a controller that extends RestfulController. grails.rest.RestfulController is the base class that provides the CRUD methods like index(), save(), etc.

Note that those methods may be overriden if you need to. RestfulController also provides some other protected methods that can as well be overriden to further customize its behaviour. Check its documentation for more information.

Now, define a mapping for this controller in grails-app/controllers/UrlMappings.groovy:

"/todos"(resources:"todo")

now create action to view not complete task :

def pendings() {
    respond Todo.findAllByIsCompleted(false), view: 'index'
}

your TodoController view look like  this :

package sample.angular2


import grails.rest.*
import grails.converters.*

class TodoController extends RestfulController {
 static responseFormats = ['json', 'xml']
 
 TodoController() {
  super(Todo)
 }

 def pendings() {
  respond Todo.findAllByIsCompleted(false), view: 'index'
 }
}

 define a mapping for this action

"/todo/pendings"(controller: 'todo', action: 'pendings')

 —– To be continued —–