Angular16MaterialStarter

This project was generated with Angular CLI version 16.x.

Code scaffolding

bookmarks:

Basics

Feature modules

A Feature module contains a set of consistent business GUI (so NOT services). A feature module is assigned to a consistent business processes (i.e. 'order' (for order management), 'bill', 'catalog', .. even 'admin').

The main/default page of a feature module could be a dashboard (i.e. : counter per order status) or redirecting to the main page of the business process (place an order). A feature module contain its own / feature wide routing module.

A feature module should not depend on a another feature module.

initializing

add a demo module with its routing: ng generate module demo --routing add a main feature page to demo: ng generate component demo/pages/demo -m demo --flat --standalone false

then add to demo-routing.module.ts

const routes: Routes = [
    {   path: 'demo', component: DemoComponent,
    },
];

then import this module in app.module.ts:

@NgModule({
 declarations: [AppComponent],
 imports: [
    //...
  DemoModule,
 ],
 providers: [],
 bootstrap: [AppComponent],
})

add (sub) pages

add a sub page to demo feature : ng generate component demo/pages/demo-table --standalone false -m demo

then add to demo-routing.module.ts

const routes: Routes = [
  {
    path: 'demo',
    component: DemoComponent,
    children: [
      // list "sub" pages from this demo feature components
      { path: 'demo-table', component: DemoTableComponent,
      data: { animation: "slideRight" },
      },
    ],
  },
];

data attribute is used to config. transition while changing route

... and to demo feature page: demo.component.html

<ul>
  <li><a routerLink="demo-table">Table demo</a></li>
</ul>
<router-outlet></router-outlet>

Alternatively, you could use a navigation by tabs in demo.component.html

<app-tabs-nav path="demo"></app-tabs-nav>

...where path ith the path (route) of the 'demo' module

Shared components

Share component are components & modules should not have any dependency on any of the other modules in the application.

The shared module must declare the components, pipes, and directives using the declarations metadata and export it using the exports metadata

Other Modules can import the shared modules and use the exported components, directives & pipes

The Services must not be defined here. Since the shared modules are imported everywhere, it may create a new instance of the service if it is imported in the lazy loaded modules.

Tips: The commonly required angular modules like ( CommonModule, FormsModule, etc) or third party modules can be imported here and re-exported. The other module importing the shared module does not have to import those modules.

add new shared module (if not exist) [not recommended]

If you don't plan to use recommended standalone components, add a shared module : ng generate module shared

add new shared component

add a component in shared folder/module : ng generate component shared/components/table-expandable-rows -m shared

or (for standalone component recommended)

add a component in shared folder : ng generate component shared/components/table-expandable-rows --standalone --view-encapsulation None

Core module

This module contain all singletons, and so, all services.

As services (& associated models) could be related to feature module ( i.e. OrderService, OrderPlacementService...) it should be organized in sub folders / modules (reflecting the feature modules organization)

initializing core

add a github module: ng generate module core/github

add a service to github: ng generate service core/github/services/github

then, add it to module:

@NgModule({
declarations: [],
imports: [
  CommonModule
],
providers: [
  GithubService
],
})

add a model to github: ng generate interface core/github/models/issue
add a datasource for issues to github: ng generate class core/github/models/IssuesDataSource

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

sergehas/angular-16-material-demos