|
1 | | -<!-- default badges list --> |
2 | | - |
3 | | -[](https://supportcenter.devexpress.com/ticket/details/T972310) |
4 | | -[](https://docs.devexpress.com/GeneralInformation/403183) |
5 | | -<!-- default badges end --> |
6 | | -# Dashboard for Angular - Localization |
7 | | - |
8 | | -The example shows how to localize the Dashboard component in an Angular application: |
9 | | - |
10 | | -- Translate UI element captions to a different language: dialog boxes, buttons, menu items, error messages, etc. |
11 | | -- Format numbers, dates, and currencies according to specific culture settings. |
12 | | - |
13 | | - |
14 | | - |
15 | | -## Example Structure |
16 | | - |
17 | | -The example has the following structure: |
18 | | - |
19 | | -- The [asp-net-core-server](asp-net-core-server) folder contains the backend project built with ASP.NET Core 3.1. |
20 | | -- The [dashboard-angular-app](dashboard-angular-app) folder contains the client application built with Angular. |
21 | | - |
22 | | -### Client Localization |
23 | | -<!-- default file list --> |
24 | | -*Files to look at*: |
25 | | - |
26 | | -* [app.component.ts](./dashboard-angular-app/src/app/app.component.ts) |
27 | | - |
28 | | -<!-- default file list end --> |
29 | | - |
30 | | -The **dashboard-angular-app** project shows how to localize a client application with the [component-specific JSON files](https://docs.devexpress.com/Dashboard/402538/web-dashboard/dashboard-component-for-angular/localization#localize-ui) for the German market (the `de` culture). Intl is used to format dates, numbers, and currencies. |
31 | | - |
32 | | -### Server Localization |
33 | | -<!-- default file list --> |
34 | | -*Files to look at*: |
35 | | - |
36 | | -* [Startup.cs](./asp-net-core-server/Startup.cs#L45) |
37 | | - |
38 | | -<!-- default file list end --> |
39 | | - |
40 | | -Since the Web Dashboard exports data on the server side, you need to localize the server to complete the localization process. The **asp-net-core-server** project contains satellite resource assemblies for the German culture. |
41 | | - |
42 | | - |
43 | | -## Quick Start |
44 | | - |
45 | | -In the **asp-net-core-server** folder run the following command: |
46 | | - |
47 | | -``` |
48 | | -dotnet run |
49 | | -``` |
50 | | - |
51 | | -The server starts at `http://localhost:5000` and the client gets data from `http://localhost:5000/api/dashboard`. To debug the server, run the **asp-net-core-server** application in Visual Studio and change the client's `endpoint` property according to the listening port: `https://localhost:44337/api/dashboard`. |
52 | | - |
53 | | -See the following section for information on how to install NuGet packages from the DevExpress NuGet feed: [Install DevExpress Controls Using NuGet Packages](https://docs.devexpress.com/GeneralInformation/115912/installation/install-devexpress-controls-using-nuget-packages). |
54 | | - |
55 | | -> This server allows CORS requests from _all_ origins with _any_ scheme (http or https). This default configuration is insecure: any website can make cross-origin requests to the app. We recommend that you specify the client application's URL to prohibit other clients from accessing sensitive information stored on the server. Learn more: [Cross-Origin Resource Sharing (CORS)](https://docs.devexpress.com/Dashboard/400709) |
56 | | -
|
57 | | -In the **dashboard-angular-app** folder, run the following commands: |
58 | | - |
59 | | -``` |
60 | | -npm install |
61 | | -npm start |
62 | | -``` |
63 | | - |
64 | | -Open ```http://localhost:4200/``` in your browser to see the result. |
65 | | - |
66 | | -## Documentation |
67 | | - |
68 | | -- [Localize Dashboard Component for Angular](https://docs.devexpress.com/Dashboard/402538/web-dashboard/dashboard-component-for-angular/localization) |
69 | | -- [Install DevExpress Controls Using NuGet Packages](https://docs.devexpress.com/GeneralInformation/115912/installation/install-devexpress-controls-using-nuget-packages) |
70 | | - |
71 | | - |
72 | | -## More Examples |
73 | | - |
74 | | -- [Dashboard for React - Localization](https://github.com/DevExpress-Examples/react-dashboard-localization) |
75 | | -- [Dashboard for Vue - Localization](https://github.com/DevExpress-Examples/vue-dashboard-localization) |
76 | | -- [Dashboard Control for JavaScript Applications - Localization](https://github.com/DevExpress-Examples/javascript-dashboard-localization) |
77 | | - |
78 | | -- [ASP.NET Core Dashboard Control - Localization](https://github.com/DevExpress-Examples/asp-net-core-dashboard-localization) |
79 | | -- [ASP.NET MVC Dashboard Extension- Localization](https://github.com/DevExpress-Examples/asp-net-mvc-dashboard-localization) |
80 | | -- [ASP.NET Web Forms Dashboard Control - Localization](https://github.com/DevExpress-Examples/asp-net-web-forms-dashboard-localization) |
| 1 | +<!-- default badges list --> |
| 2 | + |
| 3 | +[](https://supportcenter.devexpress.com/ticket/details/T972310) |
| 4 | +[](https://docs.devexpress.com/GeneralInformation/403183) |
| 5 | +<!-- default badges end --> |
| 6 | +# Dashboard for Angular - Localization |
| 7 | + |
| 8 | +The example shows how to localize the Dashboard component in an Angular application: |
| 9 | + |
| 10 | +- Translate UI element captions to a different language: dialog boxes, buttons, menu items, error messages, etc. |
| 11 | +- Format numbers, dates, and currencies according to specific culture settings. |
| 12 | + |
| 13 | + |
| 14 | + |
| 15 | +## Example Structure |
| 16 | + |
| 17 | +The example has the following structure: |
| 18 | + |
| 19 | +- The [asp-net-core-server](asp-net-core-server) folder contains the backend project built with ASP.NET Core 3.1. |
| 20 | +- The [dashboard-angular-app](dashboard-angular-app) folder contains the client application built with Angular. |
| 21 | + |
| 22 | +### Client Localization |
| 23 | +<!-- default file list --> |
| 24 | +*Files to look at*: |
| 25 | + |
| 26 | +* [app.component.ts](./dashboard-angular-app/src/app/app.component.ts) |
| 27 | + |
| 28 | +<!-- default file list end --> |
| 29 | + |
| 30 | +The **dashboard-angular-app** project shows how to localize a client application with the [component-specific JSON files](https://docs.devexpress.com/Dashboard/402538/web-dashboard/dashboard-component-for-angular/localization#localize-ui) for the German market (the `de` culture). Intl is used to format dates, numbers, and currencies. |
| 31 | + |
| 32 | +### Server Localization |
| 33 | +<!-- default file list --> |
| 34 | +*Files to look at*: |
| 35 | + |
| 36 | +* [Startup.cs](./asp-net-core-server/Startup.cs#L45) |
| 37 | + |
| 38 | +<!-- default file list end --> |
| 39 | + |
| 40 | +Since the Web Dashboard exports data on the server side, you need to localize the server to complete the localization process. The **asp-net-core-server** project contains satellite resource assemblies for the German culture. |
| 41 | + |
| 42 | + |
| 43 | +## Quick Start |
| 44 | + |
| 45 | +In the **asp-net-core-server** folder run the following command: |
| 46 | + |
| 47 | +``` |
| 48 | +dotnet run |
| 49 | +``` |
| 50 | + |
| 51 | +The server starts at `http://localhost:5000` and the client gets data from `http://localhost:5000/api/dashboard`. To debug the server, run the **asp-net-core-server** application in Visual Studio and change the client's `endpoint` property according to the listening port: `https://localhost:44337/api/dashboard`. |
| 52 | + |
| 53 | +See the following section for information on how to install NuGet packages from the DevExpress NuGet feed: [Install DevExpress Controls Using NuGet Packages](https://docs.devexpress.com/GeneralInformation/115912/installation/install-devexpress-controls-using-nuget-packages). |
| 54 | + |
| 55 | +> This server allows CORS requests from _all_ origins with _any_ scheme (http or https). This default configuration is insecure: any website can make cross-origin requests to the app. We recommend that you specify the client application's URL to prohibit other clients from accessing sensitive information stored on the server. Learn more: [Cross-Origin Resource Sharing (CORS)](https://docs.devexpress.com/Dashboard/400709) |
| 56 | +
|
| 57 | +In the **dashboard-angular-app** folder, run the following commands: |
| 58 | + |
| 59 | +``` |
| 60 | +npm install |
| 61 | +npm start |
| 62 | +``` |
| 63 | + |
| 64 | +Open ```http://localhost:4200/``` in your browser to see the result. |
| 65 | + |
| 66 | +## Documentation |
| 67 | + |
| 68 | +- [Localize Dashboard Component for Angular](https://docs.devexpress.com/Dashboard/402538/web-dashboard/dashboard-component-for-angular/localization) |
| 69 | +- [Install DevExpress Controls Using NuGet Packages](https://docs.devexpress.com/GeneralInformation/115912/installation/install-devexpress-controls-using-nuget-packages) |
| 70 | + |
| 71 | + |
| 72 | +## More Examples |
| 73 | + |
| 74 | +- [Dashboard for React - Localization](https://github.com/DevExpress-Examples/react-dashboard-localization) |
| 75 | +- [Dashboard for Vue - Localization](https://github.com/DevExpress-Examples/vue-dashboard-localization) |
| 76 | +- [Dashboard Control for JavaScript Applications - Localization](https://github.com/DevExpress-Examples/javascript-dashboard-localization) |
| 77 | + |
| 78 | +- [ASP.NET Core Dashboard Control - Localization](https://github.com/DevExpress-Examples/asp-net-core-dashboard-localization) |
| 79 | +- [ASP.NET MVC Dashboard Extension- Localization](https://github.com/DevExpress-Examples/asp-net-mvc-dashboard-localization) |
| 80 | +- [ASP.NET Web Forms Dashboard Control - Localization](https://github.com/DevExpress-Examples/asp-net-web-forms-dashboard-localization) |
0 commit comments