-
Notifications
You must be signed in to change notification settings - Fork 37
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
tutorial for cobigen angular client generation #73
Closed
suvmanda
wants to merge
38
commits into
devonfw-tutorials:main
from
suvmanda:tutorial-for-angular-client-generation-with-cobigen
Closed
Changes from 37 commits
Commits
Show all changes
38 commits
Select commit
Hold shift + click to select a range
2d2b30e
commit1 tutorial for cobigen angular client generation
suvmanda e09029a
rename to installCobiGen
suvmanda e76adf1
Merge remote-tracking branch 'upstream/main' into tutorial-for-angula…
suvmanda c04434a
remove hyphen
suvmanda 664670a
Update index.asciidoc
suvmanda 00e9905
updated to backendServer/server
suvmanda 8db291b
tutorial for angular client generation with cobigen
suvmanda e054940
added port
suvmanda 6d191a2
Added port
suvmanda 4b8a270
Update index.asciidoc
suvmanda 75a54c9
added angular client generation
suvmanda 63bc32a
changed to cobigenexample
suvmanda 49cdc6a
added Prerequisites and Learning goals
suvmanda f7fbe22
changed port number
suvmanda afb0eb4
changed projectname
suvmanda 3458de2
prerequisites and learning goals changed
suvmanda 1c7b2ad
title changed
suvmanda b94221c
rename cobigenjavaexample
suvmanda 7c2f64a
rename cobigenexample to cobigenangularexample
suvmanda c951a28
conclusion added
suvmanda ec0a3d7
adding Subtitle
suvmanda 4b84226
Update index.asciidoc
suvmanda af5ea9c
removed ====
suvmanda 3a59430
comments fixed
suvmanda baaf8f5
restructuring the code
suvmanda 393b9e5
fix syntax
suvmanda 9d9a4d4
Merge branch 'main' into tutorial-for-angular-client-generation-with-…
suvmanda 85382a3
Update index.asciidoc
suvmanda 5403dec
adding steps
suvmanda fbc4e56
text added
suvmanda 01c3fbe
Merge branch 'main' into tutorial-for-angular-client-generation-with-…
suvmanda c84e0a9
spelling fixed
suvmanda 2df2803
Update index.asciidoc
suvmanda 8984313
Update PR fixed
suvmanda 126b959
Merge branch 'main' into tutorial-for-angular-client-generation-with-…
SchettlerKoehler 7c5868b
Merge branch 'main' into tutorial-for-angular-client-generation-with-…
suvmanda 52d1699
Merge branch 'main' into tutorial-for-angular-client-generation-with-…
SchettlerKoehler 892cdd3
Merge branch 'main' into tutorial-for-angular-client-generation-with-…
SchettlerKoehler File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
60 changes: 60 additions & 0 deletions
60
cobigen-angular-client-generation/files/CustomerEntity.java
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,60 @@ | ||
package com.example.application.cobigenjavaexample.customermanagement.dataaccess.api; | ||
|
||
import java.sql.Timestamp; | ||
|
||
import javax.persistence.Entity; | ||
import javax.persistence.Table; | ||
|
||
@Entity | ||
@Table(name = "Customer") | ||
public class CustomerEntity { | ||
|
||
private String firstname; | ||
|
||
private String lastname; | ||
|
||
private int age; | ||
|
||
/** | ||
* @return the firstname | ||
*/ | ||
public String getFirstname() { | ||
return firstname; | ||
} | ||
|
||
/** | ||
* @param firstname the firstname to set | ||
*/ | ||
public void setFirstname(String firstname) { | ||
this.firstname = firstname; | ||
} | ||
|
||
/** | ||
* @return the lastname | ||
*/ | ||
public String getLastname() { | ||
return lastname; | ||
} | ||
|
||
/** | ||
* @param lastname the lastname to set | ||
*/ | ||
public void setLastname(String lastname) { | ||
this.lastname = lastname; | ||
} | ||
|
||
/** | ||
* @return the age | ||
*/ | ||
public int getAge() { | ||
return age; | ||
} | ||
|
||
/** | ||
* @param age the age to set | ||
*/ | ||
public void setAge(int age) { | ||
this.age = age; | ||
} | ||
|
||
} |
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,82 @@ | ||
= Generate Angular Client with devonfw | ||
== Angular client generation with CobiGen | ||
==== | ||
With the CobiGen code generator you can easily generate components for your Angular application. | ||
The following tutorial provides an example for using the CobiGen cli. | ||
You can find more information on https://github.com/devonfw/cobigen/wiki/howto_angular-client-generation | ||
## Prerequisites | ||
* devonfw Ide | ||
|
||
## Learning goals. | ||
GuentherJulian marked this conversation as resolved.
Show resolved
Hide resolved
|
||
Here in this tutorial we will learn the following: | ||
* Create java project | ||
* CobiGen to generate the Angular source code out of the java files | ||
|
||
==== | ||
|
||
[step] | ||
-- | ||
restoreDevonfwIde(["java", "mvn", "vscode"]) | ||
-- | ||
|
||
For this tutorial an installation of the devonfw IDE is required first time you use it. The next step is to install the CobiGen CLI. | ||
[step] | ||
-- | ||
installCobiGen() | ||
-- | ||
|
||
CobiGen is build as an extensible framework for incremental code generation. It provides extension points for new input readers which allow reading new input types and converting them to an internally processed model.CobiGen uses the backend classes for generating your code used in the Angular application. So in the next steps you will create a java project, create a simple java class. | ||
[step] | ||
-- | ||
createDevon4jProject("cobigenjavaexample") | ||
-- | ||
|
||
This step is for building the java project. | ||
[step] | ||
== Build the java project | ||
-- | ||
buildJava("cobigenjavaexample") | ||
-- | ||
|
||
GuentherJulian marked this conversation as resolved.
Show resolved
Hide resolved
|
||
==== | ||
CobiGen is integrated via plugin in the VS Code IDE. We will use it to generate code from one single java class based on existing templates. | ||
[step] | ||
-- | ||
|
||
createFile("cobigenjavaexample/core/src/main/java/com/example/application/cobigenjavaexample/customermanagement/dataaccess/api/CustomerEntity.java", "files/CustomerEntity.java") | ||
adaptTemplatesCobiGen() | ||
cobiGenJava("cobigenjavaexample/core/src/main/java/com/example/application/cobigenjavaexample/customermanagement/dataaccess/api/CustomerEntity.java",[5]) | ||
-- | ||
The CobiGen code generator will generate code for Transfer object, REST service handling and data access and so on. | ||
|
||
For example, the following files are generated by CobiGen when using the specified templates: | ||
|
||
(5) TO's: Generates the related Transfer Objects. | ||
- `devonfw/workspaces/main/cobigenjavaexample/api/src/main/java/com/example/application/cobigenjavaexample/customermanagement/logic/api/to/CustomerEto.java`{{open}} | ||
- `devonfw/workspaces/main/cobigenjavaexample/api/src/main/java/com/example/application/cobigenjavaexample/customermanagement/logic/api/to/CustomerSearchCriteriaTo.java`{{open}} | ||
|
||
==== | ||
==== | ||
Now you can go through api module of your java project and use Cobigen again to generate your front end (angular code). | ||
[step] | ||
== Running CobiGen to generate to your Angular code | ||
-- | ||
cobiGenJava("cobigenjavaexample/api/src/main/java/com/example/application/cobigenjavaexample/customermanagement/logic/api/to/CustomerEto.java",[1]) | ||
-- | ||
The angular code generation is done now and the generated code is stored in the workspace/main/devon4ng-applicaiton-template directory. Make sure the backend server url is configured in environments/environment.ts file. | ||
|
||
==== | ||
|
||
The below commands are used, to run the angular front end. | ||
npm install | ||
ng serve | ||
|
||
[step] | ||
-- | ||
runClientNg("devon4ng-application-template", { "startupTime": 200, "port": 4200, "path": "" }) | ||
-- | ||
==== | ||
Conclusion: In this Tutorial we learned the following things. | ||
* How to create a java project. | ||
* How to generate the Angular source code using CobiGen. | ||
==== |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can now add a subtitle with the == syntax. See https://github.com/devonfw-tutorials/tutorials/wiki/Development