UPD Application on https://docs.abp.io/en/abp/latest/Startup-Templates/Application

docs/zh-Hans/Startup-Templates/Application.md

@@ -270,6 +270,159 @@ ABP使用开源的[IdentityServer4](https://identityserver.io/)框架做应用
 
 `angular/src/environments` 文件夹下的文件含有应用程序的基础配置.
 
+#### AppModule（应用程序模块）
+
+`AppModule` 是应用程序的根模块。一些ABP模块和一些基本模块导入到 `AppModule` 中.
+
+ABP 配置模块也已经导入到 `AppModule` 中，以满足可延迟加载 ABP 模块的初始需求。
+
+#### AppRoutingModule（应用程序路由模块）
+
+在 `AppRoutingModule` 中有可延迟加载的 ABP 模块作为路由。
+
+> 不应更改ABP模块的路径。
+
+你应该在 `data` 对象中添加 `routes` 属性，以便在菜单中添加一个链接来重定向到自定义页面。
+
+```js
+{
+   path: 'dashboard',
+   loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
+   canActivate: [AuthGuard, PermissionGuard],
+   data: {
+      routes: {
+         name: 'ProjectName::Menu:Dashboard',
+         order: 2,
+         iconClass: 'fa fa-dashboard',
+         requiredPolicy: 'ProjectName.Dashboard.Host'
+      } as ABP.Route
+   }
+}
+```
+在上面的例子中;
+*  如果用户没有登录， AuthGuard 会阻塞访问并重定向到登录页面。
+*  PermissionGuard 使用 `rotues` 对象的 `requiredPolicy` 属性检查用户的权限。如果用户未被授权访问该页，则显示403页。
+*  `routes` 的 `name` 属性是菜单链接标签。可以定义本地化 key。
+*  `routes` 对象的 `iconClass` 属性是菜单链接图标类。
+*  `routes` 对象的 `requiredPolicy` 属性是访问页面所需的策略 key。
+
+在上述 `routes` 定义之后，如果用户被授权，仪表盘链接将出现在菜单上。
+
+#### Shared Module（共享模块）
+
+所有模块可能需要的模块已导入到 `SharedModule`. 你应该将 `SharedModule` 导入所有模块。
+
+参见 [Sharing Modules（共享模块）](https://angular.io/guide/sharing-ngmodules) 文档。
+
+#### Environments（环境）
+
+`src/environments` 文件夹下的文件包含应用程序的基本配置。
+
+#### Home Module
+
+Home模块是一个可延迟加载的模块，它加载应用程序的根地址。
+
+#### Styles（样式）
+
+在 `angular.json` 中向 `styles` 数组添加所需的样式文件。`AppComponent` 在主包加载后通过 `LazyLoadService` 加载一些样式文件，以缩短第一次绘制的时间。
+
+#### Testing（测试）
+
+您应该在与要测试的文件相同的文件夹中创建测试。
+
+参见[测试文档](https://angular.io/guide/testing/).
+
+#### Depended Packages（依赖包）
+
+* [NG Bootstrap](https://ng-bootstrap.github.io/) 被用作UI组件库。
+* [NGXS](https://www.ngxs.io/) 被用作状态管理库。
+* [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc) 用于支持OAuth 2和OpenId Connect (OIDC)。
+* [Chart.js](https://www.chartjs.org/) 用于创建小部件。
+* [ngx-validate](https://github.com/ng-turkey/ngx-validate) 用于对交互表单进行动态验证。
+
+### React Native
+
+解决方案将[React Native](https://reactnative.dev/)应用程序作为默认值包含在 `react-native` 文件夹中。
+
+服务器端类似于上面描述的解决方案。`*.HttpApi.Host` 的项目提供 API，所以 React 本机应用程序使用它。
+
+React 本机应用程序是用 [Expo](https://expo.io/)生成的。Expo 是一套基于 React Native 构建的工具，帮助你快速启动一个应用程序，尽管它有很多功能。
+
+React Native 应用文件夹结构，如下图所示：
+
+![react-native-folder-structure](../images/react-native-folder-structure.png)
+
+* `App.js` 是应用程序的引导组件。
+* `Environment.js` f文件有应用程序的基本配置。在这个文件中定义了 `prod` and `dev` 配置。
+* [Contexts](https://reactjs.org/docs/context.html) 是在 `src/contexts` 文件夹中创建的。
+* [Higher order components](https://reactjs.org/docs/higher-order-components.html) 是在 `src/hocs` 文件夹中创建的。
+* [Custom hooks](https://reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook) 是在 `src/hooks` 中创建的。
+* [Axios interceptors](https://github.com/axios/axios#interceptors) 是在 `src/interceptors` 文件夹中创建。
+* 工具函数从 `src/utils` 文件夹导出。
+
+#### Components（组件）
+
+可以在所有屏幕上使用的组件是在 `src/components` 文件夹中创建的。所有组件都是作为一个能够使用 [hooks](https://reactjs.org/docs/hooks-intro.html) 的函数创建的。
+
+#### Screens（屏幕）
+
+![react-native-navigation-structure](../images/react-native-navigation-structure.png)
+
+Screens 是通过在 `src/screens` 文件夹中创建将名称分开的文件夹来创建的。 某些 screens 的某些部分可以拆分为组件。
+
+每个 screen 都在 `src/navigators` 文件夹中的导航器中使用。
+
+#### Navigation（导航）
+
+[React Navigation](https://reactnavigation.org/) 被用作导航库。导航器是在 `src/navigators` 中创建的。一个 [drawer](https://reactnavigation.org/docs/drawer-based-navigation/) 导航器和几个 [stack](https://reactnavigation.org/docs/hello-react-navigation/#installing-the-stack-navigator-library) 导航器在此文件夹中创建。查看 [上图](#screens) 中的导航结构。
+
+#### State Management（状态管理）
+
+[Redux](https://redux.js.org/) 被用作状态管理库。[Redux Toolkit](https://redux-toolkit.js.org/) 库被用作高效Redux开发的工具集。
+
+在 `src/store` 文件夹中创建 Actions, reducers, sagas, selectors。存储文件夹如下：
+
+![react-native-store-folder](../images/react-native-store-folder.png)
+
+* [**Store**](https://redux.js.org/basics/store) 在 `src/store/index.js` 文件中定义。
+* [**Actions**](https://redux.js.org/basics/actions/) 是将数据从应用程序发送到存储的有效信息负载。
+* [**Reducers**](https://redux.js.org/basics/reducers) 指定应用程序的状态如何更改以响应发送到存储的操作。
+* [**Redux-Saga**](https://redux-saga.js.org/) 是一个库，旨在使应用程序的副作用(即异步的事情，如数据获取和不纯的事情，如访问浏览器缓存)更容易管理。Sagas 是在 `src/store/sagas` 文件夹中创建的。
+* [**Reselect**](https://github.com/reduxjs/reselect) 库用于创建缓存的选择器。选择器是在 `src/store/selectors` 文件夹中创建的。
+
+#### APIs
+
+[Axios](https://github.com/axios/axios) 用作HTTP客户端库。Axios 实例从 `src/api/API.js` 导出 。使用相同的配置进行HTTP调用。`src/api` 文件夹中还有为 API 调用创建的 API 文件。
+
+#### Theming（主题）
+
+[Native Base](https://nativebase.io/) 被用作UI组件库。本地基本组件可以很容易地进行自定义。参见 [Native Base customize](https://docs.nativebase.io/Customize.html#Customize) 文档。我们沿着同样的路走。
+
+* Native Base 主题变量在 `src/theme/variables` 文件夹中。
+* Native Base 组件样式在 `src/theme/components` 文件夹中。这些文件是用 Native Base's `ejectTheme` 脚本生成的。
+* 组件样式用 `src/theme/overrides` 文件夹下的文件覆盖。
+
+#### Testing（单元测试）
+
+将创建单元测试。
+
+参见[测试概述](https://reactjs.org/docs/testing.html)文档。
+
+#### Depended Libraries（依赖库）
+
+* [Native Base](https://nativebase.io/) 用作UI组件库。
+* [React Navigation](https://reactnavigation.org/) 用作导航库。
+* [Axios](https://github.com/axios/axios) 用作HTTP客户端库。
+* [Redux](https://redux.js.org/) 用作状态管理库。
+* [Redux Toolkit](https://redux-toolkit.js.org/) 库被用作高效Redux开发的工具集。
+* [Redux-Saga](https://redux-saga.js.org/) 用于管理异步进程。
+* [Redux Persist](https://github.com/rt2zz/redux-persist) 被用作状态持久化。
+* [Reselect](https://github.com/reduxjs/reselect) 用于创建缓存的选择器。
+* [i18n-js](https://github.com/fnando/i18n-js) 作为国际化库使用。
+* [expo-font](https://docs.expo.io/versions/latest/sdk/font/) 库可以轻松加载字体。
+* [Formik](https://github.com/jaredpalmer/formik) 用于构建表单。
+* [Yup](https://github.com/jquense/yup) 用于表单验证。
+
 ## 下一步是什么?
 
 * 参阅[ASP.NET Core MVC 模板入门](../Getting-Started-AspNetCore-MVC-Template.md)创建此模板的新解决方案并运行它.