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
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
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
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
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
cd src/app/shared/services
npx ng g @windmillcode/angular-wml-schematics:service --name custom
To create a service method
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
You will need a component and service to exist
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.
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.
Property Type Description name string The name of the scroll object. path string The path where the target class is. serviceFilePath string The path where the service is, to be passed to template-service-method schematic. serviceMethodName string The name of the service method, to be passed to template-service-method schematic. serviceMethodApiRoute string The HTTP API route, to be passed to template-service-method schematic. serviceMethodEntityName string To be passed to template-service-method schematic, look up entityName definition there. Default is entity. serviceMethodUseDataSourceStrategy boolean Whether to use the datasource strategy for the service method. Default is true. createServiceMethod boolean Indicates whether to create the service method. Default is true.
v18.1.3001 [8/4/24]
updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3002 [8/4/24]
updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3003 [8/5/24]
updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3003 [8/5/24]
updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3004 [8/5/24]
updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3005 [8/5/24]
updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3006 [8/5/24]
updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3007 [8/5/24]
updated package to conform with @windmillcode/angular-wml-components-base
v18.1.4000 [8/14/24]
updated package to conform with @windmillcode/angular-wml-components-base
v18.1.4001 [8/14/24]
updated package to conform with @windmillcode/angular-wml-components-base
v18.2.0 [8/15/24]
updated package to conform with @windmillcode/angular-wml-components-base
v18.2.1 [8/20/24]
updated package to conform with @windmillcode/angular-wml-components-base
v18.2.1000 [8/22/24]
updated package to reflect the version 18.2.1 of @angular/cli package
v18.2.2000 [8/30/24]
updated package to reflect the version 18.2.2 of @angular/cli package
v18.2.2100 [9/1/24]
updated package to conform with @windmillcode/angular-wml-components-base
v18.2.2101 [9/1/24]
updated package to conform with @windmillcode/angular-wml-components-base
v18.2.2200 [9/3/24]
updated package to conform with @windmillcode/angular-wml-components-base
v18.2.3000 [9/4/24]
updated package to reflect the version 18.2.3 of @angular/cli package
v18.2.3100 [9/8/24]
updated package to reflect the version 18.2.3 of @angular/cli package
v18.2.3112 [9/10/24]
v18.2.3200 [9/16/24]
updated package to conform with @windmillcode/wml-components-base
v18.2.4000 [9/16/24]
updated package to reflect the version 18.2.4 of @angular/cli package