mirror of https://github.com/abpframework/abp.git
liangshiwei
6 years ago
397 changed files with 14390 additions and 2547 deletions
@ -0,0 +1,30 @@ |
|||
name: "Main" |
|||
on: |
|||
pull_request: |
|||
paths: |
|||
- "framework/**" |
|||
- "modules/**" |
|||
- "templates/**" |
|||
push: |
|||
paths: |
|||
- "framework/**" |
|||
- "modules/**" |
|||
- "templates/**" |
|||
jobs: |
|||
build-test: |
|||
runs-on: windows-latest |
|||
steps: |
|||
- uses: actions/checkout@v2 |
|||
- uses: actions/setup-dotnet@master |
|||
with: |
|||
dotnet-version: 3.1.100 |
|||
|
|||
- name: Build All |
|||
run: .\build-all.ps1 |
|||
working-directory: .\build |
|||
shell: powershell |
|||
|
|||
- name: Test All |
|||
run: .\test-all.ps1 |
|||
working-directory: .\build |
|||
shell: powershell |
|||
@ -0,0 +1,13 @@ |
|||
{ |
|||
"culture": "ru", |
|||
"texts": { |
|||
"Account": "Аккаунт", |
|||
"Welcome": "Добро пожаловать", |
|||
"UseOneOfTheFollowingLinksToContinue": "Для продолжения используйте одну из следующих ссылок", |
|||
"FrameworkHomePage": "Главная страница фреймворка", |
|||
"FrameworkDocumentation": "Документация фреймворка", |
|||
"OfficialBlog": "Официальный блог", |
|||
"CommercialHomePage": "Главная страница коммерческой версии", |
|||
"CommercialSupportWebSite": "Сайт коммерческой поддержки" |
|||
} |
|||
} |
|||
@ -0,0 +1,90 @@ |
|||
{ |
|||
"culture": "ru", |
|||
"texts": { |
|||
"Permission:Organizations": "Организации", |
|||
"Permission:Manage": "Управление организациями", |
|||
"Permission:NpmPackages": "Пакеты NPM", |
|||
"Permission:NugetPackages": "Пакеты NuGet", |
|||
"Permission:Maintenance": "Обслуживание", |
|||
"Permission:Maintain": "Обслуживать", |
|||
"Permission:ClearCaches": "Очистить кэш", |
|||
"Permission:Modules": "Модули", |
|||
"Permission:Packages": "Пакеты", |
|||
"Permission:Edit": "Редактировать", |
|||
"Permission:Delete": "Удалить", |
|||
"Permission:Create": "Создать", |
|||
"Menu:Organizations": "Организации", |
|||
"Menu:Packages": "Пакеты", |
|||
"NpmPackageDeletionWarningMessage": "Этот пакет NPM будет удален. Вы подтверждаете это?", |
|||
"NugetPackageDeletionWarningMessage": "Этот пакет NuGet будет удален. Вы подтверждаете это?", |
|||
"ModuleDeletionWarningMessage": "Этот модуль будет удален. Вы подтверждаете это?", |
|||
"Name": "Имя", |
|||
"DisplayName": "Отображаемое имя", |
|||
"ShortDescription": "Краткое описание", |
|||
"NameFilter": "Имя", |
|||
"CreationTime": "Время создания", |
|||
"IsPro": "Is pro", |
|||
"EfCoreConfigureMethodName": "Настроить имя метода", |
|||
"IsProFilter": "Is pro", |
|||
"ApplicationType": "Тип приложения", |
|||
"Target": "Цель", |
|||
"TargetFilter": "Цель", |
|||
"ModuleClass": "Класс модуля", |
|||
"NugetPackageTarget.DomainShared": "Domain Shared", |
|||
"NugetPackageTarget.Domain": "Domain", |
|||
"NugetPackageTarget.Application": "Application", |
|||
"NugetPackageTarget.ApplicationContracts": "Application Contracts", |
|||
"NugetPackageTarget.HttpApi": "Http Api", |
|||
"NugetPackageTarget.HttpApiClient": "Http Api Client", |
|||
"NugetPackageTarget.Web": "Web", |
|||
"NugetPackageTarget.EntityFrameworkCore": "DeleteAllEntityFramework Core", |
|||
"NugetPackageTarget.MongoDB": "MongoDB", |
|||
"Edit": "Редактировать", |
|||
"Delete": "Удалить", |
|||
"Refresh": "Обновить", |
|||
"NpmPackages": "NPM пакеты", |
|||
"NugetPackages": "NuGet пакеты", |
|||
"NpmPackageCount": "Количество пакетов NPM", |
|||
"NugetPackageCount": "Количество пакетов NuGet", |
|||
"Module": "Модули", |
|||
"ModuleInfo": "Информация о модуле", |
|||
"CreateANpmPackage": "Создать пакет NPM", |
|||
"CreateAModule": "Создать модуль", |
|||
"CreateANugetPackage": "Создать пакет NuGet", |
|||
"AddNew": "Добавить новый", |
|||
"PackageAlreadyExist{0}": "\"{0}\" пакет уже существует.", |
|||
"ModuleAlreadyExist{0}": "\"{0}\" модуль уже добавлен.", |
|||
"ClearCache": "Очистить кэш", |
|||
"SuccessfullyCleared": "Успешно очищено", |
|||
"Menu:NpmPackages": "Пакеты NPM", |
|||
"Menu:Modules": "Модули", |
|||
"Menu:Maintenance": "Поддержка", |
|||
"Menu:NugetPackages": "Пакеты NuGet", |
|||
"CreateAnOrganization": "Создать организацию", |
|||
"Organizations": "Организации", |
|||
"LongName": "Полное название", |
|||
"LicenseType": "Тип лицензии", |
|||
"LicenseStartTime": "Время начала действия лицензии", |
|||
"LicenseEndTime": "Время окончания действия лицензии", |
|||
"AllowedDeveloperCount": "Разрешенное количество разработчиков", |
|||
"UserNameOrEmailAddress": "Имя пользователя или адрес электронной почты", |
|||
"AddOwner": "Добавить владельца", |
|||
"UserName": "Имя пользователя", |
|||
"Email": "Электронная почта", |
|||
"Developers": "Разработчики", |
|||
"AddDeveloper": "Добавить разработчика", |
|||
"Create": "Создать", |
|||
"UserNotFound": "Пользователь не обнаружен", |
|||
"{0}WillBeRemovedFromMembers": "{0} будет удален из членов", |
|||
"Computers": "Компьютеры", |
|||
"UniqueComputerId": "Уникальный id компьютера", |
|||
"LastSeenDate": "Дата последнего визита", |
|||
"{0}Computer{1}WillBeRemovedFromRecords": "Компьютер {0} ({1}) будет удален из записей", |
|||
"OrganizationDeletionWarningMessage": "Организация будет удалена", |
|||
"This{0}AlreadyExistInThisOrganization": "{0} уже существует в данной организации", |
|||
"AreYouSureYouWantToDeleteAllComputers": "Вы уверены, что хотите удалить все компьютеры?", |
|||
"DeleteAll": "Удалить все", |
|||
"DoYouWantToCreateNewUser": "Вы хотите создать нового пользователя?", |
|||
"MasterModules": "Мастер модулей" |
|||
} |
|||
} |
|||
@ -1,126 +1,8 @@ |
|||
## Getting Started With the Angular Application Template |
|||
# Getting Started with the Startup Templates |
|||
|
|||
This tutorial explains how to create a new Angular application using the startup template, configure and run it. |
|||
See the following tutorials to learn how to get started with the ABP Framework using the pre-built application startup templates: |
|||
|
|||
### Creating a New Project |
|||
* [Getting Started With the ASP.NET Core MVC / Razor Pages UI](Getting-Started?UI=MVC&DB=EF&Tiered=No) |
|||
* [Getting Started with the Angular UI](Getting-Started?UI=NG&DB=EF&Tiered=No) |
|||
|
|||
This tutorial uses **ABP CLI** to create a new project. See the [Get Started](https://abp.io/get-started) page for other options. |
|||
|
|||
Install the ABP CLI using a command line window, if you've not installed before: |
|||
|
|||
````bash |
|||
dotnet tool install -g Volo.Abp.Cli |
|||
```` |
|||
|
|||
Use `abp new` command in an empty folder to create your project: |
|||
|
|||
````bash |
|||
abp new Acme.BookStore -u angular |
|||
```` |
|||
|
|||
> You can use different level of namespaces; e.g. BookStore, Acme.BookStore or Acme.Retail.BookStore. |
|||
|
|||
`-u angular` option specifies the UI framework to be Angular. Default database provider is EF Core. See the [CLI documentation](CLI.md) for all available options. |
|||
|
|||
#### Pre Requirements |
|||
|
|||
The created solution requires; |
|||
|
|||
* [Visual Studio 2019 (v16.4+)](https://visualstudio.microsoft.com/vs/) |
|||
* [.NET Core 3.0+](https://www.microsoft.com/net/download/dotnet-core/) |
|||
* [Node v12+](https://nodejs.org) |
|||
* [Yarn v1.19+](https://classic.yarnpkg.com/) |
|||
|
|||
### The Solution Structure |
|||
|
|||
Open the solution in **Visual Studio**: |
|||
|
|||
 |
|||
|
|||
The solution has a layered structure (based on [Domain Driven Design](Domain-Driven-Design.md)) and contains unit & integration test projects properly configured to work with **EF Core** & **SQLite in-memory** database. |
|||
|
|||
> See the [Application Template Document](Startup-Templates/Application.md) to understand the solution structure in details. |
|||
|
|||
### Database Connection String |
|||
|
|||
Check the **connection string** in the `appsettings.json` file under the `.HttpApi.Host` project: |
|||
|
|||
````json |
|||
{ |
|||
"ConnectionStrings": { |
|||
"Default": "Server=localhost;Database=BookStore;Trusted_Connection=True" |
|||
} |
|||
} |
|||
```` |
|||
|
|||
The solution is configured to use **Entity Framework Core** with **MS SQL Server**. EF Core supports [various](https://docs.microsoft.com/en-us/ef/core/providers/) database providers, so you can use another DBMS if you want. Change the connection string if you need. |
|||
|
|||
### Create Database & Apply Database Migrations |
|||
|
|||
You have two options to create the database. |
|||
|
|||
#### Using the DbMigrator Application |
|||
|
|||
The solution contains a console application (named `Acme.BookStore.DbMigrator` in this sample) that can create database, apply migrations and seed initial data. It is useful on development as well as on production environment. |
|||
|
|||
> `.DbMigrator` project has its own `appsettings.json`. So, if you have changed the connection string above, you should also change this one. |
|||
|
|||
Right click to the `.DbMigrator` project and select **Set as StartUp Project**: |
|||
|
|||
 |
|||
|
|||
Hit F5 (or Ctrl+F5) to run the application. It will have an output like shown below: |
|||
|
|||
 |
|||
|
|||
#### Using EF Core Update-Database Command |
|||
|
|||
Ef Core has `Update-Database` command which creates database if necessary and applies pending migrations. Right click to the `.HttpApi.Host` project and select **Set as StartUp Project**: |
|||
|
|||
 |
|||
|
|||
Open the **Package Manager Console**, select `.EntityFrameworkCore.DbMigrations` project as the **Default Project** and run the `Update-Database` command: |
|||
|
|||
 |
|||
|
|||
This will create a new database based on the configured connection string. |
|||
|
|||
> Using the `.DbMigrator` tool is the suggested way, because it also seeds the initial data to be able to properly run the web application. |
|||
|
|||
### Running the Application |
|||
|
|||
#### Run the API Host (Server Side) |
|||
|
|||
Ensure that the `.HttpApi.Host` project is the startup project and run the application which will open a Swagger UI: |
|||
|
|||
 |
|||
|
|||
You can see the application APIs and test them here. Get [more info](https://swagger.io/tools/swagger-ui/) about the Swagger UI. |
|||
|
|||
##### Authorization for the Swagger UI |
|||
|
|||
Most of the application APIs require authentication & authorization. If you want to test authorized APIs, manually go to the `/Account/Login` page, enter `admin` as the username and `1q2w3E*` as the password to login to the application. Then you will be able to execute authorized APIs too. |
|||
|
|||
#### Run the Angular Application (Client Side) |
|||
|
|||
Go to the `angular` folder, open a command line terminal, type the `yarn` command (we suggest the [yarn](https://yarnpkg.com) package manager while `npm install` will also work in most cases) |
|||
|
|||
````bash |
|||
yarn |
|||
```` |
|||
|
|||
Once all node modules are loaded, execute `yarn start` or `npm start` command: |
|||
|
|||
````bash |
|||
yarn start |
|||
```` |
|||
|
|||
Open your favorite browser and go to `localhost:4200` URL. Initial username is `admin` and password is `1q2w3E*`. |
|||
|
|||
The startup template includes the **identity management** and **tenant management** modules. Once you login, the Administration menu will be available where you can manage **tenants**, **roles**, **users** and their **permissions**. |
|||
|
|||
> We recommend [Visual Studio Code](https://code.visualstudio.com/) as the editor for the Angular project, but you are free to use your favorite editor. |
|||
|
|||
### What's Next? |
|||
|
|||
* [Application development tutorial](Tutorials/Part-1) |
|||
<!-- TODO: this document has been moved, it should be deleted in the future. --> |
|||
@ -1,104 +1,8 @@ |
|||
## Getting Started With the ASP.NET Core MVC Template |
|||
# Getting Started with the Startup Templates |
|||
|
|||
This tutorial explains how to create a new ASP.NET Core MVC web application using the startup template, configure and run it. |
|||
See the following tutorials to learn how to get started with the ABP Framework using the pre-built application startup templates: |
|||
|
|||
### Creating a New Project |
|||
* [Getting Started With the ASP.NET Core MVC / Razor Pages UI](Getting-Started?UI=MVC&DB=EF&Tiered=No) |
|||
* [Getting Started with the Angular UI](Getting-Started?UI=NG&DB=EF&Tiered=No) |
|||
|
|||
This tutorial uses **ABP CLI** to create a new project. See the [Get Started](https://abp.io/get-started) page for other options. |
|||
|
|||
Install the ABP CLI using a command line window, if you've not installed before: |
|||
|
|||
````bash |
|||
dotnet tool install -g Volo.Abp.Cli |
|||
```` |
|||
|
|||
Use `abp new` command in an empty folder to create your project: |
|||
|
|||
````bash |
|||
abp new Acme.BookStore |
|||
```` |
|||
|
|||
> You can use different level of namespaces; e.g. BookStore, Acme.BookStore or Acme.Retail.BookStore. |
|||
|
|||
`new` command creates a **layered MVC application** with **Entity Framework Core** as the database provider. However, it has additional options. See the [CLI documentation](CLI.md) for all available options. |
|||
|
|||
#### Pre Requirements |
|||
|
|||
The created solution requires; |
|||
|
|||
* [Visual Studio 2019 (v16.4+)](https://visualstudio.microsoft.com/vs/) |
|||
* [.NET Core 3.0+](https://www.microsoft.com/net/download/dotnet-core/) |
|||
* [Node v12+](https://nodejs.org) |
|||
* [Yarn v1.19+](https://classic.yarnpkg.com/) |
|||
|
|||
### The Solution Structure |
|||
|
|||
Open the solution in **Visual Studio**: |
|||
|
|||
 |
|||
|
|||
The solution has a layered structure (based on [Domain Driven Design](Domain-Driven-Design.md)) and contains unit & integration test projects properly configured to work with **EF Core** & **SQLite in-memory** database. |
|||
|
|||
> See [Application template document](Startup-Templates/Application.md) to understand the solution structure in details. |
|||
|
|||
### Database Connection String |
|||
|
|||
Check the **connection string** in the `appsettings.json` file under the `.Web` project: |
|||
|
|||
````json |
|||
{ |
|||
"ConnectionStrings": { |
|||
"Default": "Server=localhost;Database=BookStore;Trusted_Connection=True" |
|||
} |
|||
} |
|||
```` |
|||
|
|||
The solution is configured to use **Entity Framework Core** with **MS SQL Server**. EF Core supports [various](https://docs.microsoft.com/en-us/ef/core/providers/) database providers, so you can use another DBMS if you want. Change the connection string if you need. |
|||
|
|||
### Create Database & Apply Database Migrations |
|||
|
|||
You have two options to create the database. |
|||
|
|||
#### Using the DbMigrator Application |
|||
|
|||
The solution contains a console application (named `Acme.BookStore.DbMigrator` in this sample) that can create database, apply migrations and seed initial data. It is useful on development as well as on production environment. |
|||
|
|||
> `.DbMigrator` project has its own `appsettings.json`. So, if you have changed the connection string above, you should also change this one. |
|||
|
|||
Right click to the `.DbMigrator` project and select **Set as StartUp Project**: |
|||
|
|||
 |
|||
|
|||
Hit F5 (or Ctrl+F5) to run the application. It will have an output like shown below: |
|||
|
|||
 |
|||
|
|||
#### Using EF Core Update-Database Command |
|||
|
|||
Ef Core has `Update-Database` command which creates database if necessary and applies pending migrations. Right click to the `.Web` project and select **Set as StartUp Project**: |
|||
|
|||
 |
|||
|
|||
Open the **Package Manager Console**, select `.EntityFrameworkCore.DbMigrations` project as the **Default Project** and run the `Update-Database` command: |
|||
|
|||
 |
|||
|
|||
This will create a new database based on the configured connection string. |
|||
|
|||
> Using the `.Migrator` tool is the suggested way, because it also seeds the initial data to be able to properly run the web application. |
|||
|
|||
### Running the Application |
|||
|
|||
Ensure that the `.Web` project is the startup project. Run the application which will open the **home** page in your browser: |
|||
|
|||
 |
|||
|
|||
Click the **Login** button, enter `admin` as the username and `1q2w3E*` as the password to login to the application. |
|||
|
|||
The startup template includes the **identity management** and **tenant management** modules. Once you login, the Administration menu will be available where you can manage **tenants**, **roles**, **users** and their **permissions**. User management page is shown below: |
|||
|
|||
 |
|||
|
|||
### What's Next? |
|||
|
|||
* [Application development tutorial](Tutorials/Part-1.md) |
|||
<!-- TODO: this document has been moved, it should be deleted in the future. --> |
|||
@ -0,0 +1,407 @@ |
|||
# Getting started |
|||
|
|||
````json |
|||
//[doc-params] |
|||
{ |
|||
"UI": ["MVC","NG"], |
|||
"DB": ["EF", "Mongo"], |
|||
"Tiered": ["Yes", "No"] |
|||
} |
|||
```` |
|||
|
|||
This tutorial explains how to create a new {{if UI == "MVC"}} ASP.NET Core MVC web {{else if UI == "NG"}} Angular {{end}} application using the startup template, configure and run it. |
|||
|
|||
|
|||
## Setup your development environment |
|||
|
|||
First things first! Let's setup your development environment before creating the first project. |
|||
|
|||
### Pre-requirements |
|||
|
|||
The following tools should be installed on your development machine: |
|||
|
|||
* [Visual Studio 2019 (v16.4+)](https://visualstudio.microsoft.com/vs/) for Windows / [Visual Studio for Mac](https://visualstudio.microsoft.com/vs/mac/). |
|||
* [.NET Core 3.0+](https://www.microsoft.com/net/download/dotnet-core/) |
|||
|
|||
* [Node v12+](https://nodejs.org) |
|||
* [Yarn v1.19+](https://classic.yarnpkg.com/) |
|||
|
|||
> You can use another editor instead of Visual Studio as long as it supports .NET Core and ASP.NET Core. |
|||
|
|||
### Install the ABP CLI |
|||
|
|||
[ABP CLI](./CLI.md) is a command line interface that is used to authenticate and automate some tasks for ABP based applications. |
|||
|
|||
> ABP CLI is a free & open source tool for [the ABP framework](https://abp.io/). |
|||
|
|||
First, you need to install the ABP CLI using the following command: |
|||
|
|||
````shell |
|||
dotnet tool install -g Volo.Abp.Cli |
|||
```` |
|||
|
|||
If you've already installed, you can update it using the following command: |
|||
|
|||
````shell |
|||
dotnet tool update -g Volo.Abp.Cli |
|||
```` |
|||
|
|||
## Create a new project |
|||
|
|||
> This document assumes that you prefer to use **{{ UI_Value }}** as the UI framework and **{{ DB_Value }}** as the database provider. For other options, please change the preference on top of this document. |
|||
|
|||
### Using the ABP CLI to create a new project |
|||
|
|||
Use the `new` command of the ABP CLI to create a new project: |
|||
|
|||
````shell |
|||
abp new Acme.BookStore -t app{{if UI == "NG"}} -u angular {{end}}{{if DB == "Mongo"}} -d mongodb{{end}}{{if Tiered == "Yes" && UI != "NG"}} --tiered {{else if Tiered == "Yes" && UI == "NG"}}--separate-identity-server{{end}} |
|||
```` |
|||
|
|||
* `-t` argument specifies the [startup template](Startup-Templates/Application.md) name. `app` is the startup template that contains the essential [ABP Modules](Modules/Index.md) pre-installed and configured for you. |
|||
|
|||
{{ if UI == "NG" }} |
|||
|
|||
* `-u` argument specifies the UI framework, `angular` in this case. |
|||
|
|||
{{ if Tiered == "Yes" }} |
|||
|
|||
* `--separate-identity-server` argument is used to separate the identity server application from the API host application. If not specified, you will have a single endpoint. |
|||
|
|||
{{ end }} |
|||
|
|||
{{ end }} |
|||
|
|||
{{ if DB == "Mongo" }} |
|||
|
|||
* `-d` argument specifies the database provider, `mongodb` in this case. |
|||
|
|||
{{ end }} |
|||
|
|||
{{ if Tiered == "Yes" && UI != "NG" }} |
|||
|
|||
* `--tiered` argument is used to create N-tiered solution where authentication server, UI and API layers are physically separated. |
|||
|
|||
{{ end }} |
|||
|
|||
> You can use different level of namespaces; e.g. BookStore, Acme.BookStore or Acme.Retail.BookStore. |
|||
|
|||
#### ABP CLI commands & options |
|||
|
|||
[ABP CLI document](./CLI.md) covers all of the available commands and options for the ABP CLI. See the [ABP Startup Templates](Startup-Templates/Index.md) document for other templates. |
|||
|
|||
## The solution structure |
|||
|
|||
{{ if UI == "MVC" }} |
|||
|
|||
After creating your project, you will have the following solution folders & files: |
|||
|
|||
 |
|||
|
|||
You will see the following solution structure when you open the `.sln` file in the Visual Studio: |
|||
|
|||
{{if DB == "Mongo"}} |
|||
|
|||
 |
|||
|
|||
{{else}} |
|||
|
|||
![vs-default-app-solution-structure](images/vs-app-solution-structure{{if Tiered == "Yes"}}-tiered{{end}}.png) |
|||
|
|||
{{end}} |
|||
|
|||
{{ else if UI == "NG" }} |
|||
There are three folders in the created solution: |
|||
|
|||
 |
|||
|
|||
* `angular` folder contains the Angular UI application. |
|||
* `aspnet-core` folder contains the backend solution. |
|||
* `react-native` folder contains the React Native UI application. |
|||
|
|||
Open the `.sln` (Visual Studio solution) file under the `aspnet-core` folder: |
|||
|
|||
![vs-angular-app-backend-solution-structure](images/vs-spa-app-backend-structure{{if DB == "Mongo"}}-mongodb{{end}}.png) |
|||
|
|||
{{ end }} |
|||
|
|||
> ###### About the projects in your solution |
|||
> |
|||
> Your solution may have slightly different structure based on your **UI**, **database** and other preferences. |
|||
|
|||
The solution has a layered structure (based on [Domain Driven Design](./Domain-Driven-Design.md)) and also contains unit & integration test projects. |
|||
|
|||
{{ if DB == "EF" }} |
|||
|
|||
Integration tests projects are properly configured to work with **EF Core** & **SQLite in-memory** database. |
|||
|
|||
{{ else if DB == "Mongo" }} |
|||
|
|||
Integration tests projects are properly configured to work with in-memory **MongoDB** database created per test (used [Mongo2Go](https://github.com/Mongo2Go/Mongo2Go) library). |
|||
|
|||
{{ end }} |
|||
|
|||
> See the [application template document](Startup-Templates/Application.md) to understand the solution structure in details. |
|||
|
|||
## Create the database |
|||
|
|||
### Database connection string |
|||
|
|||
Check the **connection string** in the `appsettings.json` file under the {{if UI == "MVC"}}{{if Tiered == "Yes"}}`.IdentityServer` and `.HttpApi.Host` projects{{else}}`.Web` project{{end}}{{else if UI == "NG" }}`.HttpApi.Host` project{{end}}: |
|||
|
|||
{{ if DB == "EF" }} |
|||
|
|||
````json |
|||
"ConnectionStrings": { |
|||
"Default": "Server=localhost;Database=BookStore;Trusted_Connection=True" |
|||
} |
|||
```` |
|||
|
|||
The solution is configured to use **Entity Framework Core** with **MS SQL Server**. EF Core supports [various](https://docs.microsoft.com/en-us/ef/core/providers/) database providers, so you can use any supported DBMS. See [the Entity Framework integration document](https://docs.abp.io/en/abp/latest/Entity-Framework-Core) to learn how to switch to another DBMS. |
|||
|
|||
### Apply the migrations |
|||
|
|||
The solution uses the [Entity Framework Core Code First Migrations](https://docs.microsoft.com/en-us/ef/core/managing-schemas/migrations/?tabs=dotnet-core-cli). So, you need to apply migrations to create the database. There are two ways of applying the database migrations. |
|||
|
|||
#### Apply migrations using the DbMigrator |
|||
|
|||
The solution comes with a `.DbMigrator` console application which applies migrations and also seed the initial data. It is useful on development as well as on production environment. |
|||
|
|||
> `.DbMigrator` project has its own `appsettings.json`. So, if you have changed the connection string above, you should also change this one. |
|||
|
|||
Right click to the `.DbMigrator` project and select **Set as StartUp Project** |
|||
|
|||
 |
|||
|
|||
Hit F5 (or Ctrl+F5) to run the application. It will have an output like shown below: |
|||
|
|||
 |
|||
|
|||
> Initial seed data creates the `admin` user in the database which is then used to login to the application. So, you need to use `.DbMigrator` at least once for a new database. |
|||
|
|||
#### Using EF Core Update-Database command |
|||
|
|||
Ef Core has `Update-Database` command which creates database if necessary and applies pending migrations. |
|||
|
|||
{{ if UI == "MVC" }} |
|||
|
|||
Right click to the {{if Tiered == "Yes"}}`.IdentityServer`{{else}}`.Web`{{end}} project and select **Set as StartUp project**: |
|||
|
|||
{{ else if UI != "MVC" }} |
|||
|
|||
Right click to the `.HttpApi.Host` project and select **Set as StartUp Project**: |
|||
|
|||
{{ end }} |
|||
|
|||
 |
|||
|
|||
Open the **Package Manager Console**, select `.EntityFrameworkCore.DbMigrations` project as the **Default Project** and run the `Update-Database` command: |
|||
|
|||
 |
|||
|
|||
This will create a new database based on the configured connection string. |
|||
|
|||
> Using the `.Migrator` tool is the suggested way, because it also seeds the initial data to be able to properly run the web application. |
|||
|
|||
{{ else if DB == "Mongo" }} |
|||
|
|||
````json |
|||
"ConnectionStrings": { |
|||
"Default": "mongodb://localhost:27017/BookStore" |
|||
} |
|||
```` |
|||
|
|||
The solution is configured to use **MongoDB** in your local computer, so you need to have a MongoDB server instance up and running or change the connection string to another MongoDB server. |
|||
|
|||
### Seed initial data |
|||
|
|||
The solution comes with a `.DbMigrator` console application which seeds the initial data. It is useful on development as well as on production environment. |
|||
|
|||
> `.DbMigrator` project has its own `appsettings.json`. So, if you have changed the connection string above, you should also change this one. |
|||
|
|||
Right click to the `.DbMigrator` project and select **Set as StartUp Project** |
|||
|
|||
 |
|||
|
|||
Hit F5 (or Ctrl+F5) to run the application. It will have an output like shown below: |
|||
|
|||
 |
|||
|
|||
> Initial seed data creates the `admin` user in the database which is then used to login to the application. So, you need to use `.DbMigrator` at least once for a new database. |
|||
|
|||
{{ end }} |
|||
|
|||
## Run the application |
|||
|
|||
{{ if UI == "MVC" }} |
|||
|
|||
{{ if Tiered == "Yes" }} |
|||
|
|||
Ensure that the `.IdentityServer` project is the startup project. Run the application which will open a **login** page in your browser. |
|||
|
|||
> Use Ctrl+F5 in Visual Studio (instead of F5) to run the application without debugging. If you don't have a debug purpose, this will be faster. |
|||
|
|||
You can login, but you cannot enter to the main application here. This is just the authentication server. |
|||
|
|||
Ensure that the `.HttpApi.Host` project is the startup project and run the application which will open a **Swagger UI** in your browser. |
|||
|
|||
 |
|||
|
|||
This is the API application that is used by the web application. |
|||
|
|||
Lastly, ensure that the `.Web` project is the startup project and run the application which will open a **welcome** page in your browser |
|||
|
|||
 |
|||
|
|||
Click to the **login** button which will redirect you to the `Identity Server` to login to the application: |
|||
|
|||
 |
|||
|
|||
{{ else }} |
|||
|
|||
Ensure that the `.Web` project is the startup project. Run the application which will open the **login** page in your browser: |
|||
|
|||
> Use Ctrl+F5 in Visual Studio (instead of F5) to run the application without debugging. If you don't have a debug purpose, this will be faster. |
|||
|
|||
 |
|||
|
|||
{{ end }} |
|||
|
|||
{{ else if UI != "MVC" }} |
|||
|
|||
#### Running the HTTP API Host (server-side) |
|||
|
|||
{{ if Tiered == "Yes" }} |
|||
|
|||
Ensure that the `.IdentityServer` project is the startup project. Run the application which will open a **login** page in your browser. |
|||
|
|||
> Use Ctrl+F5 in Visual Studio (instead of F5) to run the application without debugging. If you don't have a debug purpose, this will be faster. |
|||
|
|||
You can login, but you cannot enter to the main application here. This is just the authentication server. |
|||
|
|||
{{ end }} |
|||
|
|||
Ensure that the `.HttpApi.Host` project is the startup project and run the application which will open a Swagger UI: |
|||
|
|||
{{ if Tiered == "No" }} |
|||
|
|||
> Use Ctrl+F5 in Visual Studio (instead of F5) to run the application without debugging. If you don't have a debug purpose, this will be faster. |
|||
|
|||
{{ end }} |
|||
|
|||
 |
|||
|
|||
You can see the application APIs and test them here. Get [more info](https://swagger.io/tools/swagger-ui/) about the Swagger UI. |
|||
|
|||
> ##### Authorization for the Swagger UI |
|||
> |
|||
> Most of the HTTP APIs require authentication & authorization. If you want to test authorized APIs, manually go to the `/Account/Login` page, enter `admin` as the username and `1q2w3E*` as the password to login to the application. Then you will be able to execute authorized APIs too. |
|||
|
|||
{{ end }} |
|||
|
|||
{{ if UI == "NG" }} |
|||
#### Running the Angular application (client-side) |
|||
|
|||
Go to the `angular` folder, open a command line terminal, type the `yarn` command (we suggest to the [yarn](https://yarnpkg.com/) package manager while `npm install` will also work in most cases) |
|||
|
|||
```bash |
|||
yarn |
|||
``` |
|||
|
|||
Once all node modules are loaded, execute `yarn start` (or `npm start`) command: |
|||
|
|||
```bash |
|||
yarn start |
|||
``` |
|||
|
|||
Wait `Angular CLI` to launch `Webpack` dev-server with `BrowserSync`. |
|||
This will take care of compiling your `TypeScript` code, and automatically reloading your browser. |
|||
After it finishes, `Angular Live Development Server` will be listening on localhost:4200, |
|||
open your web browser and navigate to [localhost:4200](http://localhost:4200/) |
|||
|
|||
|
|||
|
|||
 |
|||
|
|||
{{ end }} |
|||
|
|||
Enter **admin** as the username and **1q2w3E*** as the password to login to the application: |
|||
|
|||
 |
|||
|
|||
The application is up and running. You can start developing your application based on this startup template. |
|||
|
|||
#### Mobile Development |
|||
|
|||
ABP platform provide [React Native](https://reactnative.dev/) template to develop mobile applications. |
|||
|
|||
>The solution includes the React Native application in the `react-native` folder as default. If you don't plan to develop a mobile application with React Native, you can ignore this step and delete the `react-native` folder. |
|||
|
|||
The React Native application running on an Android emulator or a physical phone cannot connect to the backend on `localhost`. To fix this problem, it is necessary to run backend on the local IP. |
|||
|
|||
{{ if Tiered == "No"}} |
|||
 |
|||
|
|||
* Open the `appsettings.json` in the `.HttpApi.Host` folder. Replace the `localhost` address on the `SelfUrl` and `Authority` properties with your local IP address. |
|||
* Open the `launchSettings.json` in the `.HttpApi.Host/Properties` folder. Replace the `localhost` address on the `applicationUrl` properties with your local IP address. |
|||
|
|||
{{ else if Tiered == "Yes" }} |
|||
|
|||
 |
|||
|
|||
* Open the `appsettings.json` in the `.IdentityServer` folder. Replace the `localhost` address on the `SelfUrl` property with your local IP address. |
|||
* Open the `launchSettings.json` in the `.IdentityServer/Properties` folder. Replace the `localhost` address on the `applicationUrl` properties with your local IP address. |
|||
* Open the `appsettings.json` in the `.HttpApi.Host` folder. Replace the `localhost` address on the `Authority` property with your local IP address. |
|||
* Open the `launchSettings.json` in the `.HttpApi.Host/Properties` folder. Replace the `localhost` address on the `applicationUrl` properties with your local IP address. |
|||
|
|||
{{ end }} |
|||
|
|||
Run the backend as described in the [**Running the HTTP API Host (server-side)**](#running-the-http-api-host-server-side) section. |
|||
|
|||
> React Native application does not trust the auto-generated .NET HTTPS certificate, you should use the HTTP during development. |
|||
|
|||
Go to the `react-native` folder, open a command line terminal, type the `yarn` command (we suggest to the [yarn](https://yarnpkg.com/) package manager while `npm install` will also work in most cases): |
|||
|
|||
```bash |
|||
yarn |
|||
``` |
|||
|
|||
* Open the `Environment.js` in the `react-native` folder and replace the `localhost` address on the `apiUrl` and `issuer` properties with your local IP address as shown below: |
|||
|
|||
 |
|||
|
|||
{{ if Tiered == "Yes" }} |
|||
|
|||
> Make sure that `issuer` matches the running address of the `.IdentityServer` project, `apiUrl` matches the running address of the `.HttpApi.Host` project. |
|||
|
|||
{{else}} |
|||
|
|||
> Make sure that `issuer` and `apiUrl` matches the running address of the `.HttpApi.Host` project. |
|||
|
|||
{{ end }} |
|||
|
|||
Once all node modules are loaded, execute `yarn start` (or `npm start`) command: |
|||
|
|||
```bash |
|||
yarn start |
|||
``` |
|||
|
|||
Wait Expo CLI to start. Expo CLI opens the management interface on the `http://localhost:19002/` address. |
|||
|
|||
 |
|||
|
|||
In the above management interface, you can start the application with an Android emulator, an iOS simulator or a physical phone by the scan the QR code with the [Expo Client](https://expo.io/tools#client). |
|||
|
|||
> See the [Android Studio Emulator](https://docs.expo.io/versions/v36.0.0/workflow/android-studio-emulator/), [iOS Simulator](https://docs.expo.io/versions/v36.0.0/workflow/ios-simulator/) documents on expo.io. |
|||
|
|||
 |
|||
|
|||
Enter **admin** as the username and **1q2w3E*** as the password to login to the application. |
|||
|
|||
The application is up and running. You can continue to develop your application based on this startup template. |
|||
|
|||
> The [application startup template](startup-templates/application/index.md) includes the TenantManagement and Identity modules. |
|||
|
|||
## What's next? |
|||
|
|||
[Application development tutorial](tutorials/book-store/part-1.md) |
|||
@ -1,3 +1,277 @@ |
|||
## Dynamic Forms |
|||
# Dynamic Forms |
|||
|
|||
`Warning:` Before getting into this document, be sure that you have clearly understood [abp form elements](Form-elements.md) document. |
|||
|
|||
## Introduction |
|||
|
|||
`abp-dynamic-form` creates a bootstrap form for a given c# model. |
|||
|
|||
Basic usage: |
|||
|
|||
````xml |
|||
<abp-dynamic-form abp-model="@Model.MyDetailedModel"/> |
|||
```` |
|||
Model: |
|||
````csharp |
|||
public class DynamicFormsModel : PageModel |
|||
{ |
|||
[BindProperty] |
|||
public DetailedModel MyDetailedModel { get; set; } |
|||
|
|||
public List<SelectListItem> CountryList { get; set; } = new List<SelectListItem> |
|||
{ |
|||
new SelectListItem { Value = "CA", Text = "Canada"}, |
|||
new SelectListItem { Value = "US", Text = "USA"}, |
|||
new SelectListItem { Value = "UK", Text = "United Kingdom"}, |
|||
new SelectListItem { Value = "RU", Text = "Russia"} |
|||
}; |
|||
|
|||
public void OnGet() |
|||
{ |
|||
MyDetailedModel = new DetailedModel |
|||
{ |
|||
Name = "", |
|||
Description = "Lorem ipsum dolor sit amet.", |
|||
IsActive = true, |
|||
Age = 65, |
|||
Day = DateTime.Now, |
|||
MyCarType = CarType.Coupe, |
|||
YourCarType = CarType.Sedan, |
|||
Country = "RU", |
|||
NeighborCountries = new List<string>() { "UK", "CA" } |
|||
}; |
|||
} |
|||
|
|||
public class DetailedModel |
|||
{ |
|||
[Required] |
|||
[Placeholder("Enter your name...")] |
|||
[Display(Name = "Name")] |
|||
public string Name { get; set; } |
|||
|
|||
[TextArea(Rows = 4)] |
|||
[Display(Name = "Description")] |
|||
[InputInfoText("Describe Yourself")] |
|||
public string Description { get; set; } |
|||
|
|||
[Required] |
|||
[DataType(DataType.Password)] |
|||
[Display(Name = "Password")] |
|||
public string Password { get; set; } |
|||
|
|||
[Display(Name = "Is Active")] |
|||
public bool IsActive { get; set; } |
|||
|
|||
[Required] |
|||
[Display(Name = "Age")] |
|||
public int Age { get; set; } |
|||
|
|||
[Required] |
|||
[Display(Name = "My Car Type")] |
|||
public CarType MyCarType { get; set; } |
|||
|
|||
[Required] |
|||
[AbpRadioButton(Inline = true)] |
|||
[Display(Name = "Your Car Type")] |
|||
public CarType YourCarType { get; set; } |
|||
|
|||
[DataType(DataType.Date)] |
|||
[Display(Name = "Day")] |
|||
public DateTime Day { get; set; } |
|||
|
|||
[SelectItems(nameof(CountryList))] |
|||
[Display(Name = "Country")] |
|||
public string Country { get; set; } |
|||
|
|||
[SelectItems(nameof(CountryList))] |
|||
[Display(Name = "Neighbor Countries")] |
|||
public List<string> NeighborCountries { get; set; } |
|||
} |
|||
|
|||
public enum CarType |
|||
{ |
|||
Sedan, |
|||
Hatchback, |
|||
StationWagon, |
|||
Coupe |
|||
} |
|||
} |
|||
```` |
|||
## Demo |
|||
|
|||
See the [dynamic forms demo page](https://bootstrap-taghelpers.abp.io/Components/DynamicForms) to see it in action. |
|||
|
|||
## Attributes |
|||
|
|||
### abp-model |
|||
|
|||
Sets the c# model for dynamic form. Properties of this modal are turned into inputs in the form. |
|||
|
|||
### submit-button |
|||
|
|||
Can be `True` or `False`. |
|||
|
|||
If `True`, a submit button will be generated at the bottom of the form. |
|||
|
|||
Default value is `False`. |
|||
|
|||
### required-symbols |
|||
|
|||
Can be `True` or `False`. |
|||
|
|||
If `True`, required inputs will have a symbol (*) that indicates they are required. |
|||
|
|||
Default value is `True`. |
|||
|
|||
## Form Content Placement |
|||
|
|||
By default, `abp-dynamicform` clears the inner html and places the inputs into itself. If you want to add additional content to dynamic form or place the inputs to some specific area, you can use ` <abp-form-content />` tag. This tag will be replaced by form content and rest of the inner html of `abp-dynamic-form` tag will be unchanged. |
|||
|
|||
Usage: |
|||
|
|||
````xml |
|||
<abp-dynamic-form abp-model="@Model.MyExampleModel"> |
|||
<div> |
|||
Some content.... |
|||
</div> |
|||
<div class="input-area"> |
|||
<abp-form-content /> |
|||
</div> |
|||
<div> |
|||
Some more content.... |
|||
</div> |
|||
</abp-dynamic-form> |
|||
```` |
|||
|
|||
## Input Order |
|||
|
|||
`abp-dynamic-form` orders the properties by their `DisplayOrder` attribute and then their property order in model class. |
|||
|
|||
Default `DisplayOrder` attribute number is 10000 for every property. |
|||
|
|||
See example below: |
|||
|
|||
````csharp |
|||
public class OrderExampleModel |
|||
{ |
|||
[DisplayOrder(10004)] |
|||
public string Name{ get; set; } |
|||
|
|||
[DisplayOrder(10005)] |
|||
public string Surname{ get; set; } |
|||
|
|||
//Default 10000 |
|||
public string EmailAddress { get; set; } |
|||
|
|||
[DisplayOrder(10003)] |
|||
public string PhoneNumber { get; set; } |
|||
|
|||
[DisplayOrder(9999)] |
|||
public string City { get; set; } |
|||
} |
|||
```` |
|||
|
|||
In this example, input fields will be displayed with this order: `City` > `EmailAddress` > `PhoneNumber` > `Name` > `Surname`. |
|||
|
|||
## Ignoring a property |
|||
|
|||
By default, `abp-dynamic-form` generates input for every property in model class. If you want to ignore a property, use `DynamicFormIgnore` attribute. |
|||
|
|||
See example below: |
|||
|
|||
````csharp |
|||
public class MyModel |
|||
{ |
|||
public string Name { get; set; } |
|||
|
|||
[DynamicFormIgnore] |
|||
public string Surname { get; set; } |
|||
} |
|||
```` |
|||
|
|||
In this example, no input will be generated for `Surname` property. |
|||
|
|||
## Indicating Text box, Radio Group and Combobox |
|||
|
|||
If you have read the [Form elements document](Form-elements.md), you noticed that `abp-radio` and `abp-select` tags are very similar on c# model. So we have to use `[AbpRadioButton()]` attribute to tell `abp-dynamic-form` which of your properties will be radio group and which will be combobox. See example below: |
|||
|
|||
````xml |
|||
<abp-dynamic-form abp-model="@Model.MyDetailedModel"/> |
|||
```` |
|||
Model: |
|||
````csharp |
|||
public class DynamicFormsModel : PageModel |
|||
{ |
|||
[BindProperty] |
|||
public DetailedModel MyDetailedModel { get; set; } |
|||
|
|||
public List<SelectListItem> CountryList { get; set; } = new List<SelectListItem> |
|||
{ |
|||
new SelectListItem { Value = "CA", Text = "Canada"}, |
|||
new SelectListItem { Value = "US", Text = "USA"}, |
|||
new SelectListItem { Value = "UK", Text = "United Kingdom"}, |
|||
new SelectListItem { Value = "RU", Text = "Russia"} |
|||
}; |
|||
|
|||
public void OnGet() |
|||
{ |
|||
MyDetailedModel = new DetailedModel |
|||
{ |
|||
ComboCarType = CarType.Coupe, |
|||
RadioCarType = CarType.Sedan, |
|||
ComboCountry = "RU", |
|||
RadioCountry = "UK" |
|||
}; |
|||
} |
|||
|
|||
public class DetailedModel |
|||
{ |
|||
public CarType ComboCarType { get; set; } |
|||
|
|||
[AbpRadioButton(Inline = true)] |
|||
public CarType RadioCarType { get; set; } |
|||
|
|||
[SelectItems(nameof(CountryList))] |
|||
public string ComboCountry { get; set; } |
|||
|
|||
[AbpRadioButton()] |
|||
[SelectItems(nameof(CountryList))] |
|||
public string RadioCountry { get; set; } |
|||
} |
|||
|
|||
public enum CarType |
|||
{ |
|||
Sedan, |
|||
Hatchback, |
|||
StationWagon, |
|||
Coupe |
|||
} |
|||
} |
|||
```` |
|||
|
|||
As you see in example above: |
|||
|
|||
* If `[AbpRadioButton()]` are used on a **Enum** property, it will be a radio group. Otherwise, combobox. |
|||
* If `[SelectItems()]` and `[AbpRadioButton()]` are used on a property, it will be a radio group. |
|||
* If just `[SelectItems()]` is used on a property, it will be a combobox. |
|||
* If none of these attributes are used on a property, it will be a text box. |
|||
|
|||
## Localization |
|||
|
|||
`abp-dynamic-form` handles localization as well. |
|||
|
|||
By default, it will try to find "DisplayName:{PropertyName}" or "{PropertyName}" localization keys and set the localization value as input label. |
|||
|
|||
You can set it yourself by using `[Display()]` attribute of Asp.Net Core. You can use a localization key in this attribute. See example below: |
|||
|
|||
````csharp |
|||
[Display(Name = "Name")] |
|||
public string Name { get; set; } |
|||
```` |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
This is not documented yet. You can see a [demo](http://bootstrap-taghelpers.abp.io/Components/DynamicForms) for now. |
|||
@ -0,0 +1,261 @@ |
|||
# Form Elements |
|||
|
|||
## Introduction |
|||
|
|||
Abp provides form input tag helpers to make building forms easier. |
|||
|
|||
## Demo |
|||
|
|||
See the [form elements demo page](https://bootstrap-taghelpers.abp.io/Components/FormElements) to see it in action. |
|||
|
|||
## abp-input |
|||
|
|||
`abp-input` tag creates a Bootstrap form input for a given c# property. It uses [Asp.Net Core Input Tag Helper](https://docs.microsoft.com/tr-tr/aspnet/core/mvc/views/working-with-forms?view=aspnetcore-3.1#the-input-tag-helper) in background, so every data annotation attribute of `input` tag helper of Asp.Net Core is also valid for `abp-input`. |
|||
|
|||
Usage: |
|||
|
|||
````xml |
|||
<abp-input asp-for="@Model.MyModel.Name"/> |
|||
<abp-input asp-for="@Model.MyModel.Description"/> |
|||
<abp-input asp-for="@Model.MyModel.Password"/> |
|||
<abp-input asp-for="@Model.MyModel.IsActive"/> |
|||
```` |
|||
|
|||
Model: |
|||
|
|||
````csharp |
|||
public class FormElementsModel : PageModel |
|||
{ |
|||
public SampleModel MyModel { get; set; } |
|||
|
|||
public void OnGet() |
|||
{ |
|||
MyModel = new SampleModel(); |
|||
} |
|||
|
|||
public class SampleModel |
|||
{ |
|||
[Required] |
|||
[Placeholder("Enter your name...")] |
|||
[InputInfoText("What is your name?")] |
|||
public string Name { get; set; } |
|||
|
|||
[Required] |
|||
[FormControlSize(AbpFormControlSize.Large)] |
|||
public string SurName { get; set; } |
|||
|
|||
[TextArea(Rows = 4)] |
|||
public string Description { get; set; } |
|||
|
|||
[Required] |
|||
[DataType(DataType.Password)] |
|||
public string Password { get; set; } |
|||
|
|||
public bool IsActive { get; set; } |
|||
} |
|||
} |
|||
```` |
|||
|
|||
### Attributes |
|||
|
|||
You can set some of the attributes on your c# property, or directly on html tag. If you are going to use this property in a [abp-dynamic-form](Dynamic-forms.md), then you can only set these properties via property attributes. |
|||
|
|||
#### Property Attributes |
|||
|
|||
- `[TextArea()]`: Converts the input into a text area. |
|||
|
|||
* `[Placeholder()]`: Sets placeholder for input. You can use a localization key directly. |
|||
* `[InputInfoText()]`: Sets a small info text for input. You can use a localization key directly. |
|||
* `[FormControlSize()]`: Sets size of form-control wrapper element. Available values are |
|||
- `AbpFormControlSize.Default` |
|||
- `AbpFormControlSize.Small` |
|||
- `AbpFormControlSize.Medium` |
|||
- `AbpFormControlSize.Large` |
|||
* `[DisabledInput]` : Input is disabled. |
|||
* `[ReadOnlyInput]`: Input is read-only. |
|||
|
|||
#### Tag Attributes |
|||
|
|||
* `info`: Sets a small info text for input. You can use a localization key directly. |
|||
* `auto-focus`: If true, browser auto focuses on the element. |
|||
* `size`: Sets size of form-control wrapper element. Available values are |
|||
- `AbpFormControlSize.Default` |
|||
- `AbpFormControlSize.Small` |
|||
- `AbpFormControlSize.Medium` |
|||
- `AbpFormControlSize.Large` |
|||
* `disabled`: Input is disabled. |
|||
* `readonly`: Input is read-only. |
|||
* `label`: Sets the label for input. |
|||
* `display-required-symbol`: Adds the required symbol (*) to label if input is required. Default `True`. |
|||
|
|||
### Label & Localization |
|||
|
|||
You can set label of your input in different ways: |
|||
|
|||
- You can use `Label` attribute and directly set the label. But it doesn't auto localize your localization key. So use it as `label="@L["{LocalizationKey}"].Value"`. |
|||
- You can set it using `[Display(name="{LocalizationKey}")]` attribute of Asp.Net Core. |
|||
- You can just let **abp** find the localization key for the property. It will try to find "DisplayName:{PropertyName}" or "{PropertyName}" localization keys, if `label` or `[DisplayName]` attributes are not set. |
|||
|
|||
## abp-select |
|||
|
|||
`abp-select` tag creates a Bootstrap form select for a given c# property. It uses [Asp.Net Core Select Tag Helper](https://docs.microsoft.com/tr-tr/aspnet/core/mvc/views/working-with-forms?view=aspnetcore-3.1#the-select-tag-helper) in background, so every data annotation attribute of `select` tag helper of Asp.Net Core is also valid for `abp-select`. |
|||
|
|||
`abp-select` tag needs a list of `Microsoft.AspNetCore.Mvc.Rendering.SelectListItem ` to work. It can be provided by `asp-items` attriube on the tag or `[SelectItems()]` attribute on c# property. (if you are using [abp-dynamic-form](Dynamic-forms.md), c# attribute is the only way.) |
|||
|
|||
`abp-select` supports multiple selection. |
|||
|
|||
`abp-select` auto-creates a select list for **Enum** properties. No extra data is needed. If property is nullable, an empty key and value is added to top of the auto-generated list. |
|||
|
|||
Usage: |
|||
|
|||
````xml |
|||
<abp-select asp-for="@Model.MyModel.City" asp-items="@Model.CityList"/> |
|||
|
|||
<abp-select asp-for="@Model.MyModel.AnotherCity"/> |
|||
|
|||
<abp-select asp-for="@Model.MyModel.MultipleCities" asp-items="@Model.CityList"/> |
|||
|
|||
<abp-select asp-for="@Model.MyModel.MyCarType"/> |
|||
|
|||
<abp-select asp-for="@Model.MyModel.MyNullableCarType"/> |
|||
```` |
|||
|
|||
Model: |
|||
|
|||
````csharp |
|||
public class FormElementsModel : PageModel |
|||
{ |
|||
public SampleModel MyModel { get; set; } |
|||
|
|||
public List<SelectListItem> CityList { get; set; } |
|||
|
|||
public void OnGet() |
|||
{ |
|||
MyModel = new SampleModel(); |
|||
|
|||
CityList = new List<SelectListItem> |
|||
{ |
|||
new SelectListItem { Value = "NY", Text = "New York"}, |
|||
new SelectListItem { Value = "LDN", Text = "London"}, |
|||
new SelectListItem { Value = "IST", Text = "Istanbul"}, |
|||
new SelectListItem { Value = "MOS", Text = "Moscow"} |
|||
}; |
|||
} |
|||
|
|||
public class SampleModel |
|||
{ |
|||
public string City { get; set; } |
|||
|
|||
[SelectItems(nameof(CityList))] |
|||
public string AnotherCity { get; set; } |
|||
|
|||
public List<string> MultipleCities { get; set; } |
|||
|
|||
public CarType MyCarType { get; set; } |
|||
|
|||
public CarType? MyNullableCarType { get; set; } |
|||
} |
|||
|
|||
public enum CarType |
|||
{ |
|||
Sedan, |
|||
Hatchback, |
|||
StationWagon, |
|||
Coupe |
|||
} |
|||
} |
|||
```` |
|||
|
|||
### Attributes |
|||
|
|||
You can set some of the attributes on your c# property, or directly on html tag. If you are going to use this property in a [abp-dynamic-form](Dynamic-forms.md), then you can only set these properties via property attributes. |
|||
|
|||
#### Property Attributes |
|||
|
|||
* `[SelectItems()]`: Sets the select data. Parameter should be the name of the data list. (see example above) |
|||
|
|||
- `[InputInfoText()]`: Sets a small info text for input. You can use a localization key directly. |
|||
- `[FormControlSize()]`: Sets size of form-control wrapper element. Available values are |
|||
- `AbpFormControlSize.Default` |
|||
- `AbpFormControlSize.Small` |
|||
- `AbpFormControlSize.Medium` |
|||
- `AbpFormControlSize.Large` |
|||
|
|||
#### Tag Attributes |
|||
|
|||
- `asp-items`: Sets the select data. This Should be a list of SelectListItem. |
|||
- `info`: Sets a small info text for input. You can use a localization key directly. |
|||
- `size`: Sets size of form-control wrapper element. Available values are |
|||
- `AbpFormControlSize.Default` |
|||
- `AbpFormControlSize.Small` |
|||
- `AbpFormControlSize.Medium` |
|||
- `AbpFormControlSize.Large` |
|||
- `label`: Sets the label for input. |
|||
- `display-required-symbol`: Adds the required symbol (*) to label if input is required. Default `True`. |
|||
|
|||
### Label & Localization |
|||
|
|||
You can set label of your input in different ways: |
|||
|
|||
- You can use `Label` attribute and directly set the label. But it doesn't auto localize your localization key. So use it as `label="@L["{LocalizationKey}"].Value".` |
|||
- You can set it using `[Display(name="{LocalizationKey}")]` attribute of Asp.Net Core. |
|||
- You can just let **abp** find the localization key for the property. It will try to find "DisplayName:{PropertyName}" or "{PropertyName}" localization keys. |
|||
|
|||
Localizations of combobox values are set by `abp-select` for **Enum** property. It searches for "{EnumTypeName}.{EnumPropertyName}" or "{EnumPropertyName}" localization keys. For instance, in the example above, it will use "CarType.StationWagon" or "StationWagon" keys for localization when it localizes combobox values. |
|||
|
|||
## abp-radio |
|||
|
|||
`abp-radio` tag creates a Bootstrap form radio group for a given c# property. Usage is very similar to `abp-select` tag. |
|||
|
|||
Usage: |
|||
|
|||
````xml |
|||
<abp-radio asp-for="@Model.MyModel.CityRadio" asp-items="@Model.CityList" inline="true"/> |
|||
|
|||
<abp-radio asp-for="@Model.MyModel.CityRadio2"/> |
|||
```` |
|||
|
|||
Model: |
|||
|
|||
````csharp |
|||
public class FormElementsModel : PageModel |
|||
{ |
|||
public SampleModel MyModel { get; set; } |
|||
|
|||
public List<SelectListItem> CityList { get; set; } = new List<SelectListItem> |
|||
{ |
|||
new SelectListItem { Value = "NY", Text = "New York"}, |
|||
new SelectListItem { Value = "LDN", Text = "London"}, |
|||
new SelectListItem { Value = "IST", Text = "Istanbul"}, |
|||
new SelectListItem { Value = "MOS", Text = "Moscow"} |
|||
}; |
|||
|
|||
public void OnGet() |
|||
{ |
|||
MyModel = new SampleModel(); |
|||
MyModel.CityRadio = "IST"; |
|||
MyModel.CityRadio2 = "MOS"; |
|||
} |
|||
|
|||
public class SampleModel |
|||
{ |
|||
public string CityRadio { get; set; } |
|||
|
|||
[SelectItems(nameof(CityList))] |
|||
public string CityRadio2 { get; set; } |
|||
} |
|||
} |
|||
```` |
|||
|
|||
### Attributes |
|||
|
|||
You can set some of the attributes on your c# property, or directly on html tag. If you are going to use this property in a [abp-dynamic-form](Dynamic-forms.md), then you can only set these properties via property attributes. |
|||
|
|||
#### Property Attributes |
|||
|
|||
- `[SelectItems()]`: Sets the select data. Parameter should be the name of the data list. (see example above) |
|||
|
|||
#### Tag Attributes |
|||
|
|||
- `asp-items`: Sets the select data. This Should be a list of SelectListItem. |
|||
- `Inline`: If true, radio buttons will be in single line, next to each other. If false, they will be under each other. |
|||
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 171 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 218 KiB |
|
After Width: | Height: | Size: 181 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 357 KiB |
|
After Width: | Height: | Size: 424 KiB |
|
After Width: | Height: | Size: 401 KiB |
|
After Width: | Height: | Size: 336 KiB |
|
After Width: | Height: | Size: 389 KiB |
@ -1,3 +0,0 @@ |
|||
## Creating a Settings Tab |
|||
|
|||
TODO... |
|||
@ -1,3 +1,84 @@ |
|||
# Component Replacement |
|||
## 替换组件 |
|||
|
|||
TODO... |
|||
你可以将一些ABP的组件替换为你自己的自定义组件. |
|||
|
|||
您可以**替换**但**不能自定义**默认ABP组件的原因是禁用或更改该组件的一部分可能会导致问题. 所以我们把这些组件称为可替换组件. |
|||
|
|||
### 如何替换组件 |
|||
|
|||
创建一个你想要使用的新组件,添加到 `AppModule` 中的 `declarations` 和`entryComponents` 中. |
|||
|
|||
然后打开 `app.component.ts` 使用 `AddReplaceableComponent` 将你的组件替换ABP组件. 如下所示: |
|||
|
|||
```js |
|||
import { ..., AddReplaceableComponent } from '@abp/ng.core'; // imported AddReplaceableComponent action |
|||
import { eIdentityComponents } from '@abp/ng.identity'; // imported eIdentityComponents enum |
|||
import { Store } from '@ngxs/store'; // imported Store |
|||
//... |
|||
export class AppComponent { |
|||
constructor(..., private store: Store) {} // injected Store |
|||
|
|||
ngOnInit() { |
|||
this.store.dispatch( |
|||
new AddReplaceableComponent({ |
|||
component: YourNewRoleComponent, |
|||
key: eIdentityComponents.Roles, |
|||
}), |
|||
); |
|||
//... |
|||
} |
|||
} |
|||
``` |
|||
|
|||
 |
|||
|
|||
### 如何替换布局 |
|||
|
|||
每个ABP主题模块有3个布局,分别是`ApplicationLayoutComponent`, `AccountLayoutComponent`, `EmptyLayoutComponent`. 这些布局可以用相同的方式替换. |
|||
|
|||
> 一个布局组件模板应该包含 `<router-outlet></router-outlet>` 元素. |
|||
|
|||
下面的例子解释了如何更换 `ApplicationLayoutComponent`: |
|||
|
|||
运行以下命令在 `angular` 文件夹中生成布局: |
|||
|
|||
```bash |
|||
yarn ng generate component shared/my-application-layout --export --entryComponent |
|||
|
|||
# You don't need the --entryComponent option in Angular 9 |
|||
``` |
|||
|
|||
在你的布局模板(`my-layout.component.html`)中添加以下代码: |
|||
|
|||
```html |
|||
<router-outlet></router-outlet> |
|||
``` |
|||
|
|||
打开 `app.component.ts` 添加以下内容: |
|||
|
|||
```js |
|||
import { ..., AddReplaceableComponent } from '@abp/ng.core'; // imported AddReplaceableComponent |
|||
import { eThemeBasicComponents } from '@abp/ng.theme.basic'; // imported eThemeBasicComponents enum for component keys |
|||
import { MyApplicationLayoutComponent } from './shared/my-application-layout/my-application-layout.component'; // imported MyApplicationLayoutComponent |
|||
import { Store } from '@ngxs/store'; // imported Store |
|||
//... |
|||
export class AppComponent { |
|||
constructor(..., private store: Store) {} // injected Store |
|||
|
|||
ngOnInit() { |
|||
// added below content |
|||
this.store.dispatch( |
|||
new AddReplaceableComponent({ |
|||
component: MyApplicationLayoutComponent, |
|||
key: eThemeBasicComponents.ApplicationLayout, |
|||
}), |
|||
); |
|||
|
|||
//... |
|||
} |
|||
} |
|||
``` |
|||
|
|||
## 下一步是什么? |
|||
|
|||
- [自定义设置页面](./Custom-Setting-Page.md) |
|||
|
|||
@ -0,0 +1,294 @@ |
|||
## 配置状态 |
|||
|
|||
`ConfigStateService` 是一个单例服务,即在应用程序的根级别提供,用于与 `Store` 中的应用程序配置状态进行交互. |
|||
|
|||
## 使用前 |
|||
|
|||
为了使用 `ConfigStateService`,你必须将其注入到你的类中. |
|||
|
|||
```js |
|||
import { ConfigStateService } from '@abp/ng.core'; |
|||
|
|||
@Component({ |
|||
/* class metadata here */ |
|||
}) |
|||
class DemoComponent { |
|||
constructor(private config: ConfigStateService) {} |
|||
} |
|||
``` |
|||
|
|||
你不必在模块或组件/指令级别提供 `ConfigStateService`,因为它已经在**根中**提供. |
|||
|
|||
## 选择器方法 |
|||
|
|||
`ConfigStateService` 有许多选择器方法允许你从 `Store` 获取特定或所有的配置. |
|||
|
|||
### 如何从Store获取所有的配置 |
|||
|
|||
你可以使用 `ConfigStateService` 的 `getAll` 方法从Store获取所有的配置对象. 用法如下: |
|||
|
|||
```js |
|||
// this.config is instance of ConfigStateService |
|||
|
|||
const config = this.config.getAll(); |
|||
``` |
|||
|
|||
### 如何从Store获取特定的配置 |
|||
|
|||
你可以使用 `ConfigStateService` 的 `getOne` 方法从Store获取特定的配置属性. 你需要将属性名做为参数传递给方法: |
|||
|
|||
```js |
|||
// this.config is instance of ConfigStateService |
|||
|
|||
const currentUser = this.config.getOne("currentUser"); |
|||
``` |
|||
|
|||
有时你想要获取具体信息,而不是当前用户. 例如你只想获取到 `tenantId`: |
|||
|
|||
```js |
|||
const tenantId = this.config.getDeep("currentUser.tenantId"); |
|||
``` |
|||
|
|||
或通过提供键数组作为参数: |
|||
|
|||
```js |
|||
const tenantId = this.config.getDeep(["currentUser", "tenantId"]); |
|||
``` |
|||
|
|||
`getDeep` 可以执行 `getOne` 的所有操作. 但 `getOne` 的执行效率要高一些. |
|||
|
|||
#### 配置状态属性 |
|||
|
|||
请参阅 `Config.State` 类型,你可以通过 `getOne` 和 `getDeep` 获取所有属性. 你可以在[config.ts 文件](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/config.ts#L7)中找到. |
|||
|
|||
### 如何从Store获取应用程序信息 |
|||
|
|||
`getApplicationInfo` 方法从存储为配置状态存储的环境变量中获取应用程序信息. 你可以这样使用它: |
|||
|
|||
```js |
|||
// this.config is instance of ConfigStateService |
|||
|
|||
const appInfo = this.config.getApplicationInfo(); |
|||
``` |
|||
|
|||
该方法不会返回 `undefined` 或 `null`,而是会返回一个空对象(`{}`). 换句话说,当你使用上面代码中的 `appInfo` 属性时,永远不会出现错误. |
|||
|
|||
#### 应用程序信息属性 |
|||
|
|||
请参阅 `Config.State` 类型,你可以通过 `getApplicationInfo` 获取所有属性. 你可以在[config.ts 文件](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/config.ts#L21)中找到. |
|||
|
|||
### 如何从Store获取 |
|||
|
|||
`getApplicationInfo` 方法从存储为配置状态存储的环境变量中获取特定的API URL. 你可以这样使用它: |
|||
|
|||
```js |
|||
// this.config is instance of ConfigStateService |
|||
|
|||
const apiUrl = this.config.getApiUrl(); |
|||
// environment.apis.default.url |
|||
|
|||
const searchUrl = this.config.getApiUrl("search"); |
|||
// environment.apis.search.url |
|||
``` |
|||
|
|||
该方法返回给定键的特定的API `url`. 如果没有Key,则使用 `default`. |
|||
|
|||
### 如何从Store获取所有的设置 |
|||
|
|||
你可以使用 `ConfigStateService` 的 `getSettings` 获取配置状态所有的设置对象. 你可以这样使用它: |
|||
|
|||
```js |
|||
// this.config is instance of ConfigStateService |
|||
|
|||
const settings = this.config.getSettings(); |
|||
``` |
|||
|
|||
实际上该方法可以通过**传递关键字**来搜索设置. |
|||
|
|||
```js |
|||
const localizationSettings = this.config.getSettings("Localization"); |
|||
/* |
|||
{ |
|||
'Abp.Localization.DefaultLanguage': 'en' |
|||
} |
|||
*/ |
|||
``` |
|||
|
|||
请注意, **设置搜索区分大小写**. |
|||
|
|||
### 如何从Store获取特定的设置 |
|||
|
|||
你可以使用 `ConfigStateService` 的 `getSetting` 获取配置状态特定的设置. 你可以这样使用它: |
|||
|
|||
```js |
|||
// this.config is instance of ConfigStateService |
|||
|
|||
const defaultLang = this.config.getSetting("Abp.Localization.DefaultLanguage"); |
|||
// 'en' |
|||
``` |
|||
|
|||
### 如何从Store获取特定的权限 |
|||
|
|||
你可以使用 `ConfigStateService` 的 `getGrantedPolicy` 获取配置状态特定的权限. 你应该将策略key做为参数传递给方法: |
|||
|
|||
```js |
|||
// this.config is instance of ConfigStateService |
|||
|
|||
const hasIdentityPermission = this.config.getGrantedPolicy("Abp.Identity"); |
|||
// true |
|||
``` |
|||
|
|||
你还可以使用 **组合策略key** 来微调你的选择: |
|||
|
|||
```js |
|||
// this.config is instance of ConfigStateService |
|||
|
|||
const hasIdentityAndAccountPermission = this.config.getGrantedPolicy( |
|||
"Abp.Identity && Abp.Account" |
|||
); |
|||
// false |
|||
|
|||
const hasIdentityOrAccountPermission = this.config.getGrantedPolicy( |
|||
"Abp.Identity || Abp.Account" |
|||
); |
|||
// true |
|||
``` |
|||
|
|||
创建权限选择器时,请考虑以下**规则**: |
|||
|
|||
- 最多可组合两个键. |
|||
- `&&` 操作符查找两个键. |
|||
- `||` 操作符查找任意一个键. |
|||
- 空字符串 `''` 做为键将返回 `true` |
|||
- 使用没有第二个键的操作符将返回 `false` |
|||
|
|||
### 如何从Store中获取翻译 |
|||
|
|||
`ConfigStateService` 的 `getLocalization` 用法翻译. 这里有一些示例: |
|||
|
|||
```js |
|||
// this.config is instance of ConfigStateService |
|||
|
|||
const identity = this.config.getLocalization("AbpIdentity::Identity"); |
|||
// 'identity' |
|||
|
|||
const notFound = this.config.getLocalization("AbpIdentity::IDENTITY"); |
|||
// 'AbpIdentity::IDENTITY' |
|||
|
|||
const defaultValue = this.config.getLocalization({ |
|||
key: "AbpIdentity::IDENTITY", |
|||
defaultValue: "IDENTITY" |
|||
}); |
|||
// 'IDENTITY' |
|||
``` |
|||
|
|||
请参阅[本地化文档](./Localization.md)了解详情. |
|||
|
|||
## 分发方法 |
|||
|
|||
`ConfigStateService` 有几种分发方法，让你方便地将预定义操作分发到 `Store`. |
|||
|
|||
### 如何从服务器获取应用程序配置 |
|||
|
|||
`dispatchGetAppConfiguration` 触发对端点的请求,该端点使用应用程序状态进行响应,然后将此响应作为配置状态放置到 `Store`中. |
|||
|
|||
```js |
|||
// this.config is instance of ConfigStateService |
|||
|
|||
this.config.dispatchGetAppConfiguration(); |
|||
// returns a state stream which emits after dispatch action is complete |
|||
``` |
|||
|
|||
请注意,**你不必在应用程序启动时调用此方法**,因为在启动时已经从服务器收到了应用程序配置. |
|||
|
|||
### 如何修补路由配置 |
|||
|
|||
`dispatchPatchRouteByName` 根据名称查找路由, 并将其在 `Store` 中的配置替换为作为第二个参数传递的新配置. |
|||
|
|||
```js |
|||
// this.config is instance of ConfigStateService |
|||
|
|||
const newRouteConfig: Partial<ABP.Route> = { |
|||
name: "Home", |
|||
path: "home", |
|||
children: [ |
|||
{ |
|||
name: "Dashboard", |
|||
path: "dashboard" |
|||
} |
|||
] |
|||
}; |
|||
|
|||
this.config.dispatchPatchRouteByName("::Menu:Home", newRouteConfig); |
|||
// returns a state stream which emits after dispatch action is complete |
|||
``` |
|||
|
|||
### 如何添加新路由配置 |
|||
|
|||
`dispatchAddRoute` 向 `Store` 的配置状态添加一个新路由. 应该将路由配置做为方法参数传递. |
|||
|
|||
```js |
|||
// this.config is instance of ConfigStateService |
|||
|
|||
const newRoute: ABP.Route = { |
|||
name: "My New Page", |
|||
iconClass: "fa fa-dashboard", |
|||
path: "page", |
|||
invisible: false, |
|||
order: 2, |
|||
requiredPolicy: "MyProjectName::MyNewPage" |
|||
}; |
|||
|
|||
this.config.dispatchAddRoute(newRoute); |
|||
// returns a state stream which emits after dispatch action is complete |
|||
``` |
|||
|
|||
`newRoute` 将被放置在根级别,没有任何父路由,并且其url将存储为 `'/path'`. |
|||
|
|||
如果你想要**添加一个子路由,您可以这样做:** |
|||
|
|||
```js |
|||
// this.config is instance of ConfigStateService |
|||
|
|||
const newRoute: ABP.Route = { |
|||
parentName: "AbpAccount::Login", |
|||
name: "My New Page", |
|||
iconClass: "fa fa-dashboard", |
|||
path: "page", |
|||
invisible: false, |
|||
order: 2, |
|||
requiredPolicy: "MyProjectName::MyNewPage" |
|||
}; |
|||
|
|||
this.config.dispatchAddRoute(newRoute); |
|||
// returns a state stream which emits after dispatch action is complete |
|||
``` |
|||
|
|||
`newRoute` 做为 `'AbpAccount::Login'` 父路由的子路由被放置,它的url被设置为 `'/account/login/page'`. |
|||
|
|||
#### 路由配置属性 |
|||
|
|||
请参阅 `ABP.Route` 类型,获取可在参数中传递给 `dispatchSetEnvironment` 的所有属性. 你可以在[common.ts 文件](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/common.ts#L27)中找到. |
|||
|
|||
### 如何设置环境 |
|||
|
|||
`dispatchSetEnvironment` 将传递给它的环境变量放在 `Store` 中的配置状态下. 使用方法如下: |
|||
|
|||
```js |
|||
// this.config is instance of ConfigStateService |
|||
|
|||
this.config.dispatchSetEnvironment({ |
|||
/* environment properties here */ |
|||
}); |
|||
// returns a state stream which emits after dispatch action is complete |
|||
``` |
|||
|
|||
注意,**你不必在应用程序启动时调用此方法**,因为环境变量已经在启动时存储了. |
|||
|
|||
#### 环境属性 |
|||
|
|||
请参阅 `Config.Environment` 类型,获取可在参数中传递给 `dispatchSetEnvironment` 的所有属性. 你可以在[config.ts 文件](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/config.ts#L13)中找到. |
|||
|
|||
## 下一步是什么? |
|||
|
|||
* [组件替换]](./Component-Replacement.md) |
|||
@ -0,0 +1,87 @@ |
|||
# ContainerStrategy |
|||
|
|||
`ContainerStrategy` 是 @abp/ng.core 包暴露出的抽象类. 有两种扩展容器扩展策略: `ClearContainerStrategy` 和 `InsertIntoContainerStrategy`. 它们实现了相同的方法和属性,这两种策略都可以帮助你定义容器的准备方式和内容的投影位置. |
|||
|
|||
## API |
|||
|
|||
`ClearContainerStrategy` 是一个扩展了 `ContainerStrategy` 的类. 它允许你**将内容投影之前清除容器**. |
|||
|
|||
### 构造函数 |
|||
|
|||
```js |
|||
constructor( |
|||
public containerRef: ViewContainerRef, |
|||
private index?: number, // works only in InsertIntoContainerStrategy |
|||
) |
|||
``` |
|||
|
|||
- `containerRef` 是在投影内容时使用的 `ViewContainerRef`. |
|||
|
|||
### getIndex |
|||
|
|||
```js |
|||
getIndex(): number |
|||
``` |
|||
|
|||
该方法返回被 `0` 和 `containerRef` `length` 限制的给定索引. 对于没有索引的策略,它返回`0`. |
|||
|
|||
### prepare |
|||
|
|||
```js |
|||
prepare(): void |
|||
``` |
|||
|
|||
此方法在内容投影之前调用. 基于使用的容器策略,它要么清除容器,要么什么都不做(空操作). |
|||
|
|||
## ClearContainerStrategy |
|||
|
|||
`ClearContainerStrategy` 是一个扩展了 `ContainerStrategy` 的类. 它允许你**将内容投影之前清除容器**. |
|||
|
|||
## InsertIntoContainerStrategy |
|||
|
|||
`InsertIntoContainerStrategy` 是一个扩展了 `ContainerStrategy` 的类. 它允许你**将内容投影到容器中的特定节点索引上**. |
|||
|
|||
## 预定义的容器策略 |
|||
|
|||
可以通过 `CONTAINER_STRATEGY` 常量访问预定义的容器策略. |
|||
|
|||
### Clear |
|||
|
|||
```js |
|||
CONTAINER_STRATEGY.Clear(containerRef: ViewContainerRef) |
|||
``` |
|||
|
|||
在内容投影之前清除给定的容器. |
|||
|
|||
|
|||
### Append |
|||
|
|||
```js |
|||
CONTAINER_STRATEGY.Append(containerRef: ViewContainerRef) |
|||
``` |
|||
|
|||
将投影内容附加到容器中. |
|||
|
|||
|
|||
### Prepend |
|||
|
|||
```js |
|||
CONTAINER_STRATEGY.Prepend(containerRef: ViewContainerRef) |
|||
``` |
|||
|
|||
将投影的内容预先写入容器中. |
|||
|
|||
### Insert |
|||
|
|||
```js |
|||
CONTAINER_STRATEGY.Insert( |
|||
containerRef: ViewContainerRef, |
|||
index: number, |
|||
) |
|||
``` |
|||
|
|||
将投影内容按照给定的索引(在`0` 到 `containerRef`的长度之间)插入到容器中. |
|||
|
|||
## 另请参阅 |
|||
|
|||
- [ProjectionStrategy](./Projection-Strategy.md) |
|||
@ -0,0 +1,77 @@ |
|||
# 内容投影 |
|||
|
|||
你可以使用位于@abp/ng.core包中的 `ContentProjectionService` 简单明确的投影内容. |
|||
|
|||
## 入门 |
|||
|
|||
你不必在模块或组件级别提供 `ContentProjectionService`,因为它已经在**根中提供了**. 你可以在组件中注入并开始使用它. 为了获得更好的类型支持,你可以将迭代项目的类型传递给它. |
|||
|
|||
```js |
|||
import { ContentProjectionService } from '@abp/ng.core'; |
|||
|
|||
@Component({ |
|||
/* class metadata here */ |
|||
}) |
|||
class DemoComponent { |
|||
constructor(private contentProjectionService: ContentProjectionService) {} |
|||
} |
|||
``` |
|||
|
|||
## 用法 |
|||
|
|||
你可以使用 `ContentProjectionService` 的 `projectContent` 方法在你的项目中动态的渲染组件和模板. |
|||
|
|||
### 如何将组件投影到根级别 |
|||
|
|||
如果将 `RootComponentProjectionStrategy` 做为 `projectContent` 方法的第一个参数,那么 `ContentProjectionService` 会解析投影组件并放在根级别,它还为组件传递上下文. |
|||
|
|||
```js |
|||
const strategy = PROJECTION_STRATEGY.AppendComponentToBody( |
|||
SomeOverlayComponent, |
|||
{ someOverlayProp: "SOME_VALUE" } |
|||
); |
|||
|
|||
const componentRef = this.contentProjectionService.projectContent(strategy); |
|||
``` |
|||
|
|||
在上面的示例中, `SomeOverlayComponent` 组件放置在 `<body>` 的**末尾**并返回 `ComponentRef`. 另外将应用给定的上下文,因此组件的 `someOverlayProp` 被设置为 `SOME_VALUE`. |
|||
|
|||
> 你应该总是返回 `ComponentRef` 实例,因为它是对投影组件的引用,在你需要时使用该引用销毁投影视图和组件实例. |
|||
|
|||
### 如何将组件和模板投影到容器中 |
|||
|
|||
如果将 `ComponentProjectionStrategy` 或 `TemplateProjectionStrategy` 做为 `projectContent` 方法的第一个参数,并且传递 `ViewContainerRef` 做为策略的第二个参数传递. 那么 `ContentProjectionService` 把组件或模板投影到给定的容器中,它还为组件或模板传递上下文. |
|||
|
|||
```js |
|||
const strategy = PROJECTION_STRATEGY.ProjectComponentToContainer( |
|||
SomeComponent, |
|||
viewContainerRefOfTarget, |
|||
{ someProp: "SOME_VALUE" } |
|||
); |
|||
|
|||
const componentRef = this.contentProjectionService.projectContent(strategy); |
|||
``` |
|||
|
|||
在上面的示例中,`viewContainerRefOfTarget`(它是一个`ViewContainerRef` 实例)将被清除,并把 `SomeComponent` 组件放在其中. 另外将应用给定的上下文,因此组件的 `someProp` 被设置为 `SOME_VALUE`. |
|||
|
|||
> 你应该总是返回 `ComponentRef` 或 `EmbeddedViewRef` ,因为它是对投影内容的引用,在你需要时使用该引用销毁它们. |
|||
|
|||
请参考[ProjectionStrategy](./Projection-Strategy.md)查看所有可用的投影策略以及如何构建自己的投影策略. |
|||
|
|||
## API |
|||
|
|||
### projectContent |
|||
|
|||
```js |
|||
projectContent<T extends Type<any> | TemplateRef<any>>( |
|||
projectionStrategy: ProjectionStrategy<T>, |
|||
injector = this.injector, |
|||
): ComponentRef<C> | EmbeddedViewRef<C> |
|||
``` |
|||
|
|||
- `projectionStrategy` 参数是此处的要点,在上面进行了说明. |
|||
- `injector` 参数是 `Injector` 实例,你可以传递到投影内容. 在 `TemplateProjectionStrategy` 并没有使用到它. |
|||
|
|||
## 下一步是什么? |
|||
|
|||
- [TrackByService](./Track-By-Service.md) |
|||
@ -0,0 +1,55 @@ |
|||
# ContentSecurityStrategy |
|||
|
|||
`ContentSecurityStrategy` 是@abp/ng.core包暴露出的抽象类. 它可以根据[内容安全策略](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)帮助你将内联脚本或样式标记为安全. |
|||
|
|||
## API |
|||
|
|||
### 构造函数 |
|||
|
|||
```js |
|||
constructor(public nonce?: string) |
|||
``` |
|||
|
|||
- `nonce` 启用将内联脚本或样式列入白名单,避免在[script-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script)和[style-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#Unsafe_inline_styles)指令中使用 `unsafe-inline`. |
|||
|
|||
### applyCSP |
|||
|
|||
```js |
|||
applyCSP(element: HTMLScriptElement | HTMLStyleElement): void |
|||
``` |
|||
|
|||
该方法将上述属性映射到给定`element`. |
|||
|
|||
## LooseContentSecurityPolicy |
|||
|
|||
`LooseContentSecurityPolicy` 是扩展了 `ContentSecurityStrategy` 的类. 它需要 `nonce` 和带有给定 `<script>` 或 `<style>` 标记的标签. |
|||
|
|||
## NoContentSecurityPolicy |
|||
|
|||
`NoContentSecurityPolicy` 是扩展了 `ContentSecurityStrategy` 的类. 它不会将内联脚本和样式标记为安全. 你可以将其视为空操作的替代方案. |
|||
s |
|||
|
|||
## 预定义内容安全策略 |
|||
|
|||
可以通过 `CONTENT_SECURITY_STRATEGY` 常量访问预定义的内容安全策略. |
|||
|
|||
### Loose |
|||
|
|||
```js |
|||
CONTENT_SECURITY_STRATEGY.Loose(nonce: string) |
|||
``` |
|||
|
|||
`nonce` 会被设置. |
|||
|
|||
### None |
|||
|
|||
```js |
|||
CONTENT_SECURITY_STRATEGY.None() |
|||
``` |
|||
|
|||
什么都不会做. |
|||
|
|||
## 另请参阅 |
|||
|
|||
- [DomInsertionService](./Dom-Insertion-Service.md) |
|||
- [ContentStrategy](./Content-Strategy.md) |
|||
@ -0,0 +1,85 @@ |
|||
# ContentStrategy |
|||
|
|||
`ContentStrategy` 是@abp/ng.core包暴露出的抽象类. 它可以帮助您创建内联脚本或样式. |
|||
|
|||
## API |
|||
|
|||
### 构造函数 |
|||
|
|||
```js |
|||
constructor( |
|||
public content: string, |
|||
protected domStrategy?: DomStrategy, |
|||
protected contentSecurityStrategy?: ContentSecurityStrategy |
|||
) |
|||
``` |
|||
|
|||
- `content` 是被设置为 `<script>` 和 `<style>` 元素的 `textContent` 属性. |
|||
- `domStrategy` 是在插入创建的元素时将使用的 `DomStrategy` . (默认值: AppendToHead_) |
|||
- `contentSecurityStrategy` 是 `ContentSecurityStrategy`, 在创建的元素插入使用它它. (默认值: None_) |
|||
|
|||
请参考[DomStrategy](./Dom-Strategy.md)和[ContentSecurityStrategy](./Content-Security-Strategy.md)文档了解它们的用法. |
|||
|
|||
### createElement |
|||
|
|||
```js |
|||
createElement(): HTMLScriptElement | HTMLStyleElement |
|||
``` |
|||
|
|||
该方法创建并且返回 `<script>` 或 `<style>` 元素, 将 `content` 设置为 `textContent`. |
|||
|
|||
### insertElement |
|||
|
|||
```js |
|||
insertElement(): void |
|||
``` |
|||
|
|||
该方法创建并且插入一个 `<script>` 或 `<style>` 元素. |
|||
|
|||
## ScriptContentStrategy |
|||
|
|||
`ScriptContentStrategy` 是扩展了 `ContentStrategy` 的类. 你可以使用它将 **`<script>`元素插入DOM**. |
|||
|
|||
## StyleContentStrategy |
|||
|
|||
`StyleContentStrategy` 是扩展了 `ContentStrategy` 的类. 你可以使用它将 **`<style>`元素插入DOM**. |
|||
|
|||
## 预定义内容策略 |
|||
|
|||
预定义的内容策略可以通过 `CONTENT_STRATEGY` 常量访问. |
|||
|
|||
### AppendScriptToBody |
|||
|
|||
```js |
|||
CONTENT_STRATEGY.AppendScriptToBody(content: string) |
|||
``` |
|||
|
|||
创建具有给定内容的 `<script>` 元素, 并放置在文档中`<body>`标记的**末尾**. |
|||
|
|||
### AppendScriptToHead |
|||
|
|||
```js |
|||
CONTENT_STRATEGY.AppendScriptToHead(content: string) |
|||
``` |
|||
|
|||
创建具有给定内容的 `<script>` 元素, 并放置在文档中`<head>`标签的**末尾**. |
|||
|
|||
### AppendStyleToHead |
|||
|
|||
```js |
|||
CONTENT_STRATEGY.AppendStyleToHead(content: string) |
|||
``` |
|||
|
|||
创建具有给定内容的 `<style>` 元素, 并放置在文档中`<head>`标签的**末尾**. |
|||
|
|||
### PrependStyleToHead |
|||
|
|||
```js |
|||
CONTENT_STRATEGY.PrependStyleToHead(content: string) |
|||
``` |
|||
|
|||
创建具有给定内容的 `<style>` 元素, 并放置在文档中`<head>`标签的**头部**. |
|||
|
|||
## 另请参阅 |
|||
|
|||
- [DomInsertionService](./Dom-Insertion-Service.md) |
|||
@ -0,0 +1,100 @@ |
|||
# ContextStrategy |
|||
|
|||
`ContextStrategy` 是@abp/ng.core包暴露出的抽象类. 有三种扩展容器扩展策略: `ComponentContextStrategy` , `TemplateContextStrategy` 和 `NoContextStrategy`. 它们实现了相同的方法和属性,这三种策略都可以帮助你获得定义投影内容上下文 |
|||
|
|||
## ComponentContextStrategy |
|||
|
|||
`ComponentContextStrategy` 是扩展了 `ContextStrategy` 的类, 它允许你**将上下文传递给一个投影组件**. |
|||
|
|||
### 构造函数 |
|||
|
|||
```js |
|||
constructor(public context: Partial<InferredInstanceOf<T>>) {} |
|||
``` |
|||
|
|||
- `T` 在这里引用组件类型, 例. `Type<C>`. |
|||
- `InferredInstanceOf` 是 @abp/ng.core 包暴露的实用类型. 它可以推断组件. |
|||
- `context` 是将映射到投影组件的属性. |
|||
|
|||
### setContext |
|||
|
|||
```js |
|||
setContext(componentRef: ComponentRef<InferredInstanceOf<T>>): Partial<InferredInstanceOf<T>> |
|||
``` |
|||
|
|||
该方法将上下文的每个属性映射到具有相同名称的组件属性,并调用更改检测.映射后返回上下文. |
|||
|
|||
## TemplateContextStrategy |
|||
|
|||
`TemplateContextStrategy` 是扩展了 `ContextStrategy` 的类. 它允许你**将上下文传递到投影模板**. |
|||
|
|||
### 构造函数 |
|||
|
|||
```js |
|||
constructor(public context: Partial<InferredContextOf<T>>) {} |
|||
``` |
|||
|
|||
- `T` 在这里引用组件类型, 例. `Type<C>`. |
|||
- `InferredInstanceOf` 是 @abp/ng.core 包暴露的实用类型. 它可以推断组件. |
|||
- `context` 是将映射到投影组件的属性. |
|||
|
|||
### setContext |
|||
|
|||
```js |
|||
setContext(): Partial<InferredContextOf<T>> |
|||
``` |
|||
|
|||
此方法不执行任何操作它仅返回上下文,因为模板上下文没有被映射. 而是作为参数传递给 `createEmbeddedView` 方法. |
|||
|
|||
## NoContextStrategy |
|||
|
|||
`NoContextStrategy` 是扩展了 `ContextStrategy` 的类. 它允许你**跳过将任何上下文传递到投影内容**. |
|||
|
|||
### 构造函数 |
|||
|
|||
```js |
|||
constructor() |
|||
``` |
|||
|
|||
不像其它的策略, `NoContextStrategy` 构造函数没有参数. |
|||
|
|||
### setContext |
|||
|
|||
```js |
|||
setContext(): undefined |
|||
``` |
|||
|
|||
由于没有上下文,方法没有参数并且返回`undefined`. |
|||
|
|||
## 预定义上下文策略 |
|||
|
|||
可以通过 `CONTEXT_STRATEGY` 常量访问预定义的上下文策略. |
|||
|
|||
### None |
|||
|
|||
```js |
|||
CONTEXT_STRATEGY.None() |
|||
``` |
|||
|
|||
该策略不会将任何上下文传递到投影内容。 |
|||
|
|||
### Component |
|||
|
|||
```js |
|||
CONTEXT_STRATEGY.Component(context: Partial<InferredContextOf<T>>) |
|||
``` |
|||
|
|||
该策略将帮助你将给定的上下文传递到投影组件. |
|||
|
|||
|
|||
### Template |
|||
|
|||
```js |
|||
CONTEXT_STRATEGY.Template(context: Partial<InferredContextOf<T>>) |
|||
``` |
|||
|
|||
该策略将帮助你将给定的上下文传递到投影模板. |
|||
|
|||
## 另请参阅 |
|||
|
|||
- [ProjectionStrategy](./Projection-Strategy.md) |
|||
@ -0,0 +1,46 @@ |
|||
# 自定义设置页面 |
|||
|
|||
不同的模块提供它们的设置选项卡. 你可以通过3个步骤在项目中自定义设置页面. |
|||
|
|||
1. 创建一个组件 |
|||
|
|||
```js |
|||
import { Select } from '@ngxs/store'; |
|||
import { Component } from '@angular/core'; |
|||
|
|||
@Component({ |
|||
selector: 'app-your-custom-settings', |
|||
template: ` |
|||
custom-settings works! |
|||
`, |
|||
}) |
|||
export class YourCustomSettingsComponent { |
|||
// Your component logic |
|||
} |
|||
``` |
|||
|
|||
2. 添加 `YourCustomSettingsComponent` 到 `AppModule` 中的 `declarations`和 `entryComponents` 数组中. |
|||
|
|||
3. 打开 `app.component.ts` 在 `ngOnInit` 添加以下内容: |
|||
|
|||
```js |
|||
import { addSettingTab } from '@abp/ng.theme.shared'; |
|||
// ... |
|||
|
|||
ngOnInit() { |
|||
addSettingTab({ |
|||
component: YourCustomSettingsComponent, |
|||
name: 'Type here the setting tab title (you can type a localization key, e.g: AbpAccount::Login', |
|||
order: 4, |
|||
requiredPolicy: 'type here a policy key' |
|||
}); |
|||
} |
|||
``` |
|||
|
|||
导航到 `/setting-management` 路由你会看到以下变化: |
|||
|
|||
 |
|||
|
|||
## 下一步是什么? |
|||
|
|||
- [懒加载 Scripts 与 Styles](./Lazy-Load-Service.md) |
|||
@ -0,0 +1,130 @@ |
|||
# Dom插入(Scripts与Styles) |
|||
|
|||
你可以使用@abp/ng.core包提供的 `DomInsertionService` 以简单的方式的插入脚本与样式. |
|||
|
|||
## 入门 |
|||
|
|||
你不必在模块或组件级别提供 `DomInsertionService` ,因为它已经在**根中**提供. 你可以在组件,指令或服务中直接注入并使用它. |
|||
|
|||
```js |
|||
import { DomInsertionService } from '@abp/ng.core'; |
|||
|
|||
@Component({ |
|||
/* class metadata here */ |
|||
}) |
|||
class DemoComponent { |
|||
constructor(private domInsertionService: DomInsertionService) {} |
|||
} |
|||
``` |
|||
|
|||
## 用法 |
|||
|
|||
你可以使用 `DomInsertionService` 提供的 `insertContent` 方法去创建一个 `<script>` 或 `<style>` 元素到DOM的指定位置. 还有 `projectContent` 方法用于渲染组件和模板. |
|||
|
|||
### 如何插入Scripts |
|||
|
|||
`insertContent` 方法的第一个参数需要一个 `ContentStrategy`. 如果传递 `ScriptContentStrategy` 实例, `DomInsertionService` 将创建具有给定内容的 `<script>` 元素并放置在指定的DOM位置. |
|||
|
|||
```js |
|||
import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core'; |
|||
|
|||
@Component({ |
|||
/* class metadata here */ |
|||
}) |
|||
class DemoComponent { |
|||
constructor(private domInsertionService: DomInsertionService) {} |
|||
|
|||
ngOnInit() { |
|||
const scriptElement = this.domInsertionService.insertContent( |
|||
CONTENT_STRATEGY.AppendScriptToBody('alert()') |
|||
); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
在上面的示例中,将 `<script>alert()</script>` 元素放置在 `<body>`的末尾, `scriptElement` 类型是一个 `HTMLScriptElement`. |
|||
|
|||
请参考[ContentStrategy](./Content-Strategy.md)查看所有可用的内容策略以及如何构建自己的内容策略. |
|||
|
|||
> 重要说明: `DomInsertionService` 不会两次插入相同的内容. 为了再次添加内容你首先应该使用 `removeContent` 方法删除旧内容. |
|||
|
|||
### 如何插入Styles |
|||
|
|||
`insertContent` 方法的第一个参数需要一个 `ContentStrategy`. 如果传递 `StyleContentStrategy` 实例, `DomInsertionService` 将创建具有给定内容的 `<style>` 元素并放置在指定的DOM位置. |
|||
|
|||
```js |
|||
import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core'; |
|||
|
|||
@Component({ |
|||
/* class metadata here */ |
|||
}) |
|||
class DemoComponent { |
|||
constructor(private domInsertionService: DomInsertionService) {} |
|||
|
|||
ngOnInit() { |
|||
const styleElement = this.domInsertionService.insertContent( |
|||
CONTENT_STRATEGY.AppendStyleToHead('body {margin: 0;}') |
|||
); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
在上面的示例中,将 `<style>body {margin: 0;}</style>` 元素放置在 `<head>`的末尾, `styleElement` 类型是一个 `HTMLStyleElement`. |
|||
|
|||
请参考[ContentStrategy](./Content-Strategy.md)查看所有可用的内容策略以及如何构建自己的内容策略. |
|||
. |
|||
> 重要说明: `DomInsertionService` 不会两次插入相同的内容. 为了再次添加内容你首先应该使用 `removeContent` 方法删除旧内容. |
|||
|
|||
### 如何删除已插入的 Scripts & Styles |
|||
|
|||
如果你传递 `HTMLScriptElement` 或 `HTMLStyleElement` 做为 `removeContent` 方法的第一个参数, `DomInsertionService` 将删除给定的元素. |
|||
|
|||
```js |
|||
import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core'; |
|||
|
|||
@Component({ |
|||
/* class metadata here */ |
|||
}) |
|||
class DemoComponent { |
|||
private styleElement: HTMLStyleElement; |
|||
|
|||
constructor(private domInsertionService: DomInsertionService) {} |
|||
|
|||
ngOnInit() { |
|||
this.styleElement = this.domInsertionService.insertContent( |
|||
CONTENT_STRATEGY.AppendStyleToHead('body {margin: 0;}') |
|||
); |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
this.domInsertionService.removeContent(this.styleElement); |
|||
} |
|||
} |
|||
``` |
|||
|
|||
在上面的示例中,销毁组件时,将从 `<head>` 中删除 `<style>body {margin: 0;}</style>` 元素. |
|||
|
|||
## API |
|||
|
|||
### insertContent |
|||
|
|||
```js |
|||
insertContent<T extends HTMLScriptElement | HTMLStyleElement>( |
|||
contentStrategy: ContentStrategy<T>, |
|||
): T |
|||
``` |
|||
|
|||
- `contentStrategy` 是方法的重要参数,已经在上方进行说明. |
|||
- 根据给定的策略返回 `HTMLScriptElement` 或 `HTMLStyleElement`. |
|||
|
|||
### removeContent |
|||
|
|||
```js |
|||
removeContent(element: HTMLScriptElement | HTMLStyleElement): void |
|||
``` |
|||
|
|||
- `element` 参数是已插入的 `HTMLScriptElement` 或 `HTMLStyleElement` 元素,它们应由 `insertContent` 方法返回. |
|||
|
|||
## 下一步是什么? |
|||
|
|||
- [ContentProjectionService](./Content-Projection-Service.md) |
|||
@ -0,0 +1,80 @@ |
|||
# DomStrategy |
|||
|
|||
`DomStrategy` 是@abp/ng.core包暴露出的抽象类. 它的实例定义了如何将元素附加到DOM以及如何被其它类(如`LoadingStrategy`)使用. |
|||
|
|||
## API |
|||
|
|||
### 构造函数 |
|||
|
|||
```js |
|||
constructor( |
|||
public target?: HTMLElement, |
|||
public position?: InsertPosition |
|||
) |
|||
``` |
|||
|
|||
- `target` 是一个 HTMLElement (默认值: document.head_). |
|||
- `position` 定义将创建的元素放置在何处. 可以在[此处](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement)找到所有可能的 `position` 值(默认值: 'beforeend'_). |
|||
|
|||
### insertElement |
|||
|
|||
```js |
|||
insertElement(element: HTMLElement): void |
|||
``` |
|||
|
|||
该方法根据 `postion` 将给定 `元素` 插入到目标中. |
|||
|
|||
## 预定义DOM策略 |
|||
|
|||
可以通过 `DOM_STRATEGY` 常量访问预定义的dom策略. |
|||
|
|||
|
|||
### AppendToBody |
|||
|
|||
```js |
|||
DOM_STRATEGY.AppendToBody() |
|||
``` |
|||
|
|||
`insertElement` 将给定 `元素` 放在 `<body>` 的末尾. |
|||
|
|||
|
|||
### AppendToHead |
|||
|
|||
```js |
|||
DOM_STRATEGY.AppendToHead() |
|||
``` |
|||
|
|||
`insertElement` 将给定 `元素` 放在 `<head>` 的末尾. |
|||
|
|||
### PrependToHead |
|||
|
|||
```js |
|||
DOM_STRATEGY.PrependToHead() |
|||
``` |
|||
|
|||
`insertElement` 将给定 `元素` 放在 `<head>` 的头部. |
|||
|
|||
|
|||
### AfterElement |
|||
|
|||
```js |
|||
DOM_STRATEGY.AfterElement(target: HTMLElement) |
|||
``` |
|||
|
|||
`insertElement` 将给定 `元素` 放在 `target` 之后 (做为同级元素). |
|||
|
|||
### BeforeElement |
|||
|
|||
```js |
|||
DOM_STRATEGY.BeforeElement(target: HTMLElement) |
|||
``` |
|||
|
|||
`insertElement` 将给定 `元素` 放在 `target` 之前 (做为同级元素). |
|||
|
|||
## 另请参阅 |
|||
|
|||
- [DomInsertionService](./Dom-Insertion-Service.md) |
|||
- [LazyLoadService](./Lazy-Load-Service.md) |
|||
- [LoadingStrategy](./Loading-Strategy.md) |
|||
- [ContentStrategy](./Content-Strategy.md) |
|||
- [ProjectionStrategy](./Projection-Strategy.md) |
|||
@ -0,0 +1,3 @@ |
|||
## HTTP请求 |
|||
|
|||
TODO... |
|||
@ -0,0 +1,3 @@ |
|||
# 如何懒加载 Scripts 与 Styles |
|||
|
|||
TODO... |
|||
@ -1,3 +1,79 @@ |
|||
# Permission Management |
|||
# 权限管理 |
|||
|
|||
TODO... |
|||
权限是为特定用户,角色或客户端授予或禁止的简单策略. 你可以在[ABP授权文档](../../Authorization.md)中阅读更多信息. |
|||
|
|||
您可以使用 `ConfigState` 的 `getGrantedPolicy` 选择器获取经过身份验证的用户的权限. |
|||
|
|||
你可以从Store中获取权限的布尔值: |
|||
|
|||
```js |
|||
import { Store } from '@ngxs/store'; |
|||
import { ConfigState } from '../states'; |
|||
|
|||
export class YourComponent { |
|||
constructor(private store: Store) {} |
|||
|
|||
ngOnInit(): void { |
|||
const canCreate = this.store.selectSnapshot(ConfigState.getGrantedPolicy('AbpIdentity.Roles.Create')); |
|||
} |
|||
|
|||
// ... |
|||
} |
|||
``` |
|||
|
|||
或者你可以通过 `ConfigStateService` 获取它: |
|||
|
|||
```js |
|||
import { ConfigStateService } from '../services/config-state.service'; |
|||
|
|||
export class YourComponent { |
|||
constructor(private configStateService: ConfigStateService) {} |
|||
|
|||
ngOnInit(): void { |
|||
const canCreate = this.configStateService.getGrantedPolicy('AbpIdentity.Roles.Create'); |
|||
} |
|||
|
|||
// ... |
|||
} |
|||
``` |
|||
|
|||
## 权限指令 |
|||
|
|||
你可以使用 `PermissionDirective` 来根据用户的权限控制DOM元素是否可见. |
|||
|
|||
```html |
|||
<div *abpPermission="AbpIdentity.Roles"> |
|||
仅当用户具有`AbpIdentity.Roles`权限时,此内容才可见. |
|||
</div> |
|||
``` |
|||
|
|||
如上所示,你可以使用 `abpPermission` 结构指令从DOM中删除元素. |
|||
|
|||
该指令也可以用作属性指令,但是我们建议你将其用作结构指令. |
|||
|
|||
## 权限守卫 |
|||
|
|||
如果你想要在导航过程中控制经过身份验证的用户对路由的访问权限,可以使用 `PermissionGuard`. |
|||
|
|||
将 `requiredPolicy` 添加到路由模块中的 `routes`属性. |
|||
|
|||
```js |
|||
const routes: Routes = [ |
|||
{ |
|||
path: 'path', |
|||
component: YourComponent, |
|||
canActivate: [PermissionGuard], |
|||
data: { |
|||
routes: { |
|||
requiredPolicy: 'AbpIdentity.Roles.Create', |
|||
}, |
|||
}, |
|||
}, |
|||
]; |
|||
``` |
|||
|
|||
授予的策略存储在 `ConfigState` 的 `auth` 属性中. |
|||
|
|||
## 下一步是什么? |
|||
|
|||
* [Config State](./Config-State.md) |
|||
@ -0,0 +1,3 @@ |
|||
## 服务代理 |
|||
|
|||
TODO... |
|||
@ -0,0 +1,98 @@ |
|||
# 轻松实现TrackByFunction |
|||
|
|||
`TrackByService` 是一个实用服务,为Angular模板中最常见的需求之一: `TrackByFunction` 提供简单的实现. 在继续下面的内容之前,请参先阅 [Angular 文档](https://angular.io/guide/template-syntax#ngfor-with-trackby). |
|||
|
|||
## 入门 |
|||
|
|||
你不必在模块或组件级别提供 `TrackByService`,因为它已经在**根中提供了**. 你可以在组件中注入并开始使用它. 为了获得更好的类型支持,你可以将迭代项目的类型传递给它. |
|||
|
|||
```js |
|||
import { TrackByService } from '@abp/ng.core'; |
|||
|
|||
@Component({ |
|||
/* class metadata here */ |
|||
}) |
|||
class DemoComponent { |
|||
list: Item[]; |
|||
|
|||
constructor(public readonly track: TrackByService<Item>) {} |
|||
} |
|||
``` |
|||
|
|||
> 注意到 `track` 是 `public` 并且 `readonly` 了吗? 因为我们将看到一些在组件模板中直接使用 `TrackByService` 实例的方法示例. 可以把它看做反模式,但它有自身的优势,尤其是在利用组件继承时. 你始终可以使用公共组件属性. |
|||
|
|||
**成员也被导出做为独立的函数.** 如果你不想注入 `TrackByService`, 你可以直接在类中导入并使用这些函数. |
|||
|
|||
## 用法 |
|||
|
|||
有两种方法可用. |
|||
|
|||
1. 你可以直接注入 `TrackByService` 到你的组件并且使用它的成员. |
|||
2. 你可以在直接在组件属性上使用导出的函数. |
|||
|
|||
### 如何通过一个键跟踪项 |
|||
|
|||
你可以使用 `by` 获取一个 `TrackByFunction` , 该函数根据它的一个键来跟踪迭代的对象. 你可以将迭代类型传递给它获得类型支持. |
|||
|
|||
```html |
|||
<!-- template of DemoComponent --> |
|||
|
|||
<div *ngFor="let item of list; trackBy: track.by('id')">{%{{{ item.name }}}%}</div> |
|||
``` |
|||
|
|||
`by` 作为一个独立函数导出,命名为 `trackBy`. |
|||
|
|||
```js |
|||
import { trackBy } from "@abp/ng.core"; |
|||
|
|||
@Component({ |
|||
template: ` |
|||
<div |
|||
*ngFor="let item of list; trackBy: trackById" |
|||
> |
|||
{%{{{ item.name }}}%} |
|||
</div> |
|||
`, |
|||
}) |
|||
class DemoComponent { |
|||
list: Item[]; |
|||
|
|||
trackById = trackBy<Item>('id'); |
|||
} |
|||
``` |
|||
|
|||
### 如何通过深度嵌套的键进行跟踪 |
|||
|
|||
你可以使用 `byDeep` 获取一个 `TrackByFunction` , 它根据深度嵌套的键跟踪迭代对象. 你可以将迭代类型传递给它获得类型支持. |
|||
|
|||
|
|||
```html |
|||
<!-- template of DemoComponent --> |
|||
|
|||
<div |
|||
*ngFor="let item of list; trackBy: track.byDeep('tenant', 'account', 'id')" |
|||
> |
|||
{%{{{ item.tenant.name }}}%} |
|||
</div> |
|||
``` |
|||
|
|||
`byDeep` 作为一个独立函数导出,命名为 `trackByDeep`. |
|||
|
|||
```js |
|||
import { trackByDeep } from "@abp/ng.core"; |
|||
|
|||
@Component({ |
|||
template: ` |
|||
<div |
|||
*ngFor="let item of list; trackBy: trackByTenantAccountId" |
|||
> |
|||
{%{{{ item.name }}}%} |
|||
</div> |
|||
`, |
|||
}) |
|||
class DemoComponent { |
|||
list: Item[]; |
|||
|
|||
trackByTenantAccountId = trackByDeep<Item>('tenant', 'account', 'id'); |
|||
} |
|||
``` |
|||
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 171 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 218 KiB |
|
After Width: | Height: | Size: 181 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 357 KiB |
|
After Width: | Height: | Size: 424 KiB |
|
After Width: | Height: | Size: 401 KiB |
|
After Width: | Height: | Size: 336 KiB |
|
After Width: | Height: | Size: 389 KiB |
@ -0,0 +1,12 @@ |
|||
{ |
|||
"culture": "ru", |
|||
"texts": { |
|||
"GivenTenantIsNotAvailable": "Данный арендатор недоступен: {0}", |
|||
"Tenant": "Арендатор", |
|||
"Switch": "переключиться", |
|||
"Name": "Имя", |
|||
"SwitchTenantHint": "Оставьте поле Имя пустым, чтобы переключиться на администратора.", |
|||
"SwitchTenant": "Сменить арендатора", |
|||
"NotSelected": "Не выбрано" |
|||
} |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
using System.Collections.Generic; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Bundling; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Packages.Utils |
|||
{ |
|||
public class UtilsScriptContributor : BundleContributor |
|||
{ |
|||
public override void ConfigureBundle(BundleConfigurationContext context) |
|||
{ |
|||
context.Files.AddIfNotContains("/libs/abp/utils/abp-utils.umd.min.js"); |
|||
} |
|||
} |
|||
} |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue