howto_angular client generation

Table of Contents

• Angular4 Client Generation
  • Step 1: Angular4 workspace
  • Step 2: Install Node dependencies
    • Step 3: Config.js and ConfigDevelopment.js
  • CobiGen Templates
  • Generating
    • Input
    • Wizard
    • Deploying

Angular4 Client Generation

The generation can create a full Angular4 client using the oasp4js-application-template package located at workspaces/examples folder of the distribution. For more details about this package, please refer here.

You have to have into account that the TypeScript merging using CobiGen needs Node 6 or higher to be installed at your machine.

Step 1: Angular4 workspace

Copy from workspaces\examples of your DevonFW distribution the oasp4js-application-template folder into the root of your oasp4j project parent folder.

• root/

  • oasp4js-application-template/

  • oasp4j-project-parent/

    • core/

    • server/

Step 2: Install Node dependencies

Open a terminal into oasp4js-application-template copied and just run the command:

yarn

This will start the installation of all node packages needed by the project into the node_modules folder.

Refresh your OASP4J project (F5).

Step 3: Config.js and ConfigDevelopment.js

Edit this two files to configure the endpoint where the ajax calls have to be made. ConfigDevelopment overrides the values in Config.js but it is skipped when doing production builds.

During development you will be deploying client and server code independently, this is more productive since you avoid building the whole package only for changes on the JavaScript files. What this is that JavaScript code has to make ajax request to a different domain to where the code is being called.

To enable this and avoid getting cross domain browser errors you have to enable CORS on the server side.

CobiGen Templates

Before begin the generation, import the CobiGen_templates project included at yor DevonFW distribution into your Eclipse work space

The project has the templates for the Sencha Client and Sencha Architect project generation.

Generating

Input

The input file for the generation must be the Eto file because is the object transferred between the server and the client.

Wizard

If the templates are imported at the Eclipse workspace, and the input file is an Eto, the wizard will open, this increments can be chosen:

• Sencha Client App

• Sencha Architect Project

For the first time generation, the APPNAME_architect_project folder will be created at the root of the origin project with all the folders and files generated. After that, all the next generations will be merged at thus folders.

Deploying

• To deploy the Sencha Client App:

  1. Just run over the APPNAME folder from the console the following command:

sencha app watch

• To deploy the Sencha Architect Project

  1. just double click over the .xds file or opening it with the Sencha Architect menu.