{{capital name space=true}} Web Application

{{description}}

Usage

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

Creating a new package in ~/workshop/<your-project-name>

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

Successfully created ~/workshop/<your-project-name>

Congratulation! your INFI project has been created.


$ cd #<your-project-name>
$ code . # Launch VSCode

The Directory structure

.
├── 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

typescript 4.6.2

angular 13.3.0 & angular/cli 13.3.8

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 [email protected] --save

ng-zorro-antd 13.3.2

ng add [email protected]

ngxs 3.7.4

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

npm install @ngxs/[email protected] --save

npm install @ngxs/[email protected] --save

auth0/angular-jwt 5.0.2

faker-js/faker 7.3.0

Code generating commands

Creating main module

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

Creating auth module

ng g m auth -m app

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

Creating services

ng g s services/InMemoryData

ng g s services/auth

Creating item module and compoments

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

Command templates

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


ng g m <module_name> -m app --route=<module_route> --routing

ng g c <module_path>/<component_name> -m <module_name> --change-detection OnPush -t false --skip-tests
ng g c <module_path>/<component_folder>/<component_name> -m <module_name> --change-detection OnPush -t false --flat --skip-tests

ng g g path/to/<guard_name> --implements=CanActivate

ng g s path/to/<service_name>

ng g r path/to/<resolver_name> --skip-tests

ng g interceptor path/to/<interceptor_name> --skip-tests

Build

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

ng serve --open

Mock user: [email protected], pass: bar

References

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