mirror of https://github.com/abpframework/abp.git
Mehmet Erim
5 years ago
committed by
GitHub
GitHub
1727 changed files with 1179600 additions and 19461 deletions
@ -0,0 +1,241 @@ |
|||
# ABP Framework 4.2 RC Has Been Published |
|||
|
|||
Today, we have released the [ABP Framework](https://abp.io/) and the [ABP Commercial](https://commercial.abp.io/) 4.2.0 RC (Release Candidate). This blog post introduces the new features and important changes in this new version. |
|||
|
|||
> **The planned release date for the [4.2.0 final](https://github.com/abpframework/abp/milestone/48) version is January 28, 2021**. |
|||
|
|||
## Get Started with the 4.2 RC |
|||
|
|||
If you want to try the version `4.2.0` today, follow the steps below; |
|||
|
|||
1) **Upgrade** the ABP CLI to the version `4.2.0-rc.2` using a command line terminal: |
|||
|
|||
````bash |
|||
dotnet tool update Volo.Abp.Cli -g --version 4.2.0-rc.2 |
|||
```` |
|||
|
|||
**or install** if you haven't installed before: |
|||
|
|||
````bash |
|||
dotnet tool install Volo.Abp.Cli -g --version 4.2.0-rc.2 |
|||
```` |
|||
|
|||
2) Create a **new application** with the `--preview` option: |
|||
|
|||
````bash |
|||
abp new BookStore --preview |
|||
```` |
|||
|
|||
See the [ABP CLI documentation](https://docs.abp.io/en/abp/latest/CLI) for all the available options. |
|||
|
|||
> You can also use the *Direct Download* tab on the [Get Started](https://abp.io/get-started) page by selecting the **Preview checkbox**. |
|||
|
|||
## What's new with the ABP Framework 4.2 |
|||
|
|||
## IRepository.GetQueryableAsync() |
|||
|
|||
> **This version comes with an important change about using `IQueryable` features over the [repositories](https://docs.abp.io/en/abp/4.2/Repositories). It is suggested to read this section carefully and apply in your applications.** |
|||
|
|||
`IRepository` interface inherits `IQueryable`, so you can directly use the standard LINQ extension methods, like `Where`, `OrderBy`, `First`, `Sum`... etc. |
|||
|
|||
**Example: Using LINQ directly over the repository object** |
|||
|
|||
````csharp |
|||
public class BookAppService : ApplicationService, IBookAppService |
|||
{ |
|||
private readonly IRepository<Book, Guid> _bookRepository; |
|||
|
|||
public BookAppService(IRepository<Book, Guid> bookRepository) |
|||
{ |
|||
_bookRepository = bookRepository; |
|||
} |
|||
|
|||
public async Task DoItInOldWayAsync() |
|||
{ |
|||
//Apply any standard LINQ extension method |
|||
var query = _bookRepository |
|||
.Where(x => x.Price > 10) |
|||
.OrderBy(x => x.Name); |
|||
|
|||
//Execute the query asynchronously |
|||
var books = await AsyncExecuter.ToListAsync(query); |
|||
} |
|||
} |
|||
```` |
|||
|
|||
*See [the documentation](https://docs.abp.io/en/abp/4.2/Repositories#iqueryable-async-operations) if you wonder what is the `AsyncExecuter`.* |
|||
|
|||
Beginning from the version 4.2, the recommended way is using `IRepository.GetQueryableAsync()` to obtain an `IQueryable`, then use the LINQ extension methods over it. |
|||
|
|||
**Example: Using the new GetQueryableAsync method** |
|||
|
|||
````csharp |
|||
public async Task DoItInNewWayAsync() |
|||
{ |
|||
//Use GetQueryableAsync to obtain the IQueryable<Book> first |
|||
var queryable = await _bookRepository.GetQueryableAsync(); |
|||
|
|||
//Then apply any standard LINQ extension method |
|||
var query = queryable |
|||
.Where(x => x.Price > 10) |
|||
.OrderBy(x => x.Name); |
|||
|
|||
//Finally, execute the query asynchronously |
|||
var books = await AsyncExecuter.ToListAsync(query); |
|||
} |
|||
```` |
|||
|
|||
ABP may start a database transaction when you get an `IQueryable` (If current [Unit Of Work](https://docs.abp.io/en/abp/latest/Unit-Of-Work) is transactional). In this new way, it is possible to **start the database transaction in an asynchronous way**. Previously, we could not get the advantage of asynchronous while starting the transactions. |
|||
|
|||
> **The new way has a significant performance and scalability gain. The old usage (directly using LINQ over the repositories) will be removed in the next major version.** You have a lot of time for the change, but we recommend to immediately take the action since the old usage has a big scalability problem. |
|||
|
|||
#### About IRepository Async Extension Methods |
|||
|
|||
Using IRepository Async Extension Methods has no such a problem. The examples below are pretty fine: |
|||
|
|||
````csharp |
|||
var countAll = await _personRepository |
|||
.CountAsync(); |
|||
|
|||
var count = await _personRepository |
|||
.CountAsync(x => x.Name.StartsWith("A")); |
|||
|
|||
var book1984 = await _bookRepository |
|||
.FirstOrDefaultAsync(x => x.Name == "John"); |
|||
```` |
|||
|
|||
See the [repository documentation](https://docs.abp.io/en/abp/4.2/Repositories#iqueryable-async-operations) to understand the relation between `IQueryable` and asynchronous operations. |
|||
|
|||
### Repository Bulk Operations |
|||
|
|||
This version adds the following methods to the repositories: |
|||
|
|||
* `InsertManyAsync` |
|||
* `UpdateManyAsync` |
|||
* `DeleteManyAsync` |
|||
|
|||
The purpose of these methods to insert, update or delete many entities in one call with a better performance. |
|||
|
|||
Currently, **MongoDB** provider implements these methods as a single bulk operation since MongoDB API natively supports. But current **Entity Framework Core** implementation is not a real bulk operation. Instead, it does its best with the native API of the EF Core. If you want to implement in a more performant way, you can [customize the bulk operations](https://docs.abp.io/en/abp/4.2/Entity-Framework-Core#customize-bulk-operations) with your own implementation or by using a library. We could find a good open source library for EF Core 5.0 to implement it. |
|||
|
|||
### Selecting DBMS on Template Creation |
|||
|
|||
[ABP CLI](https://docs.abp.io/en/abp/4.2/CLI#new) now has an option to specify the DBMS when you use EF Core as the database provider. |
|||
|
|||
**Example: Select MySQL as the DBMS** |
|||
|
|||
````bash |
|||
abp new BookStore -dbms mysql --preview |
|||
```` |
|||
|
|||
Available options: `SqlServer` (default), `MySQL`, `SQLite`, `Oracle-Devart`, `PostgreSQL`. See the [documentation](https://docs.abp.io/en/abp/latest/Entity-Framework-Core-Other-DBMS) to use any other DBMS or switch the DBMS later. |
|||
|
|||
One change related to this feature is that: Now, the startup template doesn't come with an **initial migration** file. This is because the database migrations are different based on your DBMS preference and should be re-created. However, when you first run the `.DbMigrator` application, it will create the initial migration and create the database just like before. |
|||
|
|||
> See The Initial Migration section in the [Getting Started](https://docs.abp.io/en/abp/4.2/Getting-Started-Running-Solution?DB=EF#database-migrations) document if you have problems on running the `.DbMigrator` application first time. |
|||
|
|||
### Swagger UI Login / Authorization |
|||
|
|||
Testing the swagger UI was requiring some additional work, especially your authentication server is separated from the application that hosts the Swagger UI. |
|||
|
|||
With the version 4.2, the startup templates come with the authorization pre-configured for you. An Authorize button is available when you open the Swagger UI: |
|||
|
|||
 |
|||
|
|||
When you click, it opens a modal to authorize: |
|||
|
|||
 |
|||
|
|||
When you click to the Authorize button here, you are redirected to the login page to login with your username and password (default username is `admin` and password is `1q2w3E*`). |
|||
|
|||
> Remember to select the Scopes (typically **select all**) you want to use before clicking to the Authorize button. |
|||
|
|||
### Angular Unit Testing |
|||
|
|||
We've improved the modules and the startup template to setup and write unit tests easier with the Angular UI. See the [Angular Unit Testing document](https://docs.abp.io/en/abp/4.2/UI/Angular/Testing) for details. |
|||
|
|||
### Other News |
|||
|
|||
* Improved HTTP **request-response performance** by resolving dependencies in a deferred way in the action/page filters, interceptors and some other services. |
|||
* Removed `MultipleActiveResultSets` from connection strings for new templates for SQL Server, since the new EF Core gives a warning when using it. If you want to use it, you need to change the connection string yourself. |
|||
* Added `HardDeleteAsync` extension method that takes a predicate to delete multiple entities. This extension method is available if the entity [Soft Delete](https://docs.abp.io/en/abp/latest/Data-Filtering). |
|||
* Implemented the [Page Alerts](https://docs.abp.io/en/abp/4.2/UI/Angular/Page-Alerts) for the **Angular UI**. |
|||
* Implemented [Page Progress](https://docs.abp.io/en/abp/4.2/UI/Blazor/Page-Progress) for the **Blazor UI**. It automatically shows an undetermined progress bar on top of the page while performing an AJAX request. It also proves an API to you if you need to show/hide the progress bar in your code. |
|||
|
|||
## What's new with the ABP Commercial 4.2 |
|||
|
|||
### Microservice Startup Template |
|||
|
|||
The new [Microservice Startup Template](https://docs.abp.io/en/commercial/4.2/startup-templates/microservice/index) is a generic solution to start a new microservice solution. |
|||
|
|||
While we accept that every microservice solution will be different and every system has its own design requirements and trade-offs, we believe such a startup solution is a very useful starting point for most of the solutions, and a useful example for others. |
|||
|
|||
 |
|||
|
|||
*Figure: A simplified overall diagram of the microservice solution.* |
|||
|
|||
You can [follow the documentation](https://docs.abp.io/en/commercial/4.2/startup-templates/microservice/index) to get started with this startup template. **This template should be considered as an early release**. We will improve it and write a lot of guides. |
|||
|
|||
If you want to use the ABP Suite to create your solution, then you need to first upgrade it: |
|||
|
|||
````bash |
|||
abp suite update |
|||
```` |
|||
|
|||
If you want, you can directly create a new solution from the command line: |
|||
|
|||
````bash |
|||
abp new Volosoft.MyMicroserviceSystem -t microservice-pro --preview |
|||
```` |
|||
|
|||
Company Name is optional. Solution name could be *MyMicroserviceSystem* for this example. |
|||
|
|||
### Public Website in the Startup Templates |
|||
|
|||
As mentioned in the previous release post, we've added a *Public Website* application to the startup templates. It is configured to authenticate through the IdentityServer with a single sign-on system. |
|||
|
|||
You can use this application to create a landing page for your actual application or a corporate website for your business. An example screenshot: |
|||
|
|||
 |
|||
|
|||
It uses the same *Lepton Theme*, so you can apply [all the styles](https://commercial.abp.io/themes). The Public Website has a different layout and also has a different setting for the styling (that can be configured in the *Settings / Lepton Theme* page of the main web application). |
|||
|
|||
> *Public Website* is optional and you need to select the "Public Website" option while creating a new solution using the ABP Suite, or use the `--with-public-website` option while using the `abp new` CLI command. |
|||
|
|||
### Easy CRM Blazor UI |
|||
|
|||
[Easy CRM](https://docs.abp.io/en/commercial/latest/samples/easy-crm) is an example application built with the ABP Commercial. MVC (Razor Pages) and Angular UI implementations were already provided. With the version 4.2, we are providing the Blazor UI implementation for this application. |
|||
|
|||
 |
|||
|
|||
### Other News |
|||
|
|||
* Implemented Iyzico as a payment gateway provider for the [payment module](https://commercial.abp.io/modules/Volo.Payment) in addition to Paypal, Stripe, 2Checkout and Payu providers. |
|||
* ABP Suite supports the new microservice template creation, public website and DBMS selection options. |
|||
* Swagger authorization and other features mentioned in the ABP Framework section are already implemented for the ABP Commercial too. |
|||
|
|||
## ABP Community News |
|||
|
|||
### Sharing Video Contents |
|||
|
|||
[community.abp.io](https://community.abp.io/) is a place to share ABP related contents. It started with publishing articles. Now, it supports to publish video contents. [See this example](https://community.abp.io/articles/be-a-superhero-on-day-1-with-abp.io-wvifcy9s). All you need to do is to create a video and upload to YouTube. Then you can [submit](https://community.abp.io/articles/submit) the YouTube link to the ABP Community website. |
|||
|
|||
### Multi-language support |
|||
|
|||
We planned ABP Community to publish English-only contents. However, we see that people want to share contents in other languages too. Now, **it is possible to submit a content in any language**. Just select the Language option while submitting your content. |
|||
|
|||
**When you submit a non-English content, it is not visible to all the visitors by default**. Visitors can see a non-English content only if their browser language or the selected language matches to the content language (there is a language selection at the end of the website). |
|||
|
|||
### External Contents |
|||
|
|||
If you want to publish your content anywhere else, but want to post a link of your content, you can select *External Content* option while submitting the post. For example, [this article](https://community.abp.io/articles/aspnet-boilerplate-to-abp-framework-xml-to-json-localization-conversion-0mxyjrzj) is an external article and also written in Chinese language. |
|||
|
|||
## About the Next Release |
|||
|
|||
The next feature version will be 4.3.0. It is planned to release the 4.3 RC (Release Candidate) on March 11 and the final version on March 25, 2021. |
|||
|
|||
We decided to slow down the feature development for the [next milestone](https://github.com/abpframework/abp/milestone/49). We will continue to improve the existing features and introduce new ones, sure, but wanted to have more time for the planning, documentation, creating guides and improving the development experience. |
|||
|
|||
## Feedback |
|||
|
|||
Please check out the ABP Framework 4.2.0 RC and [provide feedback](https://github.com/abpframework/abp/issues/new) to help us to release a more stable version. **The planned release date for the [4.2.0 final](https://github.com/abpframework/abp/milestone/48) version is January 28, 2021**. |
|||
|
After Width: | Height: | Size: 256 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 284 KiB |
|
After Width: | Height: | Size: 151 KiB |
|
After Width: | Height: | Size: 45 KiB |
@ -0,0 +1,53 @@ |
|||
# ABP.IO Platform 4.2 Final Has Been Released! |
|||
|
|||
[ABP Framework](https://abp.io/) and [ABP Commercial](https://commercial.abp.io/) 4.2 versions have been released today. |
|||
|
|||
## What's New With 4.2? |
|||
|
|||
Since all the new features are already explained in details with the [4.2 RC Announcement Post](https://blog.abp.io/abp/ABP-IO-Platform-v4-2-RC-Has-Been-Released), I will not repeat all the details again. See the [RC Blog Post](https://blog.abp.io/abp/ABP-IO-Platform-v4-2-RC-Has-Been-Released) for all the features and enhancements. |
|||
|
|||
## Creating New Solutions |
|||
|
|||
You can create a new solution with the ABP Framework version 4.2 by either using the `abp new` command or using the **direct download** tab on the [get started page](https://abp.io/get-started). |
|||
|
|||
> See the [getting started document](https://docs.abp.io/en/abp/latest/Getting-Started) for details. |
|||
|
|||
## How to Upgrade an Existing Solution |
|||
|
|||
### Install/Update the ABP CLI |
|||
|
|||
First of all, install the ABP CLI or upgrade to the latest version. |
|||
|
|||
If you haven't installed yet: |
|||
|
|||
```bash |
|||
dotnet tool install -g Volo.Abp.Cli |
|||
``` |
|||
|
|||
To update an existing installation: |
|||
|
|||
```bash |
|||
dotnet tool update -g Volo.Abp.Cli |
|||
``` |
|||
|
|||
### ABP UPDATE Command |
|||
|
|||
[ABP CLI](https://docs.abp.io/en/abp/latest/CLI) provides a handy command to update all the ABP related NuGet and NPM packages in your solution with a single command: |
|||
|
|||
```bash |
|||
abp update |
|||
``` |
|||
|
|||
Run this command in the root folder of your solution. |
|||
|
|||
## Migration Guide |
|||
|
|||
Check [the migration guide](https://docs.abp.io/en/abp/latest/Migration-Guides/Abp-4_2) for the applications with the version 4.x upgrading to the version 4.2. |
|||
|
|||
> It is strongly recommended to check the migration guide for this version. Especially, the new `IRepository.GetQueryableAsync()` method is a core change should be considered after upgrading the solution. |
|||
|
|||
## About the Next Version |
|||
|
|||
The next feature version will be 4.3. It is planned to release the 4.3 RC (Release Candidate) on March 11 and the final version on March 25, 2021. |
|||
|
|||
We decided to slow down the feature development for the [next milestone](https://github.com/abpframework/abp/milestone/49). We will continue to improve the existing features and introduce new ones, sure, but wanted to have more time for the planning, documentation, creating guides and improving the development experience. |
|||
@ -0,0 +1,103 @@ |
|||
## Using MatBlazor UI Components With the ABP Framework |
|||
|
|||
Hi, in this step by step article, I will show you how to integrate [MatBlazor](https://www.matblazor.com/), a blazor UI components into ABP Framework-based applications. |
|||
|
|||
 |
|||
|
|||
*(A screenshot from the example application developed in this article)* |
|||
|
|||
## Create the Project |
|||
|
|||
> First thing is to create the project. ABP Framework offers startup templates to get into business faster. |
|||
|
|||
In this article, I will create a new startup template with EF Core as a database provider and Blazor for UI framework. But if you already have a project with Blazor UI, you don't need to create a new startup template, you can directly implement the following steps to your existing project. |
|||
|
|||
> If you already have a project with the Blazor UI, you can skip this section. |
|||
|
|||
* Before starting the development, we will create a new solution named `MatBlazorSample` (or whatever you want). We will create a new startup template with EF Core as a database provider and Blazor for UI framework by using [ABP CLI](https://docs.abp.io/en/abp/latest/CLI): |
|||
|
|||
````bash |
|||
abp new MatBlazorSample -u blazor |
|||
```` |
|||
|
|||
This will create new project inside of `aspnet-core`, so: |
|||
|
|||
````bash |
|||
cd aspnet-core |
|||
```` |
|||
|
|||
and |
|||
|
|||
````bash |
|||
dotnet restore |
|||
```` |
|||
|
|||
* Our project boilerplate will be ready after the download is finished. Then, we can open the solution in the Visual Studio (or any other IDE) and run the `MatBlazorSample.DbMigrator` to create the database and seed initial data (which creates the admin user, admin role, permissions etc.) |
|||
|
|||
 |
|||
|
|||
* After database and initial data created, |
|||
* Run the `MatBlazorSample.HttpApi.Host` to see our server side working and |
|||
* Run the `MatBlazorSample.Blazor` to see our UI working properly. |
|||
|
|||
> _Default login credentials for admin: username is **admin** and password is **1q2w3E\***_ |
|||
|
|||
## Install MatBlazor |
|||
|
|||
You can follow [this documentation](https://www.matblazor.com/) to install MatBlazor packages into your computer. |
|||
|
|||
### Adding MatBlazor NuGet Packages |
|||
|
|||
```bash |
|||
Install-Package MatBlazor |
|||
``` |
|||
|
|||
### Register MatBlazor Resources |
|||
|
|||
1. Add the following line to the HEAD section of the `wwwroot/index.html` file within the `MatBlazorSample.Blazor` project: |
|||
|
|||
```Razor |
|||
<head> |
|||
<!--...--> |
|||
<script src="_content/MatBlazor/dist/matBlazor.js"></script> |
|||
<link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" /> |
|||
</head> |
|||
``` |
|||
|
|||
2. In the `MatBlazorSampleBlazorModule` class, call the `AddMatBlazor()` method from your project's `ConfigureServices()` method: |
|||
|
|||
```csharp |
|||
public override void ConfigureServices(ServiceConfigurationContext context) |
|||
{ |
|||
var environment = context.Services.GetSingletonInstance<IWebAssemblyHostEnvironment>(); |
|||
var builder = context.Services.GetSingletonInstance<WebAssemblyHostBuilder>(); |
|||
// ... |
|||
builder.Services.AddMatBlazor(); |
|||
} |
|||
``` |
|||
|
|||
3. Register the **MatBlazorSample.Blazor** namespace in the `_Imports.razor` file: |
|||
|
|||
```Razor |
|||
@using MatBlazor |
|||
``` |
|||
|
|||
## The Sample Application |
|||
|
|||
We have created a sample application with [Table](https://www.matblazor.com/Table) example. |
|||
|
|||
### The Source Code |
|||
|
|||
You can download the source code from [here](https://github.com/abpframework/abp-samples/tree/master/MatBlazorSample). |
|||
|
|||
The related files for this example are marked in the following screenshots. |
|||
|
|||
 |
|||
|
|||
 |
|||
|
|||
 |
|||
|
|||
## Conclusion |
|||
|
|||
In this article, I've explained how to use [MatBlazor](https://www.matblazor.com/) components in your application. ABP Framework is designed so that it can work with any UI library/framework. |
|||
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 14 KiB |
@ -0,0 +1,343 @@ |
|||
# How to Use PrimeNG Components with the ABP Angular UI |
|||
|
|||
## Introduction |
|||
|
|||
In this article, we will use components of the [PrimeNG](https://www.primefaces.org/primeng/) that is a popular UI component library for Angular with the ABP Framework Angular UI that will be generated via [ABP CLI](https://docs.abp.io/en/abp/latest/CLI). |
|||
|
|||
We will create an organization units page and use PrimeNG's [OrganizationChart](https://primefaces.org/primeng/showcase/#/organizationchart) and [Table](https://primefaces.org/primeng/showcase/#/table) components on the page. |
|||
|
|||
 |
|||
|
|||
<small>The UI shown above contains many PrimeNG components. You can reach the source code of this rich UI. Take a look at the source code section below.</small> |
|||
|
|||
> This article does not cover any backend code. I used mock data to provide data source to the components. |
|||
|
|||
## Pre-Requirements |
|||
|
|||
The following tools should be installed on your development machine: |
|||
|
|||
* [.NET Core 5.0+](https://www.microsoft.com/net/download/dotnet-core/) |
|||
* [Node v12 or v14](https://nodejs.org/) |
|||
* [VS Code](https://code.visualstudio.com/) or another IDE |
|||
|
|||
## Source Code |
|||
|
|||
I have prepared a sample project that contains more PrimeNG components than described in this article. You can download the source code [on GitHub](https://github.com/abpframework/abp-samples/tree/master/PrimengSample). |
|||
|
|||
## Creating a New Solution |
|||
|
|||
In this step, we will create a new solution that contains Angular UI and backend startup templates. If you have a startup template with Angular UI, you can skip this step. |
|||
|
|||
Run the following command to install the ABP CLI: |
|||
|
|||
```bash |
|||
dotnet tool install -g Volo.Abp.Cli |
|||
``` |
|||
|
|||
...or update: |
|||
|
|||
```bash |
|||
dotnet tool update -g Volo.Abp.Cli |
|||
``` |
|||
|
|||
Create a new solution named `AbpPrimengSample` by running the following command: |
|||
|
|||
```bash |
|||
abp new AbpPrimengSample -u angular -csf |
|||
``` |
|||
|
|||
See the [ABP CLI documentation](https://docs.abp.io/en/abp/latest/CLI) for all available options. |
|||
|
|||
You can also use the Direct Download tab on the [Get Started](https://abp.io/get-started) page. |
|||
|
|||
## Running the Solution |
|||
|
|||
You can run the solution as described in [here](https://docs.abp.io/en/abp/latest/Getting-Started-Running-Solution?UI=NG&DB=EF&Tiered=No). |
|||
|
|||
## PrimeNG Setup |
|||
|
|||
Open the `angular` folder and run the following command to install packages: |
|||
|
|||
```bash |
|||
npm install |
|||
``` |
|||
|
|||
Next, we need to install `primeng` and required packages (`primeicons` and `@angular/cdk`) for the library. Run the command below to install these packages: |
|||
|
|||
```bash |
|||
npm install primeng primeicons @angular/cdk --save |
|||
``` |
|||
|
|||
The packages we have installed; |
|||
|
|||
- `primeng` is the main package that is a component library. |
|||
- `primeicons` is an icon font library. Many PrimeNG components use this font internally. |
|||
- `@angular/cdk` is a component dev kit created by the Angular team. Some PrimeNG modules depend on it. |
|||
|
|||
As the last step of the setup, we should add the required style files for the library to `angular.json`: |
|||
|
|||
```js |
|||
//angular.json |
|||
|
|||
"projects": { |
|||
"AbpPrimengSample": { |
|||
//... |
|||
"styles": { |
|||
"node_modules/primeicons/primeicons.css", |
|||
"node_modules/primeng/resources/themes/saga-blue/theme.css", |
|||
"node_modules/primeng/resources/primeng.min.css", |
|||
//...other styles |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
We have added the `primeng.min.css`, Saga Blue theme's `theme.css`, and `primeicons.css` files to the project. You can choose another theme instead of the Sage Blue. See available themes on the [Get Started](https://www.primefaces.org/primeng/showcase/#/setup) document of the PrimeNG. |
|||
|
|||
|
|||
> You have to restart the running `ng serve` process to see the effect of the changes you made in the `angular.json`. |
|||
|
|||
|
|||
## Creating the Organization Units Page |
|||
|
|||
Run the following command to create a new module named `OrganizationUnits`: |
|||
|
|||
```bash |
|||
npm run ng -- generate module organization-units --route organization-units --module app.module |
|||
``` |
|||
|
|||
Then open the `src/route.provider.ts` and add a new route as an array element to add a navigation link labeled "Organization Units" to the menu: |
|||
|
|||
```js |
|||
//route.provider.ts |
|||
|
|||
import { eThemeSharedRouteNames } from '@abp/ng.theme.shared'; |
|||
//... |
|||
|
|||
routesService.add([ |
|||
//... |
|||
{ |
|||
path: '/organization-units', |
|||
name: 'Organization Units', |
|||
parentName: eThemeSharedRouteNames.Administration, |
|||
iconClass: 'fas fa-sitemap', |
|||
layout: eLayoutType.application, |
|||
}, |
|||
]); |
|||
``` |
|||
|
|||
We have created a lazy-loadable module and defined a menu navigation link. We can navigate to the page as shown below: |
|||
|
|||
 |
|||
|
|||
## Using the PrimeNG Components |
|||
|
|||
### Implementing the Organization Chart Component |
|||
|
|||
When you would like to use any component from PrimeNG, you have to import the component's module to your module. Since we will use the `OrganizationChart` on the organization units page, we need to import `OrganizationChartModule` into `OrganizationUnitsModule`. |
|||
|
|||
Open the `src/organization-units/organization-units.module.ts` and add the `OrganizationChartModule` to the imports array as shown below: |
|||
|
|||
```js |
|||
import { OrganizationChartModule } from 'primeng/organizationchart'; |
|||
//... |
|||
|
|||
@NgModule({ |
|||
//... |
|||
imports: [ |
|||
//... |
|||
OrganizationChartModule |
|||
], |
|||
}) |
|||
export class OrganizationUnitsModule {} |
|||
``` |
|||
|
|||
> Since NGCC need to work in some cases, restarting the `ng serve` process would be good when you import any modules from `primeng` package to your module. |
|||
|
|||
Let's define a mock data source for the `OrganizationChartComponent` and add the component to the page. |
|||
|
|||
Open the `src/organization-units/organization-units.component.ts` and add two variables as shown below: |
|||
|
|||
```js |
|||
//... |
|||
import { TreeNode } from 'primeng/api'; |
|||
|
|||
@Component(/* component metadata*/) |
|||
export class OrganizationUnitsComponent implements OnInit { |
|||
//... |
|||
|
|||
organizationUnits: TreeNode[] = [ |
|||
{ |
|||
label: 'Management', |
|||
expanded: true, |
|||
children: [ |
|||
{ |
|||
label: 'Selling', |
|||
expanded: true, |
|||
children: [ |
|||
{ |
|||
label: 'Customer Relations', |
|||
}, |
|||
{ |
|||
label: 'Marketing', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
label: 'Supporting', |
|||
expanded: true, |
|||
children: [ |
|||
{ |
|||
label: 'Buying', |
|||
}, |
|||
{ |
|||
label: 'Human Resources', |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
|
|||
selectedUnit: TreeNode; |
|||
``` |
|||
|
|||
- First variable is `organizationUnits`. It provides mock data source to `OrganizationChartComponent`. |
|||
- Second variable is `selectedUnit`. It keeps chosen unit on the chart. |
|||
|
|||
Then, open the `src/organization-units/organization-units.component.html` and replace the file content with the following: |
|||
|
|||
```html |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<h5>Organization Units</h5> |
|||
</div> |
|||
<div class="card-body"> |
|||
<p-organizationChart |
|||
[value]="organizationUnits" |
|||
selectionMode="single" |
|||
[(selection)]="selectedUnit" |
|||
></p-organizationChart> |
|||
</div> |
|||
</div> |
|||
``` |
|||
|
|||
We have implemented the `OrganizationChart`. The final UI looks like below: |
|||
|
|||
 |
|||
|
|||
## Implementing the Table Component |
|||
|
|||
In order to use the `TableComponent`, we have to import the `TableModule` to the `OrganizationUnitsModule`. |
|||
|
|||
Open the `organization-units.module.ts` and add `TableModule` to the imports array as shown below: |
|||
|
|||
```js |
|||
import { TableModule } from 'primeng/table'; |
|||
//... |
|||
|
|||
@NgModule({ |
|||
//... |
|||
imports: [ |
|||
//... |
|||
TableModule |
|||
], |
|||
}) |
|||
export class OrganizationUnitsModule {} |
|||
``` |
|||
|
|||
Open the `organization-units.component.ts` and add a variable named `members` with initial value and add a getter named `tableData` as shown below: |
|||
|
|||
```js |
|||
//... |
|||
export class OrganizationUnitsComponent implements OnInit { |
|||
//... |
|||
|
|||
members = [ |
|||
{ |
|||
fullName: 'John Doe', |
|||
username: 'John.Doe', |
|||
phone: '+1-202-555-0125', |
|||
email: 'john.doe@example.com', |
|||
parent: 'Customer Relations', |
|||
}, |
|||
{ |
|||
fullName: 'Darrion Walter', |
|||
username: 'Darrion.Walter', |
|||
phone: '+1-262-155-0355', |
|||
email: 'Darrion_Walter@example.com', |
|||
parent: 'Marketing', |
|||
}, |
|||
{ |
|||
fullName: 'Rosa Labadie', |
|||
username: 'Rosa.Labadie', |
|||
phone: '+1-262-723-2255', |
|||
email: 'Rosa.Labadie@example.com', |
|||
parent: 'Marketing', |
|||
}, |
|||
{ |
|||
fullName: 'Adelle Hills', |
|||
username: 'Adelle.Hills', |
|||
phone: '+1-491-112-9011', |
|||
email: 'Adelle.Hills@example.com', |
|||
parent: 'Buying', |
|||
}, |
|||
{ |
|||
fullName: 'Brian Hane', |
|||
username: 'Brian.Hane', |
|||
phone: '+1-772-509-1823', |
|||
email: 'Brian.Hane@example.com', |
|||
parent: 'Human Resources', |
|||
}, |
|||
]; |
|||
|
|||
get tableData() { |
|||
return this.members.filter(user => user.parent === this.selectedUnit.label); |
|||
} |
|||
``` |
|||
|
|||
What we have done above? |
|||
|
|||
- We defined a variable named `members` to provide mock data to the table. |
|||
- We have defined a getter named `tableData` to provide filtered data source to the table using `members` variable. |
|||
|
|||
We are now ready to add the table to the HTML template. |
|||
|
|||
Open the `organization-units.component.html`, find the `p-organizationChart` tag and place the following code to the bottom of this tag: |
|||
|
|||
```html |
|||
<div class="p-3" *ngIf="selectedUnit"> |
|||
<h6>Members of {{ selectedUnit.label }}</h6> |
|||
|
|||
<p-table [value]="tableData"> |
|||
<ng-template pTemplate="header"> |
|||
<tr> |
|||
<th>Name</th> |
|||
<th>Username</th> |
|||
<th>Email</th> |
|||
<th>Phone</th> |
|||
</tr> |
|||
</ng-template> |
|||
<ng-template pTemplate="body" let-member> |
|||
<tr> |
|||
<td>{{ member.fullName }}</td> |
|||
<td>{{ member.username }}</td> |
|||
<td>{{ member.email }}</td> |
|||
<td>{{ member.phone }}</td> |
|||
</tr> |
|||
</ng-template> |
|||
</p-table> |
|||
</div> |
|||
``` |
|||
|
|||
We have added a new `div` that contains the `TableComponent`. The table appears when an organization unit is selected. |
|||
The table contains 4 columns which are name, username, email, and phone for displaying the members' information. |
|||
|
|||
After adding the table, the final UI looks like this: |
|||
|
|||
 |
|||
|
|||
|
|||
## Conclusion |
|||
|
|||
We have implemented the PrimeNG component library on the ABP Angular UI project and used two components on a page in a short time. You can use any PrimeNG components by following the documentation. The ABP Angular UI will not block you in any case. |
|||
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 392 KiB |
@ -0,0 +1,83 @@ |
|||
# Ellipsis |
|||
|
|||
Text inside an HTML element can be truncated easily with an ellipsis by using CSS. To make this even easier, you can use the `EllipsisDirective` which has been exposed by the `@abp/ng.theme.shared` package. |
|||
|
|||
|
|||
## Getting Started |
|||
|
|||
In order to use the `EllipsisDirective` in an HTML template, the **`ThemeSharedModule`** should be imported into your module like this: |
|||
|
|||
```js |
|||
// ... |
|||
import { ThemeSharedModule } from '@abp/ng.theme.shared'; |
|||
|
|||
@NgModule({ |
|||
//... |
|||
imports: [..., ThemeSharedModule], |
|||
}) |
|||
export class MyFeatureModule {} |
|||
``` |
|||
|
|||
or **if you would not like to import** the `ThemeSharedModule`, you can import the **`EllipsisModule`** as shown below: |
|||
|
|||
|
|||
```js |
|||
// ... |
|||
import { EllipsisModule } from '@abp/ng.theme.shared'; |
|||
|
|||
@NgModule({ |
|||
//... |
|||
imports: [..., EllipsisModule], |
|||
}) |
|||
export class MyFeatureModule {} |
|||
``` |
|||
|
|||
## Usage |
|||
|
|||
The `EllipsisDirective` is very easy to use. The directive's selector is **`abpEllipsis`**. By adding the `abpEllipsis` attribute to an HTML element, you can activate the `EllipsisDirective` for the HTML element. |
|||
|
|||
See an example usage: |
|||
|
|||
```html |
|||
<p abpEllipsis> |
|||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam commodi quae aspernatur, |
|||
corporis velit et suscipit id consequuntur amet minima expedita cum reiciendis dolorum |
|||
cupiditate? Voluptas eaque voluptatum odio deleniti quo vel illum nemo accusamus nulla ratione |
|||
impedit dolorum expedita necessitatibus fugiat ullam beatae, optio eum cupiditate ducimus |
|||
architecto. |
|||
</p> |
|||
``` |
|||
|
|||
The `abpEllipsis` attribute has been added to the `<p>` element that containing very long text inside to activate the `EllipsisDirective`. |
|||
|
|||
See the result: |
|||
|
|||
 |
|||
|
|||
The long text has been truncated by using the directive. |
|||
|
|||
The UI before using the directive looks like this: |
|||
|
|||
 |
|||
|
|||
### Specifying Max Width of an HTML Element |
|||
|
|||
An HTML element max width can be specified as shown below: |
|||
|
|||
```html |
|||
<div [abpEllipsis]="'100px'"> |
|||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, optio! |
|||
</div> |
|||
|
|||
<div [abpEllipsis]="'15vw'"> |
|||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, optio! |
|||
</div> |
|||
|
|||
<div [abpEllipsis]="'50%'"> |
|||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, optio! |
|||
</div> |
|||
``` |
|||
|
|||
See the result: |
|||
|
|||
 |
|||
@ -0,0 +1,248 @@ |
|||
# Modal |
|||
|
|||
`ModalComponent` is a pre-built component exposed by `@abp/ng.theme.shared` package to show modals. The component uses the [`ng-bootstrap`](https://ng-bootstrap.github.io/)'s modal service inside to render a modal. |
|||
|
|||
The `abp-modal` provides some additional benefits: |
|||
|
|||
- It is **flexible**. You can pass header, body, footer templates easily by adding the templates to the `abp-modal` content. It can also be implemented quickly. |
|||
- Provides several inputs be able to customize the modal and several outputs be able to listen to some events. |
|||
- Automatically detects the close button which has a `#abpClose` template variable and closes the modal when pressed this button. |
|||
- Automatically detects the `abp-button` and triggers its loading spinner when the `busy` input value of the modal component is true. |
|||
- Automatically checks if the form inside the modal **has changed, but not saved**. It warns the user by displaying a [confirmation popup](Confirmation-Service) in this case when a user tries to close the modal or refresh/close the tab of the browser. |
|||
|
|||
|
|||
> Note: A modal can also be rendered by using the `ng-bootstrap` modal. For further information, see [Modal doc](https://ng-bootstrap.github.io/#/components/modal) on the `ng-bootstrap` documentation. |
|||
|
|||
## Getting Started |
|||
|
|||
In order to use the `abp-modal` in an HTML template, the **`ThemeSharedModule`** should be imported into your module like this: |
|||
|
|||
```js |
|||
// ... |
|||
import { ThemeSharedModule } from '@abp/ng.theme.shared'; |
|||
|
|||
@NgModule({ |
|||
//... |
|||
imports: [..., ThemeSharedModule], |
|||
}) |
|||
export class MyFeatureModule {} |
|||
``` |
|||
|
|||
## Usage |
|||
|
|||
You can add the `abp-modal` to your component very quickly. See an example: |
|||
|
|||
```html |
|||
<!-- sample.component.html --> |
|||
|
|||
<button class="btn btn-primary" (click)="isModalOpen = true">Open modal</button> |
|||
|
|||
<abp-modal [(visible)]="isModalOpen"> |
|||
<ng-template #abpHeader> |
|||
<h3>Modal Title</h3> |
|||
</ng-template> |
|||
|
|||
<ng-template #abpBody> |
|||
<p>Modal content</p> |
|||
</ng-template> |
|||
|
|||
<ng-template #abpFooter> |
|||
<button type="button" class="btn btn-secondary" #abpClose>Close</button> |
|||
</ng-template> |
|||
</abp-modal> |
|||
``` |
|||
|
|||
```js |
|||
// sample.component.ts |
|||
|
|||
@Component(/* component metadata */) |
|||
export class SampleComponent { |
|||
isModelOpen = false |
|||
} |
|||
``` |
|||
|
|||
 |
|||
|
|||
|
|||
See an example form inside a modal: |
|||
|
|||
```html |
|||
<!-- book.component.ts --> |
|||
|
|||
<abp-modal [(visible)]="isModalOpen" [busy]="inProgress"> |
|||
<ng-template #abpHeader> |
|||
<h3>Book</h3> |
|||
</ng-template> |
|||
|
|||
<ng-template #abpBody> |
|||
<form id="book-form" [formGroup]="form" (ngSubmit)="save()"> |
|||
<div class="form-group"> |
|||
<label for="book-name">Author</label><span> * </span> |
|||
<input type="text" id="author" class="form-control" formControlName="author" autofocus /> |
|||
</div> |
|||
|
|||
<div class="form-group"> |
|||
<label for="book-name">Name</label><span> * </span> |
|||
<input type="text" id="book-name" class="form-control" formControlName="name" /> |
|||
</div> |
|||
|
|||
<div class="form-group"> |
|||
<label for="book-price">Price</label><span> * </span> |
|||
<input type="number" id="book-price" class="form-control" formControlName="price" /> |
|||
</div> |
|||
|
|||
<div class="form-group"> |
|||
<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]="0">Undefined</option> |
|||
<option [ngValue]="1">Adventure</option> |
|||
<option [ngValue]="2">Biography</option> |
|||
<option [ngValue]="3">Fantastic</option> |
|||
<option [ngValue]="4">Science</option> |
|||
</select> |
|||
</div> |
|||
|
|||
<div class="form-group"> |
|||
<label for="book-publish-date">Publish date</label><span> * </span> |
|||
<input |
|||
id="book-publish-date" |
|||
formControlName="publishDate" |
|||
class="form-control" |
|||
type="date" |
|||
/> |
|||
</div> |
|||
</form> |
|||
</ng-template> |
|||
|
|||
<ng-template #abpFooter> |
|||
<button type="button" class="btn btn-secondary" #abpClose> |
|||
Cancel |
|||
</button> |
|||
|
|||
<button form="book-form" class="btn btn-primary" [disabled]="form.invalid || form.pristine"> |
|||
<i class="fa fa-check mr-1"></i> |
|||
Save |
|||
</button> |
|||
</ng-template> |
|||
</abp-modal> |
|||
``` |
|||
|
|||
```ts |
|||
// book.component.ts |
|||
|
|||
import { Component } from '@angular/core'; |
|||
import { FormBuilder, Validators } from '@angular/forms'; |
|||
|
|||
@Component(/* component metadata */) |
|||
export class BookComponent { |
|||
form = this.fb.group({ |
|||
author: [null, [Validators.required]], |
|||
name: [null, [Validators.required]], |
|||
price: [null, [Validators.required, Validators.min(0)]], |
|||
type: [null, [Validators.required]], |
|||
publishDate: [null, [Validators.required]], |
|||
}); |
|||
|
|||
inProgress: boolean; |
|||
|
|||
isModalOpen: boolean; |
|||
|
|||
constructor(private fb: FormBuilder, private service: BookService) {} |
|||
|
|||
save() { |
|||
if (this.form.invalid) return; |
|||
|
|||
this.inProgress = true; |
|||
|
|||
this.service.save(this.form.value).subscribe(() => { |
|||
this.inProgress = false; |
|||
}); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
The modal with form looks like this: |
|||
|
|||
 |
|||
|
|||
## API |
|||
|
|||
### Inputs |
|||
|
|||
#### visible |
|||
|
|||
```js |
|||
@Input() visible: boolean |
|||
``` |
|||
|
|||
**`visible`** is a boolean input that determines whether the modal is open. It is also can be used two-way binding. |
|||
|
|||
#### busy |
|||
|
|||
```js |
|||
@Input() busy: boolean |
|||
``` |
|||
|
|||
**`busy`** is a boolean input that determines whether the busy status of the modal is true. When `busy` is true, the modal cannot be closed and the `abp-button` loading spinner is triggered. |
|||
|
|||
|
|||
#### options |
|||
|
|||
```js |
|||
@Input() options: NgbModalOptions |
|||
``` |
|||
|
|||
**`options`** is an input typed [NgbModalOptions](https://ng-bootstrap.github.io/#/components/modal/api#NgbModalOptions). It is configuration for the `ng-bootstrap` modal. |
|||
|
|||
#### suppressUnsavedChangesWarning |
|||
|
|||
```js |
|||
@Input() suppressUnsavedChangesWarning: boolean |
|||
``` |
|||
|
|||
**`suppressUnsavedChangesWarning`** is a boolean input that determines whether the confirmation popup triggering active or not. It can also be set globally as shown below: |
|||
|
|||
```ts |
|||
//app.module.ts |
|||
|
|||
// app.module.ts |
|||
|
|||
import { SUPPRESS_UNSAVED_CHANGES_WARNING } from '@abp/ng.theme.shared'; |
|||
|
|||
// ... |
|||
|
|||
@NgModule({ |
|||
// ... |
|||
providers: [{provide: SUPPRESS_UNSAVED_CHANGES_WARNING, useValue: true}] |
|||
}) |
|||
export class AppModule {} |
|||
``` |
|||
|
|||
Note: The `suppressUnsavedChangesWarning` input of `abp-modal` value overrides the `SUPPRESS_UNSAVED_CHANGES_WARNING` injection token value. |
|||
|
|||
### Outputs |
|||
|
|||
#### visibleChange |
|||
|
|||
```js |
|||
@Output() readonly visibleChange = new EventEmitter<boolean>(); |
|||
``` |
|||
|
|||
**`visibleChange`** is an event emitted when the modal visibility has changed. The event payload is a boolean. |
|||
|
|||
#### appear |
|||
|
|||
```js |
|||
@Output() readonly appear = new EventEmitter<void>(); |
|||
``` |
|||
|
|||
**`appear`** is an event emitted when the modal has opened. |
|||
|
|||
#### disappear |
|||
|
|||
```js |
|||
@Output() readonly disappear = new EventEmitter<void>(); |
|||
``` |
|||
|
|||
**`disappear`** is an event emitted when the modal has closed. |
|||
@ -0,0 +1,146 @@ |
|||
# Router Events Simplified |
|||
|
|||
`RouterEvents` is a utility service for filtering specific router events and reacting to them. Please see [this page in Angular docs](https://angular.io/api/router/Event) for available router events. |
|||
|
|||
|
|||
|
|||
|
|||
## Benefit |
|||
|
|||
You can use router events directly and filter them as seen below: |
|||
|
|||
```js |
|||
import { |
|||
NavigationEnd, |
|||
NavigationError, |
|||
NavigationCancel, |
|||
Router, |
|||
} from '@angular/router'; |
|||
import { filter } from 'rxjs/operators'; |
|||
|
|||
@Injectable() |
|||
class SomeService { |
|||
navigationFinish$ = this.router.events.pipe( |
|||
filter( |
|||
event => |
|||
event instanceof NavigationEnd || |
|||
event instanceof NavigationError || |
|||
event instanceof NavigationCancel, |
|||
), |
|||
); |
|||
/* Observable<Event> */ |
|||
|
|||
constructor(private router: Router) {} |
|||
} |
|||
``` |
|||
|
|||
However, `RouterEvents` makes filtering router events easier. |
|||
|
|||
```js |
|||
import { RouterEvents } from '@abp/ng.core'; |
|||
|
|||
@Injectable() |
|||
class SomeService { |
|||
navigationFinish$ = this.routerEvents.getNavigationEvents('End', 'Error', 'Cancel'); |
|||
/* Observable<NavigationCancel | NavigationEnd | NavigationError> */ |
|||
|
|||
constructor(private routerEvents: RouterEvents) {} |
|||
} |
|||
``` |
|||
|
|||
`RouterEvents` also delivers improved type-safety. In the example above, `navigationFinish$` has inferred type of `Observable<NavigationCancel | NavigationEnd | NavigationError>` whereas it would have `Observable<Event>` when router events are filtered directly. |
|||
|
|||
|
|||
|
|||
|
|||
## Usage |
|||
|
|||
You do not have to provide `RouterEvents` at the module or component level, because it is already **provided in root**. You can inject and start using it immediately in your components. |
|||
|
|||
|
|||
### How to Get Specific Navigation Events |
|||
|
|||
You can use `getNavigationEvents` to get a stream of navigation events matching given event keys. |
|||
|
|||
```js |
|||
import { RouterEvents } from '@abp/ng.core'; |
|||
import { merge } from 'rxjs'; |
|||
import { mapTo } from 'rxjs/operators'; |
|||
|
|||
@Injectable() |
|||
class SomeService { |
|||
navigationStart$ = this.routerEvents.getNavigationEvents('Start'); |
|||
/* Observable<NavigationStart> */ |
|||
|
|||
navigationFinish$ = this.routerEvents.getNavigationEvents('End', 'Error', 'Cancel'); |
|||
/* Observable<NavigationCancel | NavigationEnd | NavigationError> */ |
|||
|
|||
loading$ = merge( |
|||
this.navigationStart$.pipe(mapTo(true)), |
|||
this.navigationFinish$.pipe(mapTo(false)), |
|||
); |
|||
/* Observable<boolean> */ |
|||
|
|||
constructor(private routerEvents: RouterEvents) {} |
|||
} |
|||
``` |
|||
|
|||
|
|||
### How to Get All Navigation Events |
|||
|
|||
You can use `getAllNavigationEvents` to get a stream of all navigation events without passing any keys. |
|||
|
|||
```js |
|||
import { RouterEvents, NavigationStart } from '@abp/ng.core'; |
|||
import { map } from 'rxjs/operators'; |
|||
|
|||
@Injectable() |
|||
class SomeService { |
|||
navigationEvent$ = this.routerEvents.getAllNavigationEvents(); |
|||
/* Observable<NavigationCancel | NavigationEnd | NavigationError | NavigationStart> */ |
|||
|
|||
loading$ = this.navigationEvent$.pipe( |
|||
map(event => event instanceof NavigationStart), |
|||
); |
|||
/* Observable<boolean> */ |
|||
|
|||
constructor(private routerEvents: RouterEvents) {} |
|||
} |
|||
``` |
|||
|
|||
|
|||
### How to Get Specific Router Events |
|||
|
|||
You can use `getEvents` to get a stream of router events matching given event constructors. |
|||
|
|||
```js |
|||
import { RouterEvents } from '@abp/ng.core'; |
|||
import { ActivationEnd, ChildActivationEnd } from '@angular/router'; |
|||
|
|||
@Injectable() |
|||
class SomeService { |
|||
moduleActivation$ = this.routerEvents.getEvents(ActivationEnd, ChildActivationEnd); |
|||
/* Observable<ActivationEnd | ChildActivationEnd> */ |
|||
|
|||
constructor(private routerEvents: RouterEvents) {} |
|||
} |
|||
``` |
|||
|
|||
|
|||
### How to Get All Router Events |
|||
|
|||
You can use `getEvents` to get a stream of all router events without passing any event constructors. This is nothing different from accessing `events` property of `Router` and is added to the service just for convenience. |
|||
|
|||
```js |
|||
import { RouterEvents } from '@abp/ng.core'; |
|||
import { ActivationEnd, ChildActivationEnd } from '@angular/router'; |
|||
|
|||
@Injectable() |
|||
class SomeService { |
|||
routerEvent$ = this.routerEvents.getAllEvents(); |
|||
/* Observable<Event> */ |
|||
|
|||
constructor(private routerEvents: RouterEvents) {} |
|||
} |
|||
``` |
|||
|
|||
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 108 KiB |
@ -1,3 +1,153 @@ |
|||
# RabbitMQ Background Job Manager |
|||
# RabbitMQ 后台作业管理 |
|||
|
|||
待添加 |
|||
RabbitMQ 是一个标准的消息队列中间件,虽然它常用于消息传递/分布式事件,但也非常适合存储 FIFO(先进先出) 顺序的后台作业. |
|||
|
|||
ABP Framework 提供了 [Volo.Abp.BackgroundJobs.RabbitMQ](https://www.nuget.org/packages/Volo.Abp.BackgroundJobs.RabbitMQ) 包,将使用 RabbitMQ 来执行后台作业. |
|||
|
|||
> 参阅 [后台作业文档](Background-Jobs.md) 学习如何使用后台作业系统,本文只介绍了如何安装和配置 RabbitMQ 集成. |
|||
|
|||
## 安装 |
|||
|
|||
使用 ABP CLI 将 [Volo.Abp.BackgroundJobs.RabbitMQ](https://www.nuget.org/packages/Volo.Abp.BackgroundJobs.RabbitMQ) 包添加到你的项目: |
|||
|
|||
- 如果之前没有安装过 [ABP CLI](https://docs.abp.io/en/abp/latest/CLI),请先安装它. |
|||
- 跳转到待安装后台作业管理的项目目录中(包含 `.csproj` 文件的目录),打开终端管理器. |
|||
- 执行 `abp add-package Volo.Abp.BackgroundJobs.RabbitMQ` 命令. |
|||
|
|||
如果你想要手动安装,请先用 NuGet 包管理器安装 [Volo.Abp.BackgroundJobs.RabbitMQ](https://www.nuget.org/packages/Volo.Abp.BackgroundJobs.RabbitMQ) 包到指定项目,之后使在你的 [模块](Module-Development-Basics.md) 上面添加 `[DependsOn(typeof(AbpBackgroundJobsRabbitMqModule))]` 配置依赖. |
|||
|
|||
## 配置 |
|||
|
|||
### 默认配置 |
|||
|
|||
默认配置将会使用标准端口和主机名(localhost)连接到 RabbitMQ 服务,**你不需要进行额外配置**. |
|||
|
|||
### RabbitMQ 连接 |
|||
|
|||
你可以使用 ASP.NET Core 的 [标准配置系统](Configuration.md) 对 RabbitMQ 进行详细配置,比如 `appsettings.json` 或者是 [选项类](Options.md). |
|||
|
|||
#### 通过 `appsettings.json` 文件配置 |
|||
|
|||
这种方式是配置 RabbitMQ 连接最简单的方式,你可以使用其他的配置源(例如环境变量).这些强大的功能都是由 [ASP.NET Core](https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/configuration/) 提供的支持. |
|||
|
|||
**示例: 配置默认的 RabbitMQ 连接** |
|||
|
|||
```json |
|||
{ |
|||
"RabbitMQ": { |
|||
"Connections": { |
|||
"Default": { |
|||
"HostName": "123.123.123.123", |
|||
"Port": "5672" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
你可以在配置文件使用所有 [ConnectionFactry](http://rabbitmq.github.io/rabbitmq-dotnet-client/api/RabbitMQ.Client.ConnectionFactory.html#properties) 的属性,关于这些属性的具体含义,可以查看 RabbitMQ 的 [官方文档](https://www.rabbitmq.com/dotnet-api-guide.html#exchanges-and-queues). |
|||
|
|||
目前我们允许定义多个连接,多连接的情况适用于不同的后台作业,具体配置信息可以参考下面的 RabbitMQ 后台作业配置说明. |
|||
|
|||
**示例: 定义两个 RabbitMQ 连接** |
|||
|
|||
```json |
|||
{ |
|||
"RabbitMQ": { |
|||
"Connections": { |
|||
"Default": { |
|||
"HostName": "123.123.123.123" |
|||
}, |
|||
"SecondConnection": { |
|||
"HostName": "321.321.321.321" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
如果需要连接到 RabbitMQ 集群,你可以指定多个 HostName. |
|||
|
|||
**示例: 连接到 RabbitMQ 集群** |
|||
|
|||
```json |
|||
{ |
|||
"RabbitMQ": { |
|||
"Connections": { |
|||
"Default": { |
|||
"HostName": "123.123.123.123;234.234.234.234" |
|||
} |
|||
}, |
|||
"EventBus": { |
|||
"ClientName": "MyClientName", |
|||
"ExchangeName": "MyExchangeName" |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
#### 使用选项类 |
|||
|
|||
`AbpRabbitMqOptions` 类型用于配置 RabbitMQ 的连接字符串,你可以在 [模块](Module-Development-Basics.md) 的 `ConfigureService` 方法中进行配置. |
|||
|
|||
**示例: 配置 RabbitMQ 连接** |
|||
|
|||
```csharp |
|||
Configure<AbpRabbitMqOptions>(options => |
|||
{ |
|||
options.Connections.Default.UserName = "user"; |
|||
options.Connections.Default.Password = "pass"; |
|||
options.Connections.Default.HostName = "123.123.123.123"; |
|||
options.Connections.Default.Port = 5672; |
|||
}); |
|||
``` |
|||
|
|||
关于选项类,可以结合 `appsettings.json` 文件一起使用.针对同一个属性,在选项类里面对该值进行了设定,会覆盖掉 `appsettings.json` 的值. |
|||
|
|||
### RabbitMQ 后台作业配置说明 |
|||
|
|||
#### 后台作业队列的名称 |
|||
|
|||
默认情况下,每个后台作业都会使用一个单独的队列,结合标准前缀和作业名称来构造一个完整的队列名称.默认的前缀为 `AbpBackgroundJobs`,所以有一个作业的名称是 `EmailSending` 的话,在 RabbitMQ 的队列名称就是 `AbpBackgroundJobs.EmailSending`. |
|||
|
|||
> 在后台作业的参数类上,可以使用 `BackgroundJobName` 特性指定后台作业的名称.否则的话,后台作业的名称将会是后台作业类的全名(也包含命名空间). |
|||
|
|||
#### 后台作业使用的连接 |
|||
|
|||
默认情况下,后台作业都会使用 `Default` 作为默认连接. |
|||
|
|||
#### 自定义 |
|||
|
|||
`AbpRabbitMqBackgroundJobOptions` 可以自定义队列名和作业使用的 RabbitMQ 连接. |
|||
|
|||
**示例: ** |
|||
|
|||
```csharp |
|||
Configure<AbpRabbitMqBackgroundJobOptions>(options => |
|||
{ |
|||
options.DefaultQueueNamePrefix = "my_app_jobs."; |
|||
options.JobQueues[typeof(EmailSendingArgs)] = |
|||
new JobQueueConfiguration( |
|||
typeof(EmailSendingArgs), |
|||
queueName: "my_app_jobs.emails", |
|||
connectionName: "SecondConnection" |
|||
); |
|||
}); |
|||
``` |
|||
|
|||
- 这个示例将默认的队列名前缀设置为 `my_app_jobs.`,如果多个项目都使用的同一个 RabbitMQ 服务,设置不同的前缀可以避免执行其他项目的后台作业. |
|||
- 这里还设置了 `EmailSendingArgs` 绑定的 RabbitMQ 连接. |
|||
|
|||
`JobQueueConfiguration` 类的构造函数中,还有一些其他的可选参数. |
|||
|
|||
- `queueName`: 指定后台作业对应的队列名称(全名). |
|||
- `connectionName`: 后台作业对应的 RabbitMQ 连接名称,默认是 `Default`. |
|||
- `durable`: 可选参数,默认为 `true`. |
|||
- `exclusive`: 可选参数,默认为 `false`. |
|||
- `autoDelete`: 可选参数,默认为 `false`. |
|||
|
|||
如果你想要更多地了解 `durable`,`exclusive`,`autoDelete` 的用法,请阅读 RabbitMQ 提供的文档. |
|||
|
|||
## 另请参阅 |
|||
|
|||
- [后台作业](Background-Jobs.md) |
|||
|
|||
@ -0,0 +1,233 @@ |
|||
# 模块化插件 |
|||
|
|||
可以将[模块](Module-Development-Basics.md)加载为插件.这意味着你可能不需要在解决方案中引用模块的程序集,就可以像其它模块一样在启动应用时加载该模块. |
|||
|
|||
## 基本用法 |
|||
|
|||
`IServiceCollection.AddApplication<T>()` 扩展方法可以获取配置插件源的选项. |
|||
|
|||
**示例: 从文件夹加载插件** |
|||
|
|||
````csharp |
|||
using Microsoft.AspNetCore.Builder; |
|||
using Microsoft.Extensions.DependencyInjection; |
|||
using Volo.Abp.Modularity.PlugIns; |
|||
|
|||
namespace MyPlugInDemo.Web |
|||
{ |
|||
public class Startup |
|||
{ |
|||
public void ConfigureServices(IServiceCollection services) |
|||
{ |
|||
services.AddApplication<MyPlugInDemoWebModule>(options => |
|||
{ |
|||
options.PlugInSources.AddFolder(@"D:\Temp\MyPlugIns"); |
|||
}); |
|||
} |
|||
|
|||
public void Configure(IApplicationBuilder app) |
|||
{ |
|||
app.InitializeApplication(); |
|||
} |
|||
} |
|||
} |
|||
```` |
|||
|
|||
* 这是典型的ASP.NET Core应用程序的`Startup`类. |
|||
* `PlugInSources.AddFolder`从指定的目录中加载程序集(通常为dll). |
|||
|
|||
就这样.ABP将在这个目录中发现这些模块,像其它常规一样配置和初始化它们. |
|||
|
|||
### 插件源 |
|||
|
|||
`options.PlugInSources`类实际上是`IPlugInSource`接口的一系列实现并且 `AddFolder`方法仅仅是以下表达式的便捷方法： |
|||
|
|||
````csharp |
|||
options.PlugInSources.Add(new FolderPlugInSource(@"D:\Temp\MyPlugIns")); |
|||
```` |
|||
|
|||
> `AddFolder()`方法仅在给定目录下查找程序集文件,而不在子目录中查找.你可以传递一个`SearchOption.AllDirectories`参数作为第二个参数,来递归地查找它的子目录. |
|||
|
|||
这里有两个内置插件源的示例： |
|||
|
|||
* `PlugInSources.AddFiles()`方法获取程序集(通常是dll)文件列表.这是使用`FilePlugInSource`类的快捷方式. |
|||
* `PlugInSources.AddTypes()`方法获取模块类类型的列表.如果实用化此方法,则需要自己加载模块的程序集,但是在需要时它提供了灵活性.这是使用`TypePlugInSource`类的快捷方式. |
|||
|
|||
如果需要,你可以创建自己的`IPlugInSource`的接口实现,并像其它方法一样添加到`options.PlugInSources`中. |
|||
|
|||
## 示例：创建一个简单的插件 |
|||
|
|||
在一个解决方案中创建一个简单的**类库项目** |
|||
|
|||
 |
|||
|
|||
你可以在模块中添加需要使用的ABP框架包.至少,你应该为这个项目添加包`Volo.Abp.Core`： |
|||
|
|||
```` |
|||
Install-Package Volo.Abp.Core |
|||
```` |
|||
|
|||
每个[模块](Module-Development-Basics.md)必须声明为一个继承自`AbpModule`的类.这里是一个简单的模块类,用于解析一个服务并在应用启动时对其初始化： |
|||
|
|||
````csharp |
|||
using Microsoft.Extensions.DependencyInjection; |
|||
using Volo.Abp; |
|||
using Volo.Abp.Modularity; |
|||
|
|||
namespace MyPlugIn |
|||
{ |
|||
public class MyPlungInModule : AbpModule |
|||
{ |
|||
public override void OnApplicationInitialization(ApplicationInitializationContext context) |
|||
{ |
|||
var myService = context.ServiceProvider |
|||
.GetRequiredService<MyService>(); |
|||
|
|||
myService.Initialize(); |
|||
} |
|||
} |
|||
} |
|||
```` |
|||
|
|||
`MyService`可以是注册在[依赖注入](Dependency-Injection.md)系统中的任意类,如下所示: |
|||
|
|||
````csharp |
|||
using Microsoft.Extensions.Logging; |
|||
using Volo.Abp.DependencyInjection; |
|||
|
|||
namespace MyPlugIn |
|||
{ |
|||
public class MyService : ITransientDependency |
|||
{ |
|||
private readonly ILogger<MyService> _logger; |
|||
|
|||
public MyService(ILogger<MyService> logger) |
|||
{ |
|||
_logger = logger; |
|||
} |
|||
|
|||
public void Initialize() |
|||
{ |
|||
_logger.LogInformation("MyService has been initialized"); |
|||
} |
|||
} |
|||
} |
|||
```` |
|||
|
|||
编译这个项目,打开build目录,找到`MyPlugIn.dll`： |
|||
|
|||
 |
|||
|
|||
将`MyPlugIn.dll`复制到到插件目录中(此实例为`D:\Temp\MyPlugIns`). |
|||
|
|||
如果你已经按照上述方式配置了主应用程序(参见“基础用法”部分),那么在应用程序启动时,你可以看到“MyService has been initialized(MyService已经初始化)的日志. |
|||
|
|||
## 示例：创建一个Razor Pages插件 |
|||
|
|||
创建内部带视图的插件需要更多的注意. |
|||
|
|||
> 这个示例假设你已经使用应用程序启动模板和MVC / Razor Pages UI[创建了一个新的Web应用程序](https://abp.io/get-started). |
|||
|
|||
在解决方案中创建一个新的**类库**项目： |
|||
|
|||
 |
|||
|
|||
编辑这个`.csproj`文件内容： |
|||
|
|||
````xml |
|||
<Project Sdk="Microsoft.NET.Sdk.Web"> |
|||
|
|||
<PropertyGroup> |
|||
<TargetFramework>net5.0</TargetFramework> |
|||
<OutputType>Library</OutputType> |
|||
<IsPackable>true</IsPackable> |
|||
</PropertyGroup> |
|||
|
|||
<ItemGroup> |
|||
<PackageReference Include="Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared" Version="4.0.1" /> |
|||
</ItemGroup> |
|||
|
|||
</Project> |
|||
```` |
|||
|
|||
* 将`Sdk`修改为`Microsoft.NET.Sdk.Web`. |
|||
* 添加了`OutputType`和`IsPackable`属性. |
|||
* 添加了`Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared`NuGet包. |
|||
|
|||
> 不需要[Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared) 包.你可以引用更基础的程序包,例如[Volo.Abp.AspNetCore.Mvc](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Mvc/). 但是,如果需要构建一个UI视图/组件,建议参考[Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared)程序包,因为它是最高级的程序包,不依赖于特定[theme](UI/AspNetCore/Theming.md).如果依赖特定主题没有问题,则可以直接引用该主题的程序包,以便能够使用插件中特定于主题的功能. |
|||
|
|||
接下来在插件中创建模块类： |
|||
|
|||
````csharp |
|||
using System.IO; |
|||
using System.Reflection; |
|||
using Microsoft.AspNetCore.Mvc.ApplicationParts; |
|||
using Microsoft.Extensions.DependencyInjection; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared; |
|||
using Volo.Abp.Modularity; |
|||
|
|||
namespace MyMvcUIPlugIn |
|||
{ |
|||
[DependsOn(typeof(AbpAspNetCoreMvcUiThemeSharedModule))] |
|||
public class MyMvcUIPlugInModule : AbpModule |
|||
{ |
|||
public override void PreConfigureServices(ServiceConfigurationContext context) |
|||
{ |
|||
PreConfigure<IMvcBuilder>(mvcBuilder => |
|||
{ |
|||
// 添加插件程序集 |
|||
mvcBuilder.PartManager.ApplicationParts.Add(new AssemblyPart(typeof(MyMvcUIPlugInModule).Assembly)); |
|||
|
|||
// 添加视图程序集 |
|||
var viewDllPath = Path.Combine(Path.GetDirectoryName(typeof(MyMvcUIPlugInModule).Assembly.Location), "MyMvcUIPlugIn.Views.dll"); |
|||
var viewAssembly = new CompiledRazorAssemblyPart(Assembly.LoadFrom(viewDllPath)); |
|||
mvcBuilder.PartManager.ApplicationParts.Add(viewAssembly); |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
```` |
|||
|
|||
* 由于我们添加了相关的NuGet包,因此取决于`AbpAspNetCoreMvcUiThemeSharedModule`. |
|||
* 添加插件程序集到ASP.NET Core MVC的`PartManager`中.这是ASP.NET Core所必需的.否则,你插件中的控制器将无法正常工作. |
|||
* 添加插件的视图程序集到ASP.NET Core MVC的`PartManager`中.这是ASP.NET Core所必需的.否则,你在插件中的视图将不起作用. |
|||
|
|||
现在,你可以在`Pages`目录下添加一个razor页面,例如`MyPlugInPage.cshtml`： |
|||
|
|||
````html |
|||
@page |
|||
@model MyMvcUIPlugIn.Pages.MyPlugInPage |
|||
<h1>Welcome to my plug-in page</h1> |
|||
<p>This page is located inside a plug-in module! :)</p> |
|||
```` |
|||
|
|||
现在,你可以构建插件项目.它将产生以下输出： |
|||
|
|||
 |
|||
|
|||
将`MyMvcUIPlugIn.dll`和`MyMvcUIPlugIn.Views.dll`复制到到插件目录下(此示例中为`D:\Temp\MyPlugIns`). |
|||
|
|||
如果你已经按照上述方式配置了主应用程序(参见“基础用法”部分),那么在应用程序启动的时候,你应该能够访问`/MyPlugInPage`URL： |
|||
|
|||
 |
|||
|
|||
## 讨论 |
|||
|
|||
在现实世界中,你的插件可能具有一些外部依赖性.另外,你的应用程序可能被设计为支持插件.所有这些都是你自己的系统要求.ABP做的仅仅是在应用程序启动时加载模块.你在这些模块中执行什么操作由你决定. |
|||
|
|||
但是,我们可以为一些常见情况提供一些建议. |
|||
|
|||
### 库依赖 |
|||
|
|||
对于包/dll依赖,你可以将相关的dll复制到插件目录下.ABP会自动将所有程序集加载到该目录下,并且你的插件将按预期工作. |
|||
|
|||
> 请参见[Microsoft文档](https://docs.microsoft.com/zh-cn/dotnet/core/tutorials/creating-app-with-plugin-support#plugin-with-library-dependencies). |
|||
|
|||
### 数据库模式 |
|||
|
|||
如果你的模块使用关系型数据库和[Entity Framework Core](Entity-Framework-Core.md), 那么它需要在数据库中提供表.有多种不同的方法可确保在应用程序使用插件时创建表.一些例子； |
|||
|
|||
1. 插件可以检查数据库表是否存在,并在应用程序启动时创建表,或者如果插件已更新且需要进行某些架构更改时,则会迁移它们.你可以使用EF Core的迁移API来做到这一点. |
|||
2. 你可以改进`DbMigrator`应用程序,用于查找插件的迁移并执行它们. |
|||
|
|||
可能还有其它解决方案.例如,如果你的数据库管理员不允许你在应用程序代码中更改数据库模式,则可能需要手动将SQL文件发送给数据库管理员,以将其应用于数据库. |
|||
@ -0,0 +1 @@ |
|||
TODO... |
|||
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 25 KiB |
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue