diff --git a/docs/zh-Hans/Startup-Templates/Application.md b/docs/zh-Hans/Startup-Templates/Application.md index 78d43759db..4594327017 100644 --- a/docs/zh-Hans/Startup-Templates/Application.md +++ b/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)创建此模板的新解决方案并运行它.