{{capital name space=true}} Web Application

{{description}}

Usage

``bash
$ npm init roxa-angular-create # Recommends using lower kebab-case as project name
Need to install the following packages:
create-roxa-angular-create
Ok to proceed? (y)
? description #
? author name #
? author email #
? license MIT
? choose your fave os macOS

Creating a new package in ~/workshop/

Initializing a git repository
> git init
Installing dependencies using npm
> npm install

Successfully created ~/workshop/

Congratulation! your angular project has been created.


$ cd #
$ code . # Launch VSCode
`

The Directory structure

`bash
.
├── dist # Build directory
└── src # Source directory
├── app # Application directory
│ ├── auth # Authentication module
│ ├── item # An example module of Item CRUD
│ ├── main # The home page module
│ ├── models # Data models
│ ├── services # The WebAPI calls services
│ ├── store # A global state management
├── test # The unit test codes.
└── types # Type declarations
...
`

Dependencies

$3

$3

`bash

npm install -g @angular/cli@13

ng new {{name}} --minimal --skip-install --skip-git --commit -s false -t false

cd {{name}}

npm install

npm install angular-in-memory-web-api@0.13.0 --save

`

$3

`bash

ng add ng-zorro-antd@13.3.2

`

$3

`bash

npm install @ngxs/{store,logger-plugin,router-plugin,storage-plugin}@3.7.4 --save

npm install @ngxs/form-plugin@3.7.4 --save

npm install @ngxs/storage-plugin@3.7.4 --save

`

$3

$3

Code generating commands

$3

`bash

ng g m main -m app --route=main --routing

`

$3

`bash

ng g m auth -m app

ng g c auth -m auth --change-detection OnPush -t false --skip-tests

`

$3

`bash

ng g s services/InMemoryData

ng g s services/auth

`

$3

`bash

ng g m item -m main --route=main --routing

ng g c item/item-list -m item --change-detection OnPush -t false -s --skip-tests
ng g c item/item-list/item-list-table -m item --change-detection OnPush -t false -s --flat --skip-tests

ng g c item/item-desc -m item --change-detection OnPush -t false -s --skip-tests
ng g c item/item-desc/item-desc-fields -m item --change-detection OnPush -t false -s --flat --skip-tests

ng g c item/item-create -m item --change-detection OnPush -t false -s --skip-tests
ng g c item/item-create/item-create-form -m item --change-detection OnPush -t false -s --flat --skip-tests

ng g c item/item-edit -m item --change-detection OnPush -t false -s --skip-tests
ng g c item/item-edit/item-edit-form -m item --change-detection OnPush -t false -s --flat --skip-tests

ng g c item/item-dup -m item --change-detection OnPush -t false -s --skip-tests
ng g c item/item-dup/item-dup-form -m item --change-detection OnPush -t false -s --flat --skip-tests

ng g r item/item-resolve --skip-tests

`

$3

`bash

ng new --minimal --skip-install --skip-git --commit -s false -t false --package-manager yarn


ng g m -m app --route= --routing

ng g c / -m --change-detection OnPush -t false --skip-tests
ng g c // -m --change-detection OnPush -t false --flat --skip-tests

ng g g path/to/ --implements=CanActivate

ng g s path/to/

ng g r path/to/ --skip-tests

ng g interceptor path/to/ --skip-tests

`

Build

`bash

ng build --base-href /{{name}}/

docker build -f docker/Dockerfile . -t {image_registry_url}/{image_name}:{image_tag}

docker push {image_registry_url}/{image_name}:{image_tag}

`


Serve

`bash

ng serve --open

``

Mock user: foo@bar.com, pass: bar

References

* NodeJS
* NPM
* NVM
* JavaScript
* TypeScript
* Angular
* NGXS
* NG-ZORRO
* Fakerjs