Browse Source

docs update

pull/24196/head
erdemcaygor 2 months ago
parent
commit
0b15e5c3db
  1. 2
      docs/en/contribution/angular-ui.md
  2. 2
      docs/en/framework/ui/angular/data-table-column-extensions.md
  3. 2
      docs/en/framework/ui/angular/dynamic-form-extensions.md
  4. 2
      docs/en/framework/ui/angular/entity-action-extensions.md
  5. 2
      docs/en/framework/ui/angular/form-validation.md
  6. 4
      docs/en/framework/ui/angular/http-requests.md
  7. 2
      docs/en/framework/ui/angular/list-service.md
  8. 4
      docs/en/framework/ui/angular/localization.md
  9. 2
      docs/en/framework/ui/angular/page-toolbar-extensions.md
  10. 2
      docs/en/framework/ui/angular/router-events.md
  11. 2
      docs/en/framework/ui/angular/service-proxies.md
  12. 2
      docs/en/framework/ui/angular/subscription-service.md
  13. 2
      docs/en/framework/ui/angular/testing.md
  14. 4
      docs/en/framework/ui/angular/theming.md
  15. 2
      docs/en/framework/ui/angular/track-by-service.md
  16. 2
      docs/en/release-info/migration-guides/abp-5-0-angular.md
  17. 2
      docs/en/solution-templates/layered-web-application/web-applications.md
  18. 2
      docs/en/suite/editing-templates.md
  19. 2
      docs/en/suite/generating-crud-page.md
  20. 2
      docs/en/suite/solution-structure.md
  21. 4
      docs/en/tutorials/book-store/part-03.md

2
docs/en/contribution/angular-ui.md

@ -12,7 +12,7 @@
- Dotnet core SDK https://dotnet.microsoft.com/en-us/download
- Nodejs LTS https://nodejs.org/en/
- Docker https://docs.docker.com/engine/install
- Angular CLI. https://angular.io/guide/what-is-angular#angular-cli
- Angular CLI. https://angular.dev/tools/cli
- Abp CLI https://docs.abp.io/en/abp/latest/cli
- A code editor

2
docs/en/framework/ui/angular/data-table-column-extensions.md

