diff --git a/docs/en/Tutorials/Part-1.md b/docs/en/Tutorials/Part-1.md
index 53745f9b59..c74f7d8c85 100644
--- a/docs/en/Tutorials/Part-1.md
+++ b/docs/en/Tutorials/Part-1.md
@@ -1,4 +1,4 @@
-# ASP.NET Core {{UI_Value}} Tutorial - Part 1
+# Web Application Development Tutorial - Part 1: Creating the Server Side
````json
//[doc-params]
{
@@ -29,10 +29,11 @@ In this tutorial series, you will build an ABP based web application named `Acme
This tutorial is organized as the following parts;
-- **Part-1: Creating the project and book list page (this part)**
-- [Part-2: Creating, updating and deleting books](part-2.md)
-- [Part-3: Integration tests](part-3.md)
-- [Part-4: Authorization](Part-4.md)
+- **Part 1: Creating the server side (this part)**
+- [Part 2: The book list page](Part-2.md)
+- [Part 3: Creating, updating and deleting books](Part-3.md)
+- [Part 4: Integration tests](Part-4.md)
+- [Part 5: Authorization](Part-5.md)
### Source Code
@@ -490,538 +491,6 @@ If you try to execute the `[GET] /api/app/book` API to get a list of books, the
That's pretty cool since we haven't written a single line of code to create the API controller, but now we have a fully working REST API!
-{{if UI == "MVC"}}
+## The Next Part
-## Dynamic JavaScript Proxies
-
-It's common to call the HTTP API endpoints via AJAX from the **JavaScript** side. You can use `$.ajax` or another tool to call the endpoints. However, ABP offers a better way.
-
-ABP **dynamically** creates **[JavaScript Proxies](../UI/AspNetCore/)** for all API endpoints. So, you can use any **endpoint** just like calling a **JavaScript function**.
-
-### Testing in Developer Console of the Browser
-
-You can easily test the JavaScript proxies using your favorite browser's **Developer Console**. Run the application, open your browser's **developer tools** (*shortcut is generally F12*), switch to the **Console** tab, type the following code and press enter:
-
-````js
-acme.bookStore.books.book.getList({}).done(function (result) { console.log(result); });
-````
-
-* `acme.bookStore.books` is the namespace of the `BookAppService` converted to [camelCase](https://en.wikipedia.org/wiki/Camel_case).
-* `book` is the conventional name for the `BookAppService` (removed `AppService` postfix and converted to camelCase).
-* `getList` is the conventional name for the `GetListAsync` method defined in the `CrudAppService` base class (removed `Async` postfix and converted to camelCase).
-* `{}` argument is used to send an empty object to the `GetListAsync` method which normally expects an object of type `PagedAndSortedResultRequestDto` that is used to send paging and sorting options to the server (all properties are optional with default values, so you can send an empty object).
-* `getList` function returns a `promise`. You can pass a callback to the `then` (or `done`) function to get the result returned from the server.
-
-Running this code produces the following output:
-
-
-
-You can see the **book list** returned from the server. You can also check the **network** tab of the developer tools to see the client to server communication:
-
-
-
-Let's **create a new book** using the `create` function:
-
-````js
-acme.bookStore.books.book.create({
- name: 'Foundation',
- type: 7,
- publishDate: '1951-05-24',
- price: 21.5
- }).then(function (result) {
- console.log('successfully created the book with id: ' + result.id);
- });
-````
-
-You should see a message in the console something like that:
-
-````text
-successfully created the book with id: 439b0ea8-923e-8e1e-5d97-39f2c7ac4246
-````
-
-Check the `Books` table in the database to see the new book row. You can try `get`, `update` and `delete` functions yourself.
-
-We will use these dynamic proxy functions in the next sections to communicate to the server.
-
-## Create a Books Page
-
-It's time to create something visible and usable! Instead of classic MVC, we will use the [Razor Pages UI](https://docs.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start) approach which is recommended by Microsoft.
-
-Create `Books` folder under the `Pages` folder of the `Acme.BookStore.Web` project. Add a new Razor Page by right clicking the Books folder then selecting **Add > Razor Page** menu item. Name it as `Index`:
-
-
-
-Open the `Index.cshtml` and change the whole content as shown below:
-
-````html
-@page
-@using Acme.BookStore.Web.Pages.Books
-@model IndexModel
-
-
Books
-````
-
-`Index.cshtml.cs` content should be like that:
-
-```csharp
-using Microsoft.AspNetCore.Mvc.RazorPages;
-
-namespace Acme.BookStore.Web.Pages.Books
-{
- public class IndexModel : PageModel
- {
- public void OnGet()
- {
-
- }
- }
-}
-```
-
-### Add Books Page to the Main Menu
-
-Open the `BookStoreMenuContributor` class in the `Menus` folder and add the following code to the end of the `ConfigureMainMenuAsync` method:
-
-````csharp
-context.Menu.AddItem(
- new ApplicationMenuItem(
- "BooksStore",
- l["Menu:BookStore"],
- icon: "fa fa-book"
- ).AddItem(
- new ApplicationMenuItem(
- "BooksStore.Books",
- l["Menu:Books"],
- url: "/Books"
- )
- )
-);
-````
-
-{{end}}
-
-### Localization
-
-Localization texts are located under the `Localization/BookStore` folder of the `Acme.BookStore.Domain.Shared` project:
-
-
-
-Open the `en.json` (*the English translations*) file and change the content as below:
-
-````json
-{
- "Culture": "en",
- "Texts": {
- "Menu:Home": "Home",
- "Welcome": "Welcome",
- "LongWelcomeMessage": "Welcome to the application. This is a startup project based on the ABP framework. For more information, visit abp.io.",
- "Menu:BookStore": "Book Store",
- "Menu:Books": "Books",
- "Actions": "Actions",
- "Edit": "Edit",
- "PublishDate": "Publish date",
- "NewBook": "New book",
- "Name": "Name",
- "Type": "Type",
- "Price": "Price",
- "CreationTime": "Creation time",
- "AreYouSureToDelete": "Are you sure you want to delete this item?",
- "Enum:BookType:0": "Undefined",
- "Enum:BookType:1": "Adventure",
- "Enum:BookType:2": "Biography",
- "Enum:BookType:3": "Dystopia",
- "Enum:BookType:4": "Fantastic",
- "Enum:BookType:5": "Horror",
- "Enum:BookType:6": "Science",
- "Enum:BookType:7": "Science fiction",
- "Enum:BookType:8": "Poetry"
- }
-}
-````
-
-* Localization key names are arbitrary. You can set any name. We prefer some conventions for specific text types;
- * Add `Menu:` prefix for menu items.
- * Use `Enum::` naming convention to localize the enum members. When you do it like that, ABP can automatically localize the enums in some proper cases.
-
-If a text is not defined in the localization file, it **fallbacks** to the localization key (as ASP.NET Core's standard behavior).
-
-> ABP's localization system is built on [ASP.NET Core's standard localization](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization) system and extends it in many ways. See the [localization document](../Localization.md) for details.
-
-{{if UI == "MVC"}}
-
-Run the project, login to the application with the username `admin` and the password `1q2w3E*` and see the new menu item has been added to the main menu:
-
-
-
-When you click to the Books menu item under the Book Store parent, you are being redirected to the new empty Books Page.
-
-### Book List
-
-We will use the [Datatables.net](https://datatables.net/) jQuery library to show the book list. Datatables library completely work via AJAX, it is fast, popular and provides a good user experience.
-
-> Datatables library is configured in the startup template, so you can directly use it in any page without including any style or script file to your page.
-
-#### Index.cshtml
-
-Change the `Pages/Books/Index.cshtml` as following:
-
-````html
-@page
-@using Acme.BookStore.Localization
-@using Acme.BookStore.Web.Pages.Books
-@using Microsoft.Extensions.Localization
-@model IndexModel
-@inject IStringLocalizer L
-@section scripts
-{
-
-}
-
-
-
@L["Books"]
-
-
-
-
-
-````
-
-* `abp-script` [tag helper](https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro) is used to add external **scripts** to the page. It has many additional features compared to standard `script` tag. It handles **minification** and **versioning**. See the [bundling & minification document](../UI/AspNetCore/Bundling-Minification.md) for details.
-* `abp-card` is a tag helper for Twitter Bootstrap's [card component](https://getbootstrap.com/docs/4.5/components/card/). There are other useful tag helpers provided by the ABP Framework to easily use most of the [bootstrap](https://getbootstrap.com/) components. You could use the regular HTML tags instead of these tag helpers, but using tag helpers reduces HTML code and prevents errors by help the of IntelliSense and compile time type checking. Further information, see the [tag helpers](../UI/AspNetCore/Tag-Helpers/Index.md) document.
-
-#### Index.js
-
-Create an `Index.js` file under the `Pages/Books` folder:
-
-
-
-The content of the file is shown below:
-
-````js
-$(function () {
- var l = abp.localization.getResource('BookStore');
-
- var dataTable = $('#BooksTable').DataTable(
- abp.libs.datatables.normalizeConfiguration({
- serverSide: true,
- paging: true,
- order: [[1, "asc"]],
- searching: false,
- scrollX: true,
- ajax: abp.libs.datatables.createAjax(acme.bookStore.books.book.getList),
- columnDefs: [
- {
- title: l('Name'),
- data: "name"
- },
- {
- title: l('Type'),
- data: "type",
- render: function (data) {
- return l('Enum:BookType:' + data);
- }
- },
- {
- title: l('PublishDate'),
- data: "publishDate",
- render: function (data) {
- return luxon
- .DateTime
- .fromISO(data, {
- locale: abp.localization.currentCulture.name
- }).toLocaleString();
- }
- },
- {
- title: l('Price'),
- data: "price"
- },
- {
- title: l('CreationTime'), data: "creationTime",
- render: function (data) {
- return luxon
- .DateTime
- .fromISO(data, {
- locale: abp.localization.currentCulture.name
- }).toLocaleString(luxon.DateTime.DATETIME_SHORT);
- }
- }
- ]
- })
- );
-});
-````
-
-* `abp.localization.getResource` gets a function that is used to localize text using the same JSON file defined in the server side. In this way, you can share the localization values with the client side.
-* `abp.libs.datatables.normalizeConfiguration` is a helper function defined by the ABP Framework. There's no requirement to use it, but it simplifies the [Datatables](https://datatables.net/) configuration by providing conventional default values for missing options.
-* `abp.libs.datatables.createAjax` is another helper function to adapt ABP's dynamic JavaScript API proxies to [Datatable](https://datatables.net/)'s expected parameter format
-* `acme.bookStore.books.book.getList` is the dynamic JavaScript proxy function introduced before.
-* [luxon](https://moment.github.io/luxon/) library is also a standard library that is pre-configured in the solution, so you can use to perform date/time operations easily.
-
-> See [Datatables documentation](https://datatables.net/manual/) for all configuration options.
-
-## Run the Final Application
-
-You can run the application! The final UI of this part is shown below:
-
-
-
-This is a fully working, server side paged, sorted and localized table of books.
-
-{{end}}
-
-{{if UI == "NG"}}
-
-## Angular UI Development
-### Create the books page
-
-It's time to create something visible and usable! There are some tools that we will use when developing ABP Angular frontend application:
-
-- [Angular CLI](https://angular.io/cli) will be used to create modules, components and services.
-- [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.
-- [Visual Studio Code](https://code.visualstudio.com/) will be used as the code editor (you can use your favorite editor).
-
-### Install NPM packages
-
-Open a new command line interface (terminal window) and go to your `angular` folder and then run `yarn` command to install NPM packages:
-
-```bash
-yarn
-```
-
-### BookModule
-
-Run the following command line to create a new module, named `BookModule`:
-
-```bash
-yarn ng generate module book --routing true
-```
-
-
-
-### Routing
-
-Open the `app-routing.module.ts` file in `src\app` folder and add a route as shown below:
-
-```js
-const routes: Routes = [
-// ...
-// added a new route to the routes array
- {
- path: 'books',
- loadChildren: () => import('./book/book.module').then(m => m.BookModule)
- }
-]
-```
-
-* We added a lazy-loaded route. See the [Lazy-Loading Feature Modules](https://angular.io/guide/lazy-loading-ngmodules#lazy-loading-feature-modules).
-
-Open the `route.provider.ts` file in `src\app` folder and replace the content as below:
-
-```js
-import { RoutesService, eLayoutType } from '@abp/ng.core';
-import { APP_INITIALIZER } from '@angular/core';
-
-export const APP_ROUTE_PROVIDER = [
- { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
-];
-
-function configureRoutes(routes: RoutesService) {
- return () => {
- routes.add([
- //...
- // added below element
- {
- path: '/books',
- name: '::Menu:Books',
- iconClass: 'fas fa-book',
- order: 101,
- layout: eLayoutType.application,
- },
- ]);
- };
-}
-```
-
-* We added a new route element to show a navigation element labeled "Books" on the menu.
- * `path` is the URL of the route.
- * `name` is the menu item name. A Localization key can be passed.
- * `iconClass` is the icon of the menu item.
- * `order` is the order of the menu item. We define 101 to show the route after the "Administration" item.
- * `layout` is the layout of the BooksModule's routes. `eLayoutType.application`, `eLayoutType.account` or `eLayoutType.empty` can be defined.
-
-For more information, see the [RoutesService document](https://docs.abp.io/en/abp/latest/UI/Angular/Modifying-the-Menu.md#via-routesservice).
-
-#### Book List Component
-
-Run the command below on the terminal in the root folder to generate a new component, named book-list:
-
-```bash
-yarn ng generate component book/book-list
-```
-
-
-
-Open `book.module.ts` file in the `app\book` folder and replace the content as below:
-
-```js
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { BookRoutingModule } from './book-routing.module';
-import { BookListComponent } from './book-list/book-list.component';
-import { SharedModule } from '../shared/shared.module'; //<== added this line ==>
-
-@NgModule({
- declarations: [BookListComponent],
- imports: [
- CommonModule,
- BookRoutingModule,
- SharedModule, //<== added this line ==>
- ],
-})
-export class BookModule {}
-```
-
-* We imported `SharedModule` and added to `imports` array.
-
-Open `book-routing.module.ts` file in the `app\book` folder and replace the content as below:
-
-```js
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { BookListComponent } from './book-list/book-list.component'; // <== added this line ==>
-
-// <== replaced routes ==>
-const routes: Routes = [
- {
- path: '',
- component: BookListComponent,
- },
-];
-
-@NgModule({
- imports: [RouterModule.forChild(routes)],
- exports: [RouterModule]
-})
-export class BookRoutingModule { }
-```
-
-* We imported `BookListComponent` and replaced `routes` const.
-
-Run `yarn start` and wait for Angular to serve the application:
-
-```bash
-yarn start
-```
-
-Open the browser and navigate to http://localhost:4200/books. We'll see **book-list works!** text on the books page:
-
-
-
-### Generate Proxies
-
-ABP CLI provides `generate-proxy` command that generates client proxies for your HTTP APIs to make easy to consume your services from the client side. Before running generate-proxy command, your host must be up and running. See the [CLI documentation](../CLI.md)
-
-Run the following command in the `angular` folder:
-
-```bash
-abp generate-proxy --module app
-```
-
-
-
-The generated files looks like below:
-
-
-
-### BookListComponent
-
-Open the `book-list.component.ts` file in `app\book\book-list` folder and replace the content as below:
-
-```js
-import { ListService, PagedResultDto } from '@abp/ng.core';
-import { Component, OnInit } from '@angular/core';
-import { BookDto, BookType } from '../models';
-import { BookService } from '../services';
-
-@Component({
- selector: 'app-book-list',
- templateUrl: './book-list.component.html',
- styleUrls: ['./book-list.component.scss'],
- providers: [ListService],
-})
-export class BookListComponent implements OnInit {
- book = { items: [], totalCount: 0 } as PagedResultDto;
-
- booksType = BookType;
-
- constructor(public readonly list: ListService, private bookService: BookService) {}
-
- ngOnInit() {
- const bookStreamCreator = (query) => this.bookService.getListByInput(query);
-
- this.list.hookToQuery(bookStreamCreator).subscribe((response) => {
- this.book = response;
- });
- }
-}
-```
-
-* We imported and injected the generated `BookService`.
-* We implemented the [ListService](https://docs.abp.io/en/abp/latest/UI/Angular/List-Service) that is a utility service to provide easy pagination, sorting, and search implementation.
-
-Open the `book-list.component.html` file in `app\book\book-list` folder and replace the content as below:
-
-```html
-
-```
-
-* We added HTML code of book list page.
-
-Now you can see the final result on your browser:
-
-
-
-The file system structure of the project:
-
-
-
-In this tutorial we have applied the rules of official [Angular Style Guide](https://angular.io/guide/styleguide#file-tree).
-
-{{end}}
-
-## Next Part
-
-See the [part 2](Part-2.md) for creating, updating and deleting books.
+See the [next part](Part-2.md) of this tutorial.
diff --git a/docs/en/Tutorials/Part-2.md b/docs/en/Tutorials/Part-2.md
index c744d85229..1a3c2db7fd 100644
--- a/docs/en/Tutorials/Part-2.md
+++ b/docs/en/Tutorials/Part-2.md
@@ -1,11 +1,10 @@
-# ASP.NET Core {{UI_Value}} Tutorial - Part 2
+# Web Application Development Tutorial - Part 2: The Book List Page
````json
//[doc-params]
{
"UI": ["MVC","NG"]
}
````
-
{{
if UI == "MVC"
DB="ef"
@@ -30,10 +29,11 @@ In this tutorial series, you will build an ABP based web application named `Acme
This tutorial is organized as the following parts;
-- [Part I: Creating the project and book list page](part-1.md)
-- **Part-2: Creating, updating and deleting books (this part)**
-- [Part-3: Integration tests](part-3.md)
-- [Part-4: Authorization](Part-4.md)
+- [Part 1: Creating the server side](Part-1.md)
+- **Part 2: The book list page (this part)**
+- [Part 3: Creating, updating and deleting books](Part-3.md)
+- [Part 4: Integration tests](Part-4.md)
+- [Part 5: Authorization](Part-5.md)
### Source Code
@@ -41,113 +41,178 @@ You can find the completed solution on {{if UI == "MVC"}}[the GitHub repository]
{{if UI == "MVC"}}
-## Creating a New Book
+## Dynamic JavaScript Proxies
-In this section, you will learn how to create a new modal dialog form to create a new book. The modal dialog will look like in the image below:
+It's common to call the HTTP API endpoints via AJAX from the **JavaScript** side. You can use `$.ajax` or another tool to call the endpoints. However, ABP offers a better way.
-
+ABP **dynamically** creates **[JavaScript Proxies](../UI/AspNetCore/)** for all API endpoints. So, you can use any **endpoint** just like calling a **JavaScript function**.
-### Create the Modal Form
+### Testing in Developer Console of the Browser
-Create a new razor page, named `CreateModal.cshtml` under the `Pages/Books` folder of the `Acme.BookStore.Web` project.
+You can easily test the JavaScript proxies using your favorite browser's **Developer Console**. Run the application, open your browser's **developer tools** (*shortcut is generally F12*), switch to the **Console** tab, type the following code and press enter:
-
+````js
+acme.bookStore.books.book.getList({}).done(function (result) { console.log(result); });
+````
-#### CreateModal.cshtml.cs
+* `acme.bookStore.books` is the namespace of the `BookAppService` converted to [camelCase](https://en.wikipedia.org/wiki/Camel_case).
+* `book` is the conventional name for the `BookAppService` (removed `AppService` postfix and converted to camelCase).
+* `getList` is the conventional name for the `GetListAsync` method defined in the `CrudAppService` base class (removed `Async` postfix and converted to camelCase).
+* `{}` argument is used to send an empty object to the `GetListAsync` method which normally expects an object of type `PagedAndSortedResultRequestDto` that is used to send paging and sorting options to the server (all properties are optional with default values, so you can send an empty object).
+* `getList` function returns a `promise`. You can pass a callback to the `then` (or `done`) function to get the result returned from the server.
-Open the `CreateModal.cshtml.cs` file (`CreateModalModel` class) and replace with the following code:
+Running this code produces the following output:
-````C#
-using System.Threading.Tasks;
-using Acme.BookStore.Books;
-using Microsoft.AspNetCore.Mvc;
+
-namespace Acme.BookStore.Web.Pages.Books
-{
- public class CreateModalModel : BookStorePageModel
- {
- [BindProperty]
- public CreateUpdateBookDto Book { get; set; }
+You can see the **book list** returned from the server. You can also check the **network** tab of the developer tools to see the client to server communication:
- private readonly IBookAppService _bookAppService;
+
- public CreateModalModel(IBookAppService bookAppService)
- {
- _bookAppService = bookAppService;
- }
+Let's **create a new book** using the `create` function:
- public void OnGet()
- {
- Book = new CreateUpdateBookDto();
- }
+````js
+acme.bookStore.books.book.create({
+ name: 'Foundation',
+ type: 7,
+ publishDate: '1951-05-24',
+ price: 21.5
+ }).then(function (result) {
+ console.log('successfully created the book with id: ' + result.id);
+ });
+````
- public async Task OnPostAsync()
- {
- await _bookAppService.CreateAsync(Book);
- return NoContent();
- }
- }
-}
+You should see a message in the console something like that:
+
+````text
+successfully created the book with id: 439b0ea8-923e-8e1e-5d97-39f2c7ac4246
````
-* This class is derived from the `BookStorePageModel` instead of standard `PageModel`. `BookStorePageModel` indirectly inherits the `PageModel` and adds some common properties & methods that can be shared in your page model classes.
-* `[BindProperty]` attribute on the `Book` property binds post request data to this property.
-* This class simply injects the `IBookAppService` in the constructor and calls the `CreateAsync` method in the `OnPostAsync` handler.
-* It creates a new `CreateUpdateBookDto` object in the `OnGet` method. ASP.NET Core can work without creating a new instance like that. However, it doesn't create an instance for you and if your class has some default value assignments or code execution in the class constructor, they won't work. For this case, we set default values for some of the `CreateUpdateBookDto` properties.
+Check the `Books` table in the database to see the new book row. You can try `get`, `update` and `delete` functions yourself.
+
+We will use these dynamic proxy functions in the next sections to communicate to the server.
-#### CreateModal.cshtml
+## Create a Books Page
-Open the `CreateModal.cshtml` file and paste the code below:
+It's time to create something visible and usable! Instead of classic MVC, we will use the [Razor Pages UI](https://docs.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start) approach which is recommended by Microsoft.
+
+Create `Books` folder under the `Pages` folder of the `Acme.BookStore.Web` project. Add a new Razor Page by right clicking the Books folder then selecting **Add > Razor Page** menu item. Name it as `Index`:
+
+
+
+Open the `Index.cshtml` and change the whole content as shown below:
````html
@page
-@using Acme.BookStore.Localization
@using Acme.BookStore.Web.Pages.Books
-@using Microsoft.Extensions.Localization
-@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
-@model CreateModalModel
-@inject IStringLocalizer L
-@{
- Layout = null;
+@model IndexModel
+
+
Books
+````
+
+`Index.cshtml.cs` content should be like that:
+
+```csharp
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace Acme.BookStore.Web.Pages.Books
+{
+ public class IndexModel : PageModel
+ {
+ public void OnGet()
+ {
+
+ }
+ }
}
-
-
-
-
-
-
-
-
-
+```
+
+### Add Books Page to the Main Menu
+
+Open the `BookStoreMenuContributor` class in the `Menus` folder and add the following code to the end of the `ConfigureMainMenuAsync` method:
+
+````csharp
+context.Menu.AddItem(
+ new ApplicationMenuItem(
+ "BooksStore",
+ l["Menu:BookStore"],
+ icon: "fa fa-book"
+ ).AddItem(
+ new ApplicationMenuItem(
+ "BooksStore.Books",
+ l["Menu:Books"],
+ url: "/Books"
+ )
+ )
+);
````
-* This modal uses `abp-dynamic-form` [tag helper](../UI/AspNetCore/Tag-Helpers/Dynamic-Forms.md) to automatically create the form from the `CreateBookViewModel` model class.
-* `abp-model` attribute indicates the model object where it's the `Book` property in this case.
-* `abp-form-content` tag helper is a placeholder to render the form controls (it is optional and needed only if you have added some other content in the `abp-dynamic-form` tag, just like in this page).
+{{end}}
-> Tip: `Layout` should be `null` just as done in this example since we don't want to include all the layout for the modals when they are loaded via AJAX.
+### Localization
-### Add the "New book" Button
+Localization texts are located under the `Localization/BookStore` folder of the `Acme.BookStore.Domain.Shared` project:
-Open the `Pages/Books/Index.cshtml` and set the content of `abp-card-header` tag as below:
+
-````html
-
-
-
- @L["Books"]
-
-
-
-
-
-
+Open the `en.json` (*the English translations*) file and change the content as below:
+
+````json
+{
+ "Culture": "en",
+ "Texts": {
+ "Menu:Home": "Home",
+ "Welcome": "Welcome",
+ "LongWelcomeMessage": "Welcome to the application. This is a startup project based on the ABP framework. For more information, visit abp.io.",
+ "Menu:BookStore": "Book Store",
+ "Menu:Books": "Books",
+ "Actions": "Actions",
+ "Edit": "Edit",
+ "PublishDate": "Publish date",
+ "NewBook": "New book",
+ "Name": "Name",
+ "Type": "Type",
+ "Price": "Price",
+ "CreationTime": "Creation time",
+ "AreYouSureToDelete": "Are you sure you want to delete this item?",
+ "Enum:BookType:0": "Undefined",
+ "Enum:BookType:1": "Adventure",
+ "Enum:BookType:2": "Biography",
+ "Enum:BookType:3": "Dystopia",
+ "Enum:BookType:4": "Fantastic",
+ "Enum:BookType:5": "Horror",
+ "Enum:BookType:6": "Science",
+ "Enum:BookType:7": "Science fiction",
+ "Enum:BookType:8": "Poetry"
+ }
+}
````
-The final content of the `Index.cshtml` is shown below:
+* Localization key names are arbitrary. You can set any name. We prefer some conventions for specific text types;
+ * Add `Menu:` prefix for menu items.
+ * Use `Enum::` naming convention to localize the enum members. When you do it like that, ABP can automatically localize the enums in some proper cases.
+
+If a text is not defined in the localization file, it **fallbacks** to the localization key (as ASP.NET Core's standard behavior).
+
+> ABP's localization system is built on [ASP.NET Core's standard localization](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization) system and extends it in many ways. See the [localization document](../Localization.md) for details.
+
+{{if UI == "MVC"}}
+
+Run the project, login to the application with the username `admin` and the password `1q2w3E*` and see the new menu item has been added to the main menu:
+
+
+
+When you click to the Books menu item under the Book Store parent, you are being redirected to the new empty Books Page.
+
+### Book List
+
+We will use the [Datatables.net](https://datatables.net/) jQuery library to show the book list. Datatables library completely work via AJAX, it is fast, popular and provides a good user experience.
+
+> Datatables library is configured in the startup template, so you can directly use it in any page without including any style or script file to your page.
+
+#### Index.cshtml
+
+Change the `Pages/Books/Index.cshtml` as following:
````html
@page
@@ -158,22 +223,11 @@ The final content of the `Index.cshtml` is shown below:
@inject IStringLocalizer L
@section scripts
{
-
+
}
-
-
-
- @L["Books"]
-
-
-
-
-
+
@L["Books"]
@@ -181,30 +235,16 @@ The final content of the `Index.cshtml` is shown below:
````
-This adds a new button called **New book** to the **top-right** of the table:
+* `abp-script` [tag helper](https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro) is used to add external **scripts** to the page. It has many additional features compared to standard `script` tag. It handles **minification** and **versioning**. See the [bundling & minification document](../UI/AspNetCore/Bundling-Minification.md) for details.
+* `abp-card` is a tag helper for Twitter Bootstrap's [card component](https://getbootstrap.com/docs/4.5/components/card/). There are other useful tag helpers provided by the ABP Framework to easily use most of the [bootstrap](https://getbootstrap.com/) components. You could use the regular HTML tags instead of these tag helpers, but using tag helpers reduces HTML code and prevents errors by help the of IntelliSense and compile time type checking. Further information, see the [tag helpers](../UI/AspNetCore/Tag-Helpers/Index.md) document.
-
+#### Index.js
-Open the `Pages/Books/Index.js` and add the following code just after the `Datatable` configuration:
+Create an `Index.js` file under the `Pages/Books` folder:
-````js
-var createModal = new abp.ModalManager(abp.appPath + 'Books/CreateModal');
-
-createModal.onResult(function () {
- dataTable.ajax.reload();
-});
-
-$('#NewBookButton').click(function (e) {
- e.preventDefault();
- createModal.open();
-});
-````
+
-* `abp.ModalManager` is a helper class to manage modals in the client side. It internally uses Twitter Bootstrap's standard modal, but abstracts many details by providing a simple API.
-* `createModal.onResult(...)` used to refresh the data table after creating a new book.
-* `createModal.open();` is used to open the model to create a new book.
-
-The final content of the `Index.js` should be like that:
+The content of the file is shown below:
````js
$(function () {
@@ -258,381 +298,195 @@ $(function () {
]
})
);
-
- var createModal = new abp.ModalManager(abp.appPath + 'Books/CreateModal');
-
- createModal.onResult(function () {
- dataTable.ajax.reload();
- });
-
- $('#NewBookButton').click(function (e) {
- e.preventDefault();
- createModal.open();
- });
});
````
-Now, you can **run the application** and add some new books using the new modal form.
+* `abp.localization.getResource` gets a function that is used to localize text using the same JSON file defined in the server side. In this way, you can share the localization values with the client side.
+* `abp.libs.datatables.normalizeConfiguration` is a helper function defined by the ABP Framework. There's no requirement to use it, but it simplifies the [Datatables](https://datatables.net/) configuration by providing conventional default values for missing options.
+* `abp.libs.datatables.createAjax` is another helper function to adapt ABP's dynamic JavaScript API proxies to [Datatable](https://datatables.net/)'s expected parameter format
+* `acme.bookStore.books.book.getList` is the dynamic JavaScript proxy function introduced before.
+* [luxon](https://moment.github.io/luxon/) library is also a standard library that is pre-configured in the solution, so you can use to perform date/time operations easily.
-## Updating a Book
+> See [Datatables documentation](https://datatables.net/manual/) for all configuration options.
-Create a new razor page, named `EditModal.cshtml` under the `Pages/Books` folder of the `Acme.BookStore.Web` project:
+## Run the Final Application
-
+You can run the application! The final UI of this part is shown below:
-### EditModal.cshtml.cs
+
-Open the `EditModal.cshtml.cs` file (`EditModalModel` class) and replace with the following code:
+This is a fully working, server side paged, sorted and localized table of books.
-````csharp
-using System;
-using System.Threading.Tasks;
-using Acme.BookStore.Books;
-using Microsoft.AspNetCore.Mvc;
+{{end}}
-namespace Acme.BookStore.Web.Pages.Books
-{
- public class EditModalModel : BookStorePageModel
- {
- [HiddenInput]
- [BindProperty(SupportsGet = true)]
- public Guid Id { get; set; }
+{{if UI == "NG"}}
- [BindProperty]
- public CreateUpdateBookDto Book { get; set; }
+## Angular UI Development
+### Create the books page
- private readonly IBookAppService _bookAppService;
+It's time to create something visible and usable! There are some tools that we will use when developing ABP Angular frontend application:
- public EditModalModel(IBookAppService bookAppService)
- {
- _bookAppService = bookAppService;
- }
+- [Angular CLI](https://angular.io/cli) will be used to create modules, components and services.
+- [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.
+- [Visual Studio Code](https://code.visualstudio.com/) will be used as the code editor (you can use your favorite editor).
- public async Task OnGetAsync()
- {
- var bookDto = await _bookAppService.GetAsync(Id);
- Book = ObjectMapper.Map(bookDto);
- }
+### Install NPM packages
- public async Task OnPostAsync()
- {
- await _bookAppService.UpdateAsync(Id, Book);
- return NoContent();
- }
- }
-}
-````
+Open a new command line interface (terminal window) and go to your `angular` folder and then run `yarn` command to install NPM packages:
-* `[HiddenInput]` and `[BindProperty]` are standard ASP.NET Core MVC attributes. `SupportsGet` is used to be able to get `Id` value from query string parameter of the request.
-* In the `OnGetAsync` method, we get `BookDto ` from the `BookAppService` and this is being mapped to the DTO object `CreateUpdateBookDto`.
-* The `OnPostAsync` uses `BookAppService.UpdateAsync(...)` to update the entity.
+```bash
+yarn
+```
-### Mapping from BookDto to CreateUpdateBookDto
+### BookModule
-To be able to map the `BookDto` to `CreateUpdateBookDto`, configure a new mapping. To do this, open the `BookStoreWebAutoMapperProfile.cs` in the `Acme.BookStore.Web` project and change it as shown below:
+Run the following command line to create a new module, named `BookModule`:
-````csharp
-using AutoMapper;
+```bash
+yarn ng generate module book --routing true
+```
-namespace Acme.BookStore.Web
-{
- public class BookStoreWebAutoMapperProfile : Profile
- {
- public BookStoreWebAutoMapperProfile()
- {
- CreateMap();
- }
- }
-}
-````
+
+
+### Routing
-* We have just added `CreateMap();` to define this mapping.
+Open the `app-routing.module.ts` file in `src\app` folder and add a route as shown below:
-> Notice that we do the mapping definition in the web layer as a best practice since it is only needed in this layer.
+```js
+const routes: Routes = [
+// ...
+// added a new route to the routes array
+ {
+ path: 'books',
+ loadChildren: () => import('./book/book.module').then(m => m.BookModule)
+ }
+]
+```
-### EditModal.cshtml
+* We added a lazy-loaded route. See the [Lazy-Loading Feature Modules](https://angular.io/guide/lazy-loading-ngmodules#lazy-loading-feature-modules).
-Replace `EditModal.cshtml` content with the following content:
+Open the `route.provider.ts` file in `src\app` folder and replace the content as below:
-````html
-@page
-@using Acme.BookStore.Localization
-@using Acme.BookStore.Web.Pages.Books
-@using Microsoft.Extensions.Localization
-@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
-@model EditModalModel
-@inject IStringLocalizer L
-@{
- Layout = null;
+```js
+import { RoutesService, eLayoutType } from '@abp/ng.core';
+import { APP_INITIALIZER } from '@angular/core';
+
+export const APP_ROUTE_PROVIDER = [
+ { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
+];
+
+function configureRoutes(routes: RoutesService) {
+ return () => {
+ routes.add([
+ //...
+ // added below element
+ {
+ path: '/books',
+ name: '::Menu:Books',
+ iconClass: 'fas fa-book',
+ order: 101,
+ layout: eLayoutType.application,
+ },
+ ]);
+ };
}
-
-
-
-
-
-
-
-
-
-
-````
+```
-This page is very similar to the `CreateModal.cshtml`, except:
+* We added a new route element to show a navigation element labeled "Books" on the menu.
+ * `path` is the URL of the route.
+ * `name` is the menu item name. A Localization key can be passed.
+ * `iconClass` is the icon of the menu item.
+ * `order` is the order of the menu item. We define 101 to show the route after the "Administration" item.
+ * `layout` is the layout of the BooksModule's routes. `eLayoutType.application`, `eLayoutType.account` or `eLayoutType.empty` can be defined.
-* It includes an `abp-input` for the `Id` property to store `Id` of the editing book (which is a hidden input).
-* It uses `Books/EditModal` as the post URL.
+For more information, see the [RoutesService document](https://docs.abp.io/en/abp/latest/UI/Angular/Modifying-the-Menu.md#via-routesservice).
-### Add "Actions" Dropdown to the Table
+#### Book List Component
-We will add a dropdown button to the table named *Actions*.
+Run the command below on the terminal in the root folder to generate a new component, named book-list:
-Open the `Pages/Books/Index.js` and replace the content as below:
+```bash
+yarn ng generate component book/book-list
+```
-````js
-$(function () {
- var l = abp.localization.getResource('BookStore');
- var createModal = new abp.ModalManager(abp.appPath + 'Books/CreateModal');
- var editModal = new abp.ModalManager(abp.appPath + 'Books/EditModal');
+
- var dataTable = $('#BooksTable').DataTable(
- abp.libs.datatables.normalizeConfiguration({
- serverSide: true,
- paging: true,
- order: [[1, "asc"]],
- searching: false,
- scrollX: true,
- ajax: abp.libs.datatables.createAjax(acme.bookStore.books.book.getList),
- columnDefs: [
- {
- title: l('Actions'),
- rowAction: {
- items:
- [
- {
- text: l('Edit'),
- action: function (data) {
- editModal.open({ id: data.record.id });
- }
- }
- ]
- }
- },
- {
- title: l('Name'),
- data: "name"
- },
- {
- title: l('Type'),
- data: "type",
- render: function (data) {
- return l('Enum:BookType:' + data);
- }
- },
- {
- title: l('PublishDate'),
- data: "publishDate",
- render: function (data) {
- return luxon
- .DateTime
- .fromISO(data, {
- locale: abp.localization.currentCulture.name
- }).toLocaleString();
- }
- },
- {
- title: l('Price'),
- data: "price"
- },
- {
- title: l('CreationTime'), data: "creationTime",
- render: function (data) {
- return luxon
- .DateTime
- .fromISO(data, {
- locale: abp.localization.currentCulture.name
- }).toLocaleString(luxon.DateTime.DATETIME_SHORT);
- }
- }
- ]
- })
- );
+Open `book.module.ts` file in the `app\book` folder and replace the content as below:
- createModal.onResult(function () {
- dataTable.ajax.reload();
- });
+```js
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BookRoutingModule } from './book-routing.module';
+import { BookListComponent } from './book-list/book-list.component';
+import { SharedModule } from '../shared/shared.module'; //<== added this line ==>
- editModal.onResult(function () {
- dataTable.ajax.reload();
- });
+@NgModule({
+ declarations: [BookListComponent],
+ imports: [
+ CommonModule,
+ BookRoutingModule,
+ SharedModule, //<== added this line ==>
+ ],
+})
+export class BookModule {}
+```
- $('#NewBookButton').click(function (e) {
- e.preventDefault();
- createModal.open();
- });
-});
-````
+* We imported `SharedModule` and added to `imports` array.
-* Added a new `ModalManager` named `editModal` to open the edit modal dialog.
-* Added a new column at the beginning of the `columnDefs` section. This column is used for the "*Actions*" dropdown button.
-* "*Edit*" action simply calls `editModal.open()` to open the edit dialog.
-* `editModal.onResult(...)` callback refreshes the data table when you close the edit modal.
+Open `book-routing.module.ts` file in the `app\book` folder and replace the content as below:
-You can run the application and edit any book by selecting the edit action on a book.
+```js
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { BookListComponent } from './book-list/book-list.component'; // <== added this line ==>
-The final UI looks as below:
+// <== replaced routes ==>
+const routes: Routes = [
+ {
+ path: '',
+ component: BookListComponent,
+ },
+];
-
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule]
+})
+export class BookRoutingModule { }
+```
-## Deleting a Book
+* We imported `BookListComponent` and replaced `routes` const.
-Open the `Pages/Books/Index.js` and add a new item to the `rowAction` `items`:
+Run `yarn start` and wait for Angular to serve the application:
-````js
-{
- text: l('Delete'),
- confirmMessage: function (data) {
- return l('BookDeletionConfirmationMessage', data.record.name);
- },
- action: function (data) {
- acme.bookStore.books.book
- .delete(data.record.id)
- .then(function() {
- abp.notify.info(l('SuccessfullyDeleted'));
- dataTable.ajax.reload();
- });
- }
-}
-````
+```bash
+yarn start
+```
-* `confirmMessage` option is used to ask a confirmation question before executing the `action`.
-* `acme.bookStore.books.book.delete(...)` method makes an AJAX request to the server to delete a book.
-* `abp.notify.info()` shows a notification after the delete operation.
+Open the browser and navigate to http://localhost:4200/books. We'll see **book-list works!** text on the books page:
-Since we've used two new localization texts (`BookDeletionConfirmationMessage` and `SuccessfullyDeleted`) you need to add these to the localization file (`en.json` under the `Localization/BookStore` folder of the `Acme.BookStore.Domain.Shared` project):
+
-````json
-"BookDeletionConfirmationMessage": "Are you sure to delete the book '{0}'?",
-"SuccessfullyDeleted": "Successfully deleted!"
-````
+### Generate Proxies
-The final `Index.js` content is shown below:
+ABP CLI provides `generate-proxy` command that generates client proxies for your HTTP APIs to make easy to consume your services from the client side. Before running generate-proxy command, your host must be up and running. See the [CLI documentation](../CLI.md)
-````js
-$(function () {
- var l = abp.localization.getResource('BookStore');
- var createModal = new abp.ModalManager(abp.appPath + 'Books/CreateModal');
- var editModal = new abp.ModalManager(abp.appPath + 'Books/EditModal');
+Run the following command in the `angular` folder:
- var dataTable = $('#BooksTable').DataTable(
- abp.libs.datatables.normalizeConfiguration({
- serverSide: true,
- paging: true,
- order: [[1, "asc"]],
- searching: false,
- scrollX: true,
- ajax: abp.libs.datatables.createAjax(acme.bookStore.books.book.getList),
- columnDefs: [
- {
- title: l('Actions'),
- rowAction: {
- items:
- [
- {
- text: l('Edit'),
- action: function (data) {
- editModal.open({ id: data.record.id });
- }
- },
- {
- text: l('Delete'),
- confirmMessage: function (data) {
- return l(
- 'BookDeletionConfirmationMessage',
- data.record.name
- );
- },
- action: function (data) {
- acme.bookStore.books.book
- .delete(data.record.id)
- .then(function() {
- abp.notify.info(
- l('SuccessfullyDeleted')
- );
- dataTable.ajax.reload();
- });
- }
- }
- ]
- }
- },
- {
- title: l('Name'),
- data: "name"
- },
- {
- title: l('Type'),
- data: "type",
- render: function (data) {
- return l('Enum:BookType:' + data);
- }
- },
- {
- title: l('PublishDate'),
- data: "publishDate",
- render: function (data) {
- return luxon
- .DateTime
- .fromISO(data, {
- locale: abp.localization.currentCulture.name
- }).toLocaleString();
- }
- },
- {
- title: l('Price'),
- data: "price"
- },
- {
- title: l('CreationTime'), data: "creationTime",
- render: function (data) {
- return luxon
- .DateTime
- .fromISO(data, {
- locale: abp.localization.currentCulture.name
- }).toLocaleString(luxon.DateTime.DATETIME_SHORT);
- }
- }
- ]
- })
- );
+```bash
+abp generate-proxy --module app
+```
- createModal.onResult(function () {
- dataTable.ajax.reload();
- });
-
- editModal.onResult(function () {
- dataTable.ajax.reload();
- });
-
- $('#NewBookButton').click(function (e) {
- e.preventDefault();
- createModal.open();
- });
-});
-````
-
-You can run the application and try to delete a book.
-
-{{end}}
-
-{{if UI == "NG"}}
+
-## Creating a new book
+The generated files looks like below:
-In this section, you will learn how to create a new modal dialog form to create a new book.
+
-### Add a modal to BookListComponent
+### BookListComponent
-Open `book-list.component.ts` file in `app\book\book-list` folder and replace the content as below:
+Open the `book-list.component.ts` file in `app\book\book-list` folder and replace the content as below:
```js
import { ListService, PagedResultDto } from '@abp/ng.core';
@@ -651,8 +505,6 @@ export class BookListComponent implements OnInit {
booksType = BookType;
- isModalOpen = false; // <== added this line ==>
-
constructor(public readonly list: ListService, private bookService: BookService) {}
ngOnInit() {
@@ -662,36 +514,24 @@ export class BookListComponent implements OnInit {
this.book = response;
});
}
-
- // added createBook method
- createBook() {
- this.isModalOpen = true;
- }
}
```
-* We defined a variable called `isModalOpen` and `createBook` method.
-* We added the `createBook` method.
-
+* We imported and injected the generated `BookService`.
+* We implemented the [ListService](https://docs.abp.io/en/abp/latest/UI/Angular/List-Service) that is a utility service to provide easy pagination, sorting, and search implementation.
-Open `book-list.component.html` file in `books\book-list` folder and replace the content as below:
+Open the `book-list.component.html` file in `app\book\book-list` folder and replace the content as below:
```html
-
{%{{{ '::Menu:Books' | abpLocalization }}}%}
-
-
-
-
-
-
+
+ {%{{{ '::Menu:Books' | abpLocalization }}}%}
+
+
@@ -715,587 +555,22 @@ Open `book-list.component.html` file in `books\book-list` folder and replace the
-
-
-
-
-
{%{{{ '::NewBook' | abpLocalization }}}%}
-
-
-
-
-
-
-
-
-```
-
-* We added the `abp-modal` which renders a modal to allow user to create a new book.
-* `abp-modal` is a pre-built component to show modals. While you could use another approach to show a modal, `abp-modal` provides additional benefits.
-* We added `New book` button to the `AbpContentToolbar`.
-
-You can open your browser and click **New book** button to see the new modal.
-
-
-
-### Create a reactive form
-
-[Reactive forms](https://angular.io/guide/reactive-forms) provide a model-driven approach to handling form inputs whose values change over time.
-
-Open `book-list.component.ts` file in `app\book\book-list` folder and replace the content as below:
-
-```js
-import { ListService, PagedResultDto } from '@abp/ng.core';
-import { Component, OnInit } from '@angular/core';
-import { BookDto, BookType } from '../models';
-import { BookService } from '../services';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms'; // <== added this line ==>
-
-@Component({
- selector: 'app-book-list',
- templateUrl: './book-list.component.html',
- styleUrls: ['./book-list.component.scss'],
- providers: [ListService],
-})
-export class BookListComponent implements OnInit {
- book = { items: [], totalCount: 0 } as PagedResultDto;
-
- booksType = BookType;
-
- isModalOpen = false;
-
- form: FormGroup; // <== added this line ==>
-
- constructor(
- public readonly list: ListService,
- private bookService: BookService,
- private fb: FormBuilder // <== injected FormBuilder ==>
- ) {}
-
- ngOnInit() {
- const bookStreamCreator = (query) => this.bookService.getListByInput(query);
-
- this.list.hookToQuery(bookStreamCreator).subscribe((response) => {
- this.book = response;
- });
- }
-
- createBook() {
- this.buildForm(); // <== added this line ==>
- this.isModalOpen = true;
- }
-
- // added buildForm method
- buildForm() {
- this.form = this.fb.group({
- name: ['', Validators.required],
- type: [null, Validators.required],
- publishDate: [null, Validators.required],
- price: [null, Validators.required],
- });
- }
-}
-```
-
-* We imported `FormGroup, FormBuilder and Validators`.
-* We added `form: FormGroup` variable.
-* We injected `fb: FormBuilder` service to the constructor. The [FormBuilder](https://angular.io/api/forms/FormBuilder) service provides convenient methods for generating controls. It reduces the amount of boilerplate needed to build complex forms.
-* We added `buildForm` method to the end of the file and executed `buildForm()` in the `createBook` method. This method creates a reactive form to be able to create a new book.
- * The `group` method of `FormBuilder`, `fb` creates a `FormGroup`.
- * Added `Validators.required` static method which validates the relevant form element.
-
-### Create the DOM elements of the form
-
-Open `book-list.component.html` in `app\books\book-list` folder and replace `` with the following code part:
-
-```html
-
-
-
-```
-
-- This template creates a form with `Name`, `Price`, `Type` and `Publish` date fields.
-- We've used [NgBootstrap datepicker](https://ng-bootstrap.github.io/#/components/datepicker/overview) in this component.
-
-### Datepicker requirements
-
-Open `book.module.ts` file in `app\book` folder and replace the content as below:
-
-```js
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { BookRoutingModule } from './book-routing.module';
-import { BookListComponent } from './book-list/book-list.component';
-import { SharedModule } from '../shared/shared.module';
-import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap'; //<== added this line ==>
-
-@NgModule({
- declarations: [BookListComponent],
- imports: [
- CommonModule,
- BookRoutingModule,
- SharedModule,
- NgbDatepickerModule, //<== added this line ==>
- ],
-})
-export class BookModule {}
-```
-
-* We imported `NgbDatepickerModule` to be able to use the date picker.
-
-Open `book-list.component.ts` file in `app\book\book-list` folder and replace the content as below:
-
-```js
-import { ListService, PagedResultDto } from '@abp/ng.core';
-import { Component, OnInit } from '@angular/core';
-import { BookDto, BookType } from '../models';
-import { BookService } from '../services';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { NgbDateNativeAdapter, NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap'; // <== added this line ==>
-
-@Component({
- selector: 'app-book-list',
- templateUrl: './book-list.component.html',
- styleUrls: ['./book-list.component.scss'],
- providers: [ListService, { provide: NgbDateAdapter, useClass: NgbDateNativeAdapter }], // <== added a provide ==>
-})
-export class BookListComponent implements OnInit {
- book = { items: [], totalCount: 0 } as PagedResultDto;
-
- booksType = BookType;
-
- // <== added bookTypeArr array ==>
- bookTypeArr = Object.keys(BookType).filter(
- (bookType) => typeof this.booksType[bookType] === 'number'
- );
-
- isModalOpen = false;
-
- form: FormGroup;
-
- constructor(
- public readonly list: ListService,
- private bookService: BookService,
- private fb: FormBuilder
- ) {}
-
- ngOnInit() {
- const bookStreamCreator = (query) => this.bookService.getListByInput(query);
-
- this.list.hookToQuery(bookStreamCreator).subscribe((response) => {
- this.book = response;
- });
- }
-
- createBook() {
- this.buildForm();
- this.isModalOpen = true;
- }
-
- buildForm() {
- this.form = this.fb.group({
- name: ['', Validators.required],
- type: [null, Validators.required],
- publishDate: [null, Validators.required],
- price: [null, Validators.required],
- });
- }
-}
```
-* We imported ` NgbDateNativeAdapter, NgbDateAdapter`
-
-* We added a new provider `NgbDateAdapter` that converts Datepicker value to `Date` type. See the [datepicker adapters](https://ng-bootstrap.github.io/#/components/datepicker/overview) for more details.
-
-* We added `bookTypeArr` array to be able to use it in the combobox values. The `bookTypeArr` contains the fields of the `BookType` enum. Resulting array is shown below:
+* We added HTML code of book list page.
- ```js
- ['Adventure', 'Biography', 'Dystopia', 'Fantastic' ...]
- ```
+Now you can see the final result on your browser:
- This array was used in the previous form template in the `ngFor` loop.
+
-Now, you can open your browser to see the changes:
-
-
-
-
-### Saving the book
-
-Open `book-list.component.ts` file in `app\book\book-list` folder and replace the content as below:
-
-```js
-import { ListService, PagedResultDto } from '@abp/ng.core';
-import { Component, OnInit } from '@angular/core';
-import { BookDto, BookType } from '../models';
-import { BookService } from '../services';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { NgbDateNativeAdapter, NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';
-
-@Component({
- selector: 'app-book-list',
- templateUrl: './book-list.component.html',
- styleUrls: ['./book-list.component.scss'],
- providers: [ListService, { provide: NgbDateAdapter, useClass: NgbDateNativeAdapter }],
-})
-export class BookListComponent implements OnInit {
- book = { items: [], totalCount: 0 } as PagedResultDto;
-
- booksType = BookType;
-
- bookTypeArr = Object.keys(BookType).filter(
- (bookType) => typeof this.booksType[bookType] === 'number'
- );
-
- isModalOpen = false;
-
- form: FormGroup;
-
- constructor(
- public readonly list: ListService,
- private bookService: BookService,
- private fb: FormBuilder
- ) {}
-
- ngOnInit() {
- const bookStreamCreator = (query) => this.bookService.getListByInput(query);
-
- this.list.hookToQuery(bookStreamCreator).subscribe((response) => {
- this.book = response;
- });
- }
-
- createBook() {
- this.buildForm();
- this.isModalOpen = true;
- }
-
- buildForm() {
- this.form = this.fb.group({
- name: ['', Validators.required],
- type: [null, Validators.required],
- publishDate: [null, Validators.required],
- price: [null, Validators.required],
- });
- }
-
- // <== added save ==>
- save() {
- if (this.form.invalid) {
- return;
- }
-
- this.bookService.createByInput(this.form.value).subscribe(() => {
- this.isModalOpen = false;
- this.form.reset();
- this.list.get();
- });
- }
-}
-```
-
-* We added `save` method
-
-Open `book-list.component.html` in `app\book\book-list` folder, find the `` element and replace this element with the following to create a new book.
-
-```html
-
-
-
-
-
-
-```
-
-Find the `