tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #24233 from abpframework/issue-7556 

update bookstore tutorial (mongodb - angular)
pull/24249/head
sumeyye 3 months ago
committed by GitHub
parent
690c2c5a9f e468439bf8
commit
8abafc284b
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
5 changed files with 55 additions and 109 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 60
      docs/en/tutorials/book-store/part-02.md
  2. 42
      docs/en/tutorials/book-store/part-03.md
  3. 16
      docs/en/tutorials/book-store/part-05.md
  4. 36
      docs/en/tutorials/book-store/part-09.md
  5. 10
      docs/en/tutorials/book-store/part-10.md

60
docs/en/tutorials/book-store/part-02.md
View File

@ -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', loadComponent: () => 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.
@ -497,7 +469,7 @@ Open the `/src/app/book/book.component.html` and replace the content as shown be
</div>
<div class="card-body">
<ngx-datatable [rows]="book.items" [count]="book.totalCount" [list]="list" default>
<ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name"></ngx-datatable-column>
<ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name" />
<ngx-datatable-column [name]="'::Type' | abpLocalization" prop="type">
<ng-template let-row="row" ngx-datatable-cell-template>
{%{{{ '::Enum:BookType.' + row.type | abpLocalization }}}%}

42
docs/en/tutorials/book-store/part-03.md
View File

@ -742,8 +742,8 @@ export class BookComponent implements OnInit {
* Imported `FormGroup`, `FormBuilder` and `Validators` from `@angular/forms`.
* Added a `form: FormGroup` property.
* Added a `bookTypes` property as a list of `BookType` enum members. That will be used in form options.
* Injected with the `FormBuilder` inject function.. [FormBuilder](https://angular.io/api/forms/FormBuilder) provides convenient methods for generating form controls. It reduces the amount of boilerplate needed to build complex forms.
* Added a `buildForm` method to the end of the file and executed the `buildForm()` in the `createBook` method.
* Injected the `FormBuilder` with the inject function. [FormBuilder](https://angular.io/api/forms/FormBuilder) provides convenient methods for generating form controls. It reduces the amount of boilerplate that is needed to build complex forms.
* Added a `buildForm` method at the end of the file and executed the `buildForm()` in the `createBook` method.
* Added a `save` method.
Open `/src/app/book/book.component.html` and replace `<ng-template #abpBody> </ng-template>` with the following code part:
@ -765,7 +765,11 @@ Open `/src/app/book/book.component.html` and replace `<ng-template #abpBody> </n
<label for="book-type">Type</label><span> * </span>
<select class="form-control" id="book-type" formControlName="type">
<option [ngValue]="null">Select a book type</option>
<option [ngValue]="type.value" *ngFor="let type of bookTypes"> {%{{{ '::Enum:BookType.' + type.value | abpLocalization }}}%}</option>
@for (type of bookTypes; track type) {
<option [ngValue]="type.value">
{%{{{ '::Enum:BookType.' + type.value | abpLocalization }}}%}
</option>
}
</select>
</div>
@ -804,46 +808,24 @@ Also replace `<ng-template #abpFooter> </ng-template>` with the following code p
We've used [NgBootstrap datepicker](https://ng-bootstrap.github.io/#/components/datepicker/overview) in this component. So, we need to arrange the dependencies related to this component.
Open `/src/app/book/book.module.ts` and replace the content as below:
```js
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { BookRoutingModule } from './book-routing.module';
import { BookComponent } from './book.component';
import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap'; // add this line
@NgModule({
declarations: [BookComponent],
imports: [
BookRoutingModule,
SharedModule,
NgbDatepickerModule, // add this line
]
})
export class BookModule { }
```
* We imported `NgbDatepickerModule` to be able to use the date picker.
Open `/src/app/book/book.component.ts` and replace the content as below:
```js
import { ListService, PagedResultDto } from '@abp/ng.core';
import { Component, OnInit, inject } from '@angular/core';
import { BookService, BookDto, bookTypeOptions } from '@proxy/books';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
// added this line
import { NgbDateNativeAdapter, NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';
import { FormGroup, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
import { NgbDateNativeAdapter, NgbDateAdapter, NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
import { ThemeSharedModule } from '@abp/ng.theme.shared';
@Component({
selector: 'app-book',
templateUrl: './book.component.html',
styleUrls: ['./book.component.scss'],
imports: [ThemeSharedModule, ReactiveFormsModule, NgbDatepickerModule],
providers: [
ListService,
{ provide: NgbDateAdapter, useClass: NgbDateNativeAdapter } // add this line
{ provide: NgbDateAdapter, useClass: NgbDateNativeAdapter }
],
})
export class BookComponent implements OnInit {

16
docs/en/tutorials/book-store/part-05.md
View File

@ -311,23 +311,19 @@ We've only added the `.RequirePermissions(BookStorePermissions.Books.Default)` e
First step of the UI is to prevent unauthorized users to see the "Books" menu item and enter to the book management page.
Open the `/src/app/book/book-routing.module.ts` and replace with the following content:
Open the `/src/app/app.routes.ts` and replace with the following content:
````js
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { authGuard, permissionGuard } from '@abp/ng.core';
import { BookComponent } from './book.component';
const routes: Routes = [
{ path: '', component: BookComponent, canActivate: [authGuard, permissionGuard] },
{
path: 'books',
loadComponent: () => import('./book/book.component').then(c => BookComponent),
canActivate: [authGuard, permissionGuard],
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class BookRoutingModule {}
````
* Imported `authGuard` and `permissionGuard` from the `@abp/ng.core`.

36
docs/en/tutorials/book-store/part-09.md
View File

@ -477,49 +477,43 @@ That's all! You can run the application and try to edit an author.
## The Author Management Page
Run the following command line to create a new module, named `AuthorModule` in the root folder of the angular application:
Run the following command line to create a new component, named `AuthorComponent` in the root folder of the angular application:
```bash
yarn ng generate module author --module app --routing --route authors
yarn ng generate component author
```
This command should produce the following output:
```bash
> yarn ng generate module author --module app --routing --route authors
> yarn ng generate component author
yarn run v1.19.1
$ ng generate module author --module app --routing --route authors
CREATE src/app/author/author-routing.module.ts (344 bytes)
CREATE src/app/author/author.module.ts (349 bytes)
$ yarn ng generate component author
CREATE src/app/author/author.component.html (21 bytes)
CREATE src/app/author/author.component.spec.ts (628 bytes)
CREATE src/app/author/author.component.ts (276 bytes)
CREATE src/app/author/author.component.scss (0 bytes)
UPDATE src/app/app-routing.module.ts (1396 bytes)
Done in 2.22s.
```
### AuthorModule
### Author Component
Open the `/src/app/author/author.module.ts` and replace the content as shown below:
Open the `/src/app/author/author.component.ts` and replace the content as shown below:
```js
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { AuthorRoutingModule } from './author-routing.module';
import { AuthorComponent } from './author.component';
import { Component } from '@angular/core';
import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AuthorComponent],
imports: [SharedModule, AuthorRoutingModule, NgbDatepickerModule],
@Component({
selector: 'app-author',
templateUrl: './author.component.html',
styleUrls: ['./author.component.scss'],
imports: [NgbDatepickerModule],
})
export class AuthorModule {}
export class AuthorComponent {}
```
- Added the `SharedModule`. `SharedModule` exports some common modules needed to create user interfaces.
- `SharedModule` already exports the `CommonModule`, so we've removed the `CommonModule`.
- Added `NgbDatepickerModule` that will be used later on the author create and edit forms.
### Menu Definition
@ -753,13 +747,13 @@ Open the `/src/app/author/author.component.html` and replace the content as belo
</div>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name"></ngx-datatable-column>
<ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name" />
<ngx-datatable-column [name]="'::BirthDate' | abpLocalization">
<ng-template let-row="row" ngx-datatable-cell-template>
{%{{{ row.birthDate | date }}}%}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [name]="'::ShortBio' | abpLocalization" prop="shortBio"></ngx-datatable-column>
<ngx-datatable-column [name]="'::ShortBio' | abpLocalization" prop="shortBio" />
</ngx-datatable>
</div>
</div>

10
docs/en/tutorials/book-store/part-10.md
View File

@ -970,7 +970,7 @@ Book list page change is trivial. Open the `/src/app/book/book.component.html` a
[name]="'::Author' | abpLocalization"
prop="authorName"
[sortable]="false"
></ngx-datatable-column>
/>
````
When you run the application, you can see the *Author* column on the table:
@ -1098,9 +1098,11 @@ Open the `/src/app/book/book.component.html` and add the following form group ju
<label for="author-id">Author</label><span> * </span>
<select class="form-control" id="author-id" formControlName="authorId">
<option [ngValue]="null">Select author</option>
<option [ngValue]="author.id" *ngFor="let author of authors$ | async">
{%{{{ author.name }}}%}
</option>
@for (author of authors$ | async; track author) {
<option [ngValue]="author.id">
{%{{{ author.name }}}%}
</option>
}
</select>
</div>
````

Write Preview
Loading…
Cancel
Save