-
Notifications
You must be signed in to change notification settings - Fork 536
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #934 from grails/merge-6.2.x-into-7.0.x-12-19-2024
Merge 6.2.x into 7.0.x
- Loading branch information
Showing
73 changed files
with
3,964 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
Since Grails 3.1, Grails supports a profile for creating applications with AngularJS that provides a more focused set of dependencies and commands. The angular profile inherits from the REST profile and therefore has all of the commands and properties that the REST profile has. | ||
|
||
To get started with the AngularJS profile, create an application specifying `angularjs` as the name of the profile: | ||
|
||
[source,bash] | ||
---- | ||
$ grails create-app my-api --profile angularjs | ||
---- | ||
|
||
This will create a new Grails application that provides the following features: | ||
|
||
* Default set of commands for creating AngularJS artefacts | ||
* Gradle plugin to manage client side dependencies | ||
* Gradle plugin to execute client side unit tests | ||
* Asset Pipeline plugins to ease development | ||
By default the AngularJS profile includes GSP support in order to render the index page. This is necessary because the profile is designed around asset pipeline. | ||
|
||
The new commands are: | ||
|
||
* `create-ng-component` | ||
* `create-ng-controller` | ||
* `create-ng-directive` | ||
* `create-ng-domain` | ||
* `create-ng-module` | ||
* `create-ng-service` | ||
==== Project structure | ||
|
||
|
||
The AngularJS profile is designed around a specific project structure. The `create-ng` commands will automatically create modules where they do not exist. | ||
|
||
Example: | ||
[source,bash] | ||
---- | ||
$ grails create-ng-controller foo | ||
---- | ||
|
||
This will produce a `fooController.js` file in `grails-app/assets/javascripts/${default package name}/controllers`. | ||
|
||
NOTE: By default the angularjs profile will create files in the `javascripts` directory. You can change that behavior in your configuration with the key `grails.codegen.angular.assetDir`. | ||
|
||
[source,bash] | ||
---- | ||
$ grails create-ng-domain foo.bar | ||
---- | ||
|
||
This will produce a `Bar.js` file in `grails-app/assets/javascripts/foo/domains`. It will also create the "foo" module if it does not already exist. | ||
|
||
[source,bash] | ||
---- | ||
$ grails create-ng-module foo.bar | ||
---- | ||
|
||
This will produce a `foo.bar.js` file in `grails-app/assets/javascripts/foo/bar`. Note the naming convention for modules is different than other artefacts. | ||
|
||
[source,bash] | ||
---- | ||
$ grails create-ng-service foo.bar --type constant | ||
---- | ||
|
||
This will produce a `bar.js` file in `grails-app/assets/javascripts/foo/services`. It will also create the "foo" module if it does not already exist. The `create-ng-service` command accepts a flag `-type`. The types that can be used are: | ||
|
||
* service | ||
* factory _default_ | ||
* value | ||
* provider | ||
* constant | ||
|
||
Along with the artefacts themselves, the profile will also produce a skeleton unit test file under `src/test/javascripts` for each create command. | ||
|
||
|
||
==== Client side dependencies | ||
|
||
|
||
The https://github.com/craigburke/bower-installer-gradle[Gradle Bower Plugin] is used to manage dependencies with bower. Visit the plugin documentation to learn how to use the plugin. | ||
|
||
|
||
==== Unit Testing | ||
|
||
|
||
The https://github.com/craigburke/karma-gradle[Gradle Karma Plugin] is used to execute client side unit tests. All generated tests are written with Jasmine. Visit the plugin documentation to learn how to use the plugin. | ||
|
||
|
||
==== Asset Pipeline | ||
|
||
|
||
The AngularJS profile includes several asset pipeline plugins to make development easier. | ||
|
||
* https://github.com/craigburke/js-closure-wrap-asset-pipeline[JS Closure Wrap Asset Pipeline] will wrap your Angular code in immediately invoked function expressions. | ||
* https://github.com/craigburke/angular-annotate-asset-pipeline[Annotate Asset Pipeline] will annotate your dependencies to be safe for minification. | ||
* https://github.com/craigburke/angular-template-asset-pipeline[Template Asset Pipeline] will put your templates into the `$templateCache` to prevent http requests to retrieve the templates. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
Since Grails 3.2.1, Grails supports a profile for creating applications with Angular that provides a more future facing setup. | ||
|
||
The biggest change in this profile is that the profile creates a multi project gradle build. This is the first profile to have done so. The Angular profile relies on the https://github.com/angular/angular-cli[Angular CLI] to manage the client side application. The server side application is the same as an application created with the `rest-api` profile. | ||
|
||
To get started with the Angular profile, create an application specifying `angular` as the name of the profile: | ||
|
||
[source,bash] | ||
---- | ||
$ grails create-app my-app --profile angular | ||
---- | ||
|
||
This will create a `my-app` directory with the following contents: | ||
|
||
[source] | ||
---- | ||
client/ | ||
gradle/ | ||
gradlew | ||
gradlew.bat | ||
server/ | ||
settings.gradle | ||
---- | ||
|
||
The entire client application lives in the `client` folder and the entire server application lives in the `server` folder. | ||
|
||
==== 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. | ||
|
||
* https://docs.npmjs.com/getting-started/installing-node[Node && NPM] | ||
* https://github.com/angular/angular-cli#installation[Angular CLI] | ||
|
||
==== Project Structure | ||
|
||
The Angular profile is designed to be used with the https://github.com/angular/angular-cli[Angular CLI]. The CLI was used to create the client application side of the profile to start with. The CLI provides commands to do most of the things you would want to do with the client application, including creating components or services. Because of that, the profile itself provides no commands to do those same things. | ||
|
||
==== Running The App | ||
|
||
To execute the server side application only, you can execute the `bootRun` task in the `server` project: | ||
|
||
[source,bash] | ||
---- | ||
./gradlew server:bootRun | ||
---- | ||
|
||
The same can be done for the client application: | ||
|
||
[source,bash] | ||
---- | ||
./gradlew client:bootRun | ||
---- | ||
|
||
To execute both, you must do so in parallel: | ||
|
||
[source,bash] | ||
---- | ||
./gradlew bootRun --parallel | ||
---- | ||
|
||
NOTE: It is necessary to do so in parallel because by default Gradle executes tasks synchronously, and neither of the `bootRun` tasks will "finish". | ||
|
||
==== Testing | ||
|
||
The default client application that comes with the profile provides some tests that can be executed. To execute tests in the application: | ||
|
||
[source,bash] | ||
---- | ||
./gradlew test | ||
---- | ||
|
||
The `test` task will execute unit tests with Karma and Jasmine. | ||
|
||
[source,bash] | ||
---- | ||
./gradlew integrationTest | ||
---- | ||
|
||
The `integrationTest` task will execute e2e tests with Protractor. | ||
|
||
TIP: You can execute the `test` and `integrationTest` tasks on each of the sub-projects the same as you would `bootRun`. | ||
|
||
==== CORS | ||
|
||
Because the client side and server side will be running on separate ports, CORS configuration is required. By default the profile will configure the server side to allow CORS from all hosts via the following config: | ||
|
||
[source,yaml] | ||
.server/grails-app/conf/application.yml | ||
---- | ||
grails: | ||
cors: | ||
enabled: true | ||
---- | ||
|
||
See the section on link:theWebLayer.html#cors[CORS] in the user guide for information on configuring this feature for your needs. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.