@ -171,7 +171,7 @@ It has the following properties:
- **index** is the table index where the record is at.
- **getInjected** is the equivalent of [Injector.get](https://angular.io/api/core/Injector#get). You can use it to reach injected dependencies of `ExtensibleTableComponent`, including, but not limited to, its parent component.
- **getInjected** is the equivalent of [Injector.get](https://angular.dev/api/core/Injector). You can use it to reach injected dependencies of `ExtensibleTableComponent`, including, but not limited to, its parent component.
```js
{

2
docs/en/framework/ui/angular/dynamic-form-extensions.md

@ -107,7 +107,7 @@ Extra properties defined on an existing entity will be included in the create an
It has the following properties:
- **getInjected** is the equivalent of [Injector.get](https://angular.io/api/core/Injector#get). You can use it to reach injected dependencies of `ExtensibleFormPropComponent`, including, but not limited to, its parent components.
- **getInjected** is the equivalent of [Injector.get](https://angular.dev/api/core/Injector). You can use it to reach injected dependencies of `ExtensibleFormPropComponent`, including, but not limited to, its parent components.
```js
{

2
docs/en/framework/ui/angular/entity-action-extensions.md

@ -272,7 +272,7 @@ It has the following properties:
- **index** is the table index where the record is at.
- **getInjected** is the equivalent of [Injector.get](https://angular.io/api/core/Injector#get). You can use it to reach injected dependencies of `GridActionsComponent`, including, but not limited to, its parent component.
- **getInjected** is the equivalent of [Injector.get](https://angular.dev/api/core/Injector). You can use it to reach injected dependencies of `GridActionsComponent`, including, but not limited to, its parent component.
```js
{

2
docs/en/framework/ui/angular/form-validation.md

@ -52,7 +52,7 @@ export const appConfig: ApplicationConfig = {
};
```
When a [validator](https://angular.io/guide/form-validation#defining-custom-validators) or an [async validator](https://angular.io/guide/form-validation#creating-asynchronous-validators) returns an error with the key given to the error blueprints (`uniqueUsername` here), the validation library will be able to display an error message after localizing according to the given key and interpolation params. The result will look like this:
When a [validator](https://angular.dev/guide/forms/form-validation) or an [async validator](https://angular.dev/guide/forms/form-validation) returns an error with the key given to the error blueprints (`uniqueUsername` here), the validation library will be able to display an error message after localizing according to the given key and interpolation params. The result will look like this:
<img alt="An already taken username is entered while creating new user and a custom error message appears under the input after validation." src="./images/form-validation---new-error-message.gif" width="990px" style="max-width:100%">

4
docs/en/framework/ui/angular/http-requests.md

@ -9,7 +9,7 @@
## About HttpClient
Angular has the amazing [HttpClient](https://angular.io/guide/http) for communication with backend services. It is a layer on top and a simplified representation of [XMLHttpRequest Web API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest). It also is the recommended agent by Angular for any HTTP request. There is nothing wrong with using the `HttpClient` in your ABP project.
Angular has the amazing [HttpClient](https://angular.dev/guide/http/making-requests) for communication with backend services. It is a layer on top and a simplified representation of [XMLHttpRequest Web API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest). It also is the recommended agent by Angular for any HTTP request. There is nothing wrong with using the `HttpClient` in your ABP project.
However, `HttpClient` leaves error handling to the caller (method). In other words, HTTP errors are handled manually and by hooking into the observer of the `Observable` returned.
@ -93,7 +93,7 @@ postFoo(body: Foo) {
}
```
You may [check here](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/rest.ts#L23) for complete `Rest.Request<T>` type, which has only a few changes compared to [HttpRequest](https://angular.io/api/common/http/HttpRequest) class in Angular.
You may [check here](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/rest.ts#L23) for complete `Rest.Request<T>` type, which has only a few changes compared to [HttpRequest](https://angular.dev/api/common/http/HttpRequest) class in Angular.
### How to Disable Default Error Handler of RestService

2
docs/en/framework/ui/angular/list-service.md

@ -126,7 +126,7 @@ Then you can place inputs to the HTML:
## Usage with Observables
You may use observables in combination with [AsyncPipe](https://angular.io/guide/observables-in-angular#async-pipe) of Angular instead. Here are some possibilities:
You may use observables in combination with [AsyncPipe](https://angular.dev/ecosystem/rxjs-interop) of Angular instead. Here are some possibilities:
```js
book$ = this.list.hookToQuery(query => this.bookService.getListByInput(query));

4
docs/en/framework/ui/angular/localization.md

@ -220,7 +220,7 @@ As of v2.9 ABP supports RTL. If you are generating a new project with v2.9 and a
### Step 1. Create Chunks for Bootstrap LTR and RTL
Find [styles configuration in angular.json](https://angular.io/guide/workspace-config#style-script-config) and make sure the chunks in your project has `bootstrap-rtl.min` and `bootstrap-ltr.min` as shown below.
Find [styles configuration in angular.json](https://angular.dev/reference/configs/workspace-config) and make sure the chunks in your project has `bootstrap-rtl.min` and `bootstrap-ltr.min` as shown below.
```json
{
@ -279,7 +279,7 @@ export class AppComponent {}
## Registering a New Locale
Since ABP has more than one language, Angular locale files load lazily using [Webpack's import function](https://webpack.js.org/api/module-methods/#import-1) to avoid increasing the bundle size and to register the Angular core using the [`registerLocaleData`](https://angular.io/api/common/registerLocaleData) function. The chunks to be included in the bundle are specified by the [Webpack's magic comments](https://webpack.js.org/api/module-methods/#magic-comments) as hard-coded. Therefore a `registerLocale` function that returns Webpack `import` function must be passed to `provideAbpCore(withOptions({...}))`.
Since ABP has more than one language, Angular locale files load lazily using [Webpack's import function](https://webpack.js.org/api/module-methods/#import-1) to avoid increasing the bundle size and to register the Angular core using the [`registerLocaleData`](https://angular.dev/api/common/registerLocaleData) function. The chunks to be included in the bundle are specified by the [Webpack's magic comments](https://webpack.js.org/api/module-methods/#magic-comments) as hard-coded. Therefore a `registerLocale` function that returns Webpack `import` function must be passed to `provideAbpCore(withOptions({...}))`.
### registerLocaleFn

2
docs/en/framework/ui/angular/page-toolbar-extensions.md

@ -215,7 +215,7 @@ It has the following properties:
}
```
- **getInjected** is the equivalent of [Injector.get](https://angular.io/api/core/Injector#get). You can use it to reach injected dependencies of `PageToolbarComponent`, including, but not limited to, its parent component.
- **getInjected** is the equivalent of [Injector.get](https://angular.dev/api/core/Injector). You can use it to reach injected dependencies of `PageToolbarComponent`, including, but not limited to, its parent component.
```js
{

2
docs/en/framework/ui/angular/router-events.md

@ -7,7 +7,7 @@
# 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.
`RouterEvents` is a utility service for filtering specific router events and reacting to them. Please see [this page in Angular docs](https://angular.dev/api/router/Event) for available router events.
## Benefit

2
docs/en/framework/ui/angular/service-proxies.md

@ -114,7 +114,7 @@ export class BookComponent implements OnInit {
}
```
The Angular compiler removes the services that have not been injected anywhere from the final output. See the [tree-shakable providers documentation](https://angular.io/guide/dependency-injection-providers#tree-shakable-providers).
The Angular compiler removes the services that have not been injected anywhere from the final output. See the [tree-shakable providers documentation](https://angular.dev/guide/di/defining-dependency-providers).
### Models

2
docs/en/framework/ui/angular/subscription-service.md

@ -7,7 +7,7 @@
# Managing RxJS Subscriptions
`SubscriptionService` is a utility service to provide an easy unsubscription from RxJS observables in Angular components and directives. Please see [why you should unsubscribe from observables on instance destruction](https://angular.io/guide/lifecycle-hooks#cleaning-up-on-instance-destruction).
`SubscriptionService` is a utility service to provide an easy unsubscription from RxJS observables in Angular components and directives. Please see [why you should unsubscribe from observables on instance destruction](https://angular.dev/guide/components/lifecycle).
## Getting Started

2
docs/en/framework/ui/angular/testing.md

@ -7,7 +7,7 @@
# Unit Testing Angular UI
ABP Angular UI is tested like any other Angular application. So, [the guide here](https://angular.io/guide/testing) applies to ABP too. That said, we would like to point out some **unit testing topics specific to ABP Angular applications**.
ABP Angular UI is tested like any other Angular application. So, [the guide here](https://angular.dev/guide/testing) applies to ABP too. That said, we would like to point out some **unit testing topics specific to ABP Angular applications**.
## Setup

4
docs/en/framework/ui/angular/theming.md

@ -81,8 +81,8 @@ You can run the following command in **Angular** project directory to copy the s
### Global/Component Styles
Angular can bundle global style files and component styles with components.
See the [component styles](https://angular.io/guide/component-styles) guide on Angular documentation for more information.
Angular can bundle global style files and component styles with components.
See the [component styles](https://angular.dev/guide/components/styling) guide on Angular documentation for more information.
### Layout Parts

2
docs/en/framework/ui/angular/track-by-service.md

@ -7,7 +7,7 @@
# Easy *ngFor trackBy
`TrackByService` is a utility service to provide an easy implementation for one of the most frequent needs in Angular templates: `TrackByFunction`. Please see [this page in Angular docs](https://angular.io/guide/template-syntax#ngfor-with-trackby) for its purpose.
`TrackByService` is a utility service to provide an easy implementation for one of the most frequent needs in Angular templates: `TrackByFunction`. Please see [this page in Angular docs](https://angular.dev/guide/templates/control-flow) for its purpose.

2
docs/en/release-info/migration-guides/abp-5-0-angular.md

@ -104,7 +104,7 @@ If you don't want to use the NGXS, you should remove all NGXS related imports, i
## @angular/localize package
[`@angular/localize`](https://angular.io/api/localize) dependency has been removed from `@abp/ng.core` package. The package must be installed in your app. Run the following command to install:
[`@angular/localize`](https://angular.dev/guide/i18n/add-package) dependency has been removed from `@abp/ng.core` package. The package must be installed in your app. Run the following command to install:
```bash
npm install @angular/localize@12

2
docs/en/solution-templates/layered-web-application/web-applications.md

@ -120,7 +120,7 @@ The required style files are added to the `styles` array in `angular.json`. `App
You should create your tests in the same folder as the file you want to test.
See the [testing document](https://angular.io/guide/testing).
See the [testing document](https://angular.dev/guide/testing).
### Depended Packages

2
docs/en/suite/editing-templates.md

@ -27,7 +27,7 @@ There's a search box on the templates page. To find the related template, pick a
There's a naming convention for the template files.
* If the template name has `Server` prefix, it's used for backend code like repositories, application services, localizations, controllers, permissions, mappings, unit tests.
* If the template name has `Frontend.Angular` prefix, it's used for Angular code generation. The Angular code is being generated via [Angular Schematics](https://angular.io/guide/schematics).
* If the template name has `Frontend.Angular` prefix, it's used for Angular code generation. The Angular code is being generated via [Angular Schematics](https://angular.dev/tools/cli/schematics).
* If the template name has `Frontend.Mvc` prefix, it's used for razor pages, menus, JavaScript, CSS files.
* If the template name has `Frontend.Blazor` prefix, it's used for razor components.

2
docs/en/suite/generating-crud-page.md

@ -294,7 +294,7 @@ There are some adjustments you may need to make before generating CRUD pages for
- Check if your environment variables have `rootNamespace` defined as explained [here](../framework/ui/angular/service-proxies.md#angular-project-configuration).
- Check if your [workspace configuration](https://angular.io/guide/workspace-config) satisfies one of the following. Examples assume your solution namespace is `BookStore`, `Acme.BookStore`, or `Acme.Retail.BookStore`.
- Check if your [workspace configuration](https://angular.dev/reference/configs/workspace-config) satisfies one of the following. Examples assume your solution namespace is `BookStore`, `Acme.BookStore`, or `Acme.Retail.BookStore`.
- Project key is in pascal case. E.g. `BookStore`.
- Project key is in camel case. E.g. `bookStore`.
- Project key is in kebab case. E.g. `book-store`.

2
docs/en/suite/solution-structure.md

@ -303,7 +303,7 @@ Lepton theme uses two logos for each style. You can change these logos with your
You should create your tests in the same folder as the file file you want to test.
See the [testing document](https://angular.io/guide/testing).
See the [testing document](https://angular.dev/guide/testing).
### Depended Packages

4
docs/en/tutorials/book-store/part-03.md

@ -670,7 +670,7 @@ You can open your browser and click the **New book** button to see the new modal
### Create a Reactive Form
[Reactive forms](https://angular.io/guide/reactive-forms) provide a model-driven approach to handling form inputs whose values change over time.
[Reactive forms](https://angular.dev/guide/forms/reactive-forms) provide a model-driven approach to handling form inputs whose values change over time.
Open `/src/app/book/book.component.ts` and replace the content as below:
@ -742,7 +742,7 @@ export class BookComponent implements OnInit {
* Imported `FormGroup`, `FormBuilder` and `Validators` from `@angular/forms`.
* Added a `form: FormGroup` property.
* Added a `bookTypes` property as a list of `BookType` enum members. That will be used in form options.
* Injected with the `FormBuilder` inject function.. [FormBuilder](https://angular.io/api/forms/FormBuilder) provides convenient methods for generating form controls. It reduces the amount of boilerplate needed to build complex forms.
* Injected with the `FormBuilder` inject function.. [FormBuilder](https://angular.dev/api/forms/FormBuilder) provides convenient methods for generating form controls. It reduces the amount of boilerplate needed to build complex forms.
* Added a `buildForm` method to the end of the file and executed the `buildForm()` in the `createBook` method.
* Added a `save` method.

Loading…
Cancel
Save