Grails - The AngularJS Profile

Description

AngularJS applications are supported by Grails 3.1. Grails has angular profile for applications involving AngularJS. This profile is focused set of dependencies and commands. The angular profile has all the commands and properties that the REST profile has, because it is inherited from REST profile.

The angular profile for applications can be started by using following command:

grails create-app grail-angularjs --profile angularjs

The above command will create new application with name grail-angularjs and it will have following features:

  • Asset Pipeline plugins to ease development.

  • Gradle plugin to execute client side unit tests and to manage client side dependencies.

  • Default set of commands for creating AngularJS artefacts.

AngularJS profile has GSP support to provide the index page. This is necessary because the profile is designed around asset pipeline. The available new commands will be as follows:

  • Asset Pipeline plugins to ease development.

  • Gradle plugin to execute client side unit tests and to manage client side dependencies.

  • Default set of commands for creating AngularJS artefacts.

Project structure

AngularJS profile is drawn with a specific project structure. Modules will be created with the help of create-ng command.

grails create-ng-controller mycontroller

The above command will create mycontroller.js file in C:\grail-angularjs\grails-app\assets\javascripts\grail\angularjs\controllers.

grails create-ng-domain mydomain

The above command will create mydomain.js file in C:\grail-angularjs\grails-app\assets\javascripts\grail\angularjs\domain.

grails create-ng-module mymodule

The above command will create grail.angularjs.mymodule.js file in C:\grail-angularjs\grails-app\assets\javascripts\grail\angularjs\mymodule. You will notice that Note the naming convention for modules is different than other artefacts.

grails create-ng-controller myservice --type constant

The above command will create myserviceService.js file in C:\grail-angularjs\grails-app\assets\javascripts\grail\angularjs\services. The above command accepts a flag-type which are as follows service, factory -default, value, provider and constant.

Client side dependencies and Unit Testing

S.N.Plugins & Description
1 Gradle Bower Plugin
It is used to manage dependencies with bower.
2 Gradle Karma Plugin
It is used to execute client side unit tests

Asset Pipeline

Several asset pipeline plugins are included with in AngularJS profile, some of the plugins are listed in below table:

S.N.Plugins & Description
1 JS Closure Wrap Asset Pipeline
This plugin will enclose Angular code in immediately invoked function expressions.
2 Annotate Asset Pipeline
This plugin will interpret dependencies to be safe for minification.
3 Template Asset Pipeline
It will put templates into the $templateCache to avoid http requests to retrieve the templates.
Advertisements