WML Schematics

The Angular WML Schematics library serves as a foundational toolkit for Angular web application development, establishing a solid baseline from which developers can construct and expand their projects. Central to this library is the concept of WMLUIProperty, a fundamental element that encapsulates the essence of web application components, down to the finest detail. This library not only streamlines the development process by providing pre-defined subclasses like WMLRoute for routing, WMLView for dynamic components, and WMLMotionUIProperty for CSS animations and transitions but also ensures consistency and scalability across your application. Dive into the documentation to explore how these building blocks can be orchestrated to create robust, maintainable, and dynamic web applications.

Installation

Terminal window


npm install -s --verbose @windmillcode/angular-wml-schematics

Usage

As you follow along close each terminal and open a new one so you can start in root

To create a layout

Terminal window


cd src/app/layouts



npx ng g @windmillcode/angular-wml-schematics:component --name=custom-layout --routing=true --route=layout --routes-file-path=src/app/app.routes.ts --standalone=true --cpnt-type=default

then navigate to the layout route and check for the element in dev tools you will need to add a router-outlet

To create a page

Terminal window


cd src/app/pages



npx ng g @windmillcode/angular-wml-schematics:component --name=custom-page --route-key=upload  --route=page  --routes-file-path=src/app/app.routes.ts --standalone=true --cpnt-type=default

you would first create a layout then the page then add the page as a child of the layout route

To create a container component

Terminal window


cd src/app/shared/components



npx ng g @windmillcode/angular-wml-schematics:component --name container-zero  --is-props-child=true  --module=shared --is-page-module=false

To make a service

Terminal window


cd src/app/shared/services



npx ng g @windmillcode/angular-wml-schematics:service --name custom

To create a service method

Terminal window


cd src/app/shared/services/custom



npx ng g @windmillcode/angular-wml-schematics:service-method --name getJsonData --service-name custom --api-route="/v2/list.json" --http-method get

To create a form

You will need a component and service to existTerminal window


cd src/app/shared/components/container-zero



npx ng g @windmillcode/angular-wml-schematics:form --api-call this.customService.getJsonData --fields firstName  lastName address

**Open A New terminal to try out the commands and see how the project gets updated

References

template-component Schematic

Property	Type	Description
name	string	Specifies the name of the component.
path	string	The path where the new component will be generated.
project	string	The name of the Angular project within which the component should be created.
cpntType	string	Determines the type of component to generate. Options include `default`, `library`, `default-zero`, and `library-zero`.
isIdIncluded	boolean	Indicates whether the component selector should include an ID. Defaults to `true`.
isPropsChild	boolean	Specifies whether the component is a presentation or a container.
standalone	boolean	Indicates whether the generated component is standalone. Defaults to `false`.
styleType	string	Specifies the preset SCSS style to use. Options include `type0`, `type1`, and `none`. Default is `none`.
routing	boolean	Indicates whether to create a routing module. Defaults to `false`.
routeKey	string	The route that gets added to the innerNav.urls object in the environment.dev.ts file.
route	string	The route path for a lazy-loaded module.
routesFilePath	string	Path for routes when using new routing configurations in Angular 17.
module	string	The declaring NgModule.
isPageModule	boolean	Whether the component is a page or not.

template-form Schematic

Property	Type	Description
name	string	The name of the form.
apiCall	string	Specifies the API call function that will be triggered upon form submission.
apiCallClass	string	Specifies the class for the API call’s argument.
path	string	The path where the new form-related code will be generated.
fields	string[]	An array of strings representing the field names within the form.
fieldType	string	Determines whether the fields are `simple` or `complex`. Default is `simple`.

template-library Schematic

Property	Type	Description
name	string	Specifies the name of the library.
path	string	The path where the library should be created.
entryFile	string	Designates the main entry point of the library. Typically a file like `public-api.ts`.
dest	string	The destination directory where the build artifacts of the library will be placed.
project	string	The Angular project within which the library will be created.

template-module Schematic

Property	Type	Description
name	string	The name of the module to be created.
path	string	Specifies the directory path where the new module will be generated.
project	string	Identifies the project within which the module will be created.
flat	boolean	Prevents the creation of a new folder for the module if set to `true`. Defaults to `false`.
routing	boolean	Indicates that a routing module should be generated alongside the standard module. Defaults to `false`.
route	string	Allows specifying a route path that will be added to the nearest module’s routing configuration.
module	string	The path to the module file that will import the new module.

template-service Schematic

Property	Type	Description
name	string	Specifies the name of the service to be created.
path	string	The path where the new service will be generated.
project	string	Identifies the Angular project within which the service should be created.
flat	boolean	Indicates that the service file should be created directly inside the specified path without creating a new folder. Defaults to `false`.
skipTests	boolean	Skips the generation of a `.spec` file for the service if set to `true`. Defaults to `false`.

template-serviceMethod Schematic

Property	Type	Description
name	string	The name of the method to be added.
entityName	string	Name of the entity coming back from the server as page data or page rows. Default is `entity`.
envFilePath	string	The environment file to update.
serviceName	string	The name of the service class where the new method will be injected.
apiRoute	string	The HTTP API route.
scrollName	string	The name of the scrollPageObject if transformationType is `scrolling`. Default is `placeholder`.
path	string	The path where the service is.
transformationType	string	Determines whether to use regular transformation or page transformation. Default is `default`.
httpMethod	string	The HTTP method for the service method (get, post, put, patch, delete, options, head). Default is `post`.
useDataSourceStrategy	boolean	Indicates whether to use the datasource strategy for the service method. Default is `true`.