Browse Source

Update tutorial for bookstore

Updated the tutorial to reference ABP v9.3.0 instead of v3.1.0, and revised instructions to use Angular's component-based routing instead of module-based routing. Adjusted code samples and explanations to reflect changes in Angular CLI output and route configuration.
pull/24233/head
Fahri Gedik 3 months ago
parent
commit
af424c485e
  1. 58
      docs/en/tutorials/book-store/part-02.md

58
docs/en/tutorials/book-store/part-02.md

@ -315,7 +315,7 @@ This is a fully working, server side paged, sorted and localized table of books.
## Install NPM packages
> Notice: This tutorial is based on the ABP v3.1.0+ If your project version is older, then please upgrade your solution. Check the [migration guide](../../framework/ui/angular/migration-guide-v3.md) if you are upgrading an existing project with v2.x.
> Notice: This tutorial is based on the ABP v9.3.0+ If your project version is older, then please upgrade your solution. Check the [migration guide](../../framework/ui/angular/migration-guide-v3.md) if you are upgrading an existing project with v2.x.
If you haven't done it before, open a new command line interface (terminal window) and go to your `angular` folder and then run the `yarn` command to install the NPM packages:
@ -330,69 +330,42 @@ It's time to create something visible and usable! There are some tools that we w
- [Ng Bootstrap](https://ng-bootstrap.github.io/#/home) will be used as the UI component library.
- [Ngx-Datatable](https://swimlane.gitbook.io/ngx-datatable/) will be used as the datatable library.
Run the following command line to create a new module, named `BookModule` in the root folder of the angular application:
Run the following command line to create a new component, named `BookComponent` in the root folder of the angular application:
```bash
yarn ng generate module book --module app --routing --route books
yarn ng generate component book
```
This command should produce the following output:
````bash
> yarn ng generate module book --module app --routing --route books
yarn run v1.19.1
$ ng generate module book --module app --routing --route books
CREATE src/app/book/book-routing.module.ts (336 bytes)
CREATE src/app/book/book.module.ts (335 bytes)
CREATE src/app/book/book.component.html (19 bytes)
CREATE src/app/book/book.component.spec.ts (614 bytes)
CREATE src/app/book/book.component.ts (268 bytes)
> yarn ng generate component book
yarn run v1.22.22
$ ng generate component book
CREATE src/app/book/book.component.spec.ts (537 bytes)
CREATE src/app/book/book.component.ts (189 bytes)
CREATE src/app/book/book.component.scss (0 bytes)
UPDATE src/app/app-routing.module.ts (1289 bytes)
CREATE src/app/book/book.component.html (20 bytes)
Done in 3.88s.
````
### BookModule
Open the `/src/app/book/book.module.ts` and replace the content as shown below:
````js
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { BookRoutingModule } from './book-routing.module';
import { BookComponent } from './book.component';
@NgModule({
declarations: [BookComponent],
imports: [
BookRoutingModule,
SharedModule
]
})
export class BookModule { }
````
* Added the `SharedModule`. `SharedModule` exports some common modules needed to create user interfaces.
* `SharedModule` already exports the `CommonModule`, so we've removed the `CommonModule`.
### Routing
The generated code places the new route definition to the `src/app/app-routing.module.ts` file as shown below:
The generated code places the new route definition to the `src/app/app.routes.ts` file as shown below:
````js
const routes: Routes = [
export const routes: Routes = [
// other route definitions...
{ path: 'books', loadChildren: () => import('./book/book.module').then(m => m.BookModule) },
{ path : 'books', loadChildren: () => import('./book/book.component').then(c => c.BookComponent) },
];
````
Now, open the `src/app/route.provider.ts` file and replace the `configureRoutes` function declaration as shown below:
```js
function configureRoutes(routes: RoutesService) {
return () => {
function configureRoutes() {
const routes = inject(RoutesService);
routes.add([
{
path: '/',
@ -416,7 +389,6 @@ function configureRoutes(routes: RoutesService) {
},
]);
};
}
```
`RoutesService` is a service provided by the ABP to configure the main menu and the routes.

Loading…
Cancel
Save