[译]企业应用程序(Angular2和WebApi)的单页应用程序(SPA)-第2部分-添加新权限
By robot-v1.0
本文链接 https://www.kyfws.com/applications/single-page-application-spa-for-enterprise-app-a-zh/
版权声明 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
- 7 分钟阅读 - 3452 个词 阅读量 0[译]企业应用程序(Angular2和WebApi)的单页应用程序(SPA)-第2部分-添加新权限
原文地址:https://www.codeproject.com/Articles/1144122/Single-Page-Application-SPA-for-Enterprise-App-A
原文作者:tranthanhtu.vn
译文由本站 robot-v1.0 翻译
前言
In this article, we will learn how to create/edit Role
在本文中,我们将学习如何创建/编辑角色
系列中的其他文章(Other Articles in the Series)
- 总览(Overview)
- 项目结构(Project structure)
- 多国语言(i18n)(Multi-Languages (i18n))
- DI&IoC-为什么和为什么不?(DI & IoC - Why and Why not?)
- RESTful和Web Api(RESTful & WebApi)
- 管理应用程序生命周期(Manage Application Lifecycle)
- 构建和部署应用程序(Build & Deploy Application)
- 带有Angular 2的TinyERP的新版本(打字稿)(New version of TinyERP with Angular 2 (typescript))
- CQRS:避免企业应用程序中的性能问题(第1部分)(CQRS: Avoiding performance issues in enterprise app (part 1))
- 多个数据存储:扩展存储库(第1部分)(Multiple data-stores: Scale your repository (Part 1))
- 多个数据存储:扩展存储库(第2部分)(Multiple data-stores: Scale your repository (Part 2))
- 使用OWIN的基本身份验证(用户名/密码)(Basic authentication (user name/ password) with OWIN)
介绍(Introduction)
我想与您分享的第一件事是"我们不学习技术,我们学习如何将技术用于我们的业务".(The first thing I would like to share with you is “We do not learn technologies, we learn how to use technologies for our business”.)
注意:在此代码中,我们使用Angular 2的Release Candidate版本(Note: In this code, we use Relase Candidate version of Angular 2)
在这一部分中,我们将通过步骤列表来了解如何使用我的代码来实现添加角色页面,如下图所示:(In this part, we will to through the list of steps to know how to use my code for implementing the add Role page as photo below:)
如何获取代码(How to Get the Code)
在以下位置签出代码(Checkout the code at) https://github.com/techcoaching/TinyERP.git(https://github.com/techcoaching/TinyERP.git) .(.)
分析页面(Analyze the Page)
作为习惯,我在实施之前先分析页面,这将有助于我们:(As a matter of habit, I analyze the page before implementing, this will help us:)
- 列出完成页面所需的步骤.(List out the steps we need to do to complete the page.)
- 找出丢失的信息,以便我们可以立即寻求帮助.(Figure out the missing information, so we can ask for help immediately.)
- 考虑一下从客户端到服务器端,从UI到存储库的逻辑流.因此,编写的代码会更好.为此,我的许多同事都尝试先编写代码,然后再调试.当出现问题时,它会改变我们的行为,我们尝试更改代码以使其正常工作.这可能会破坏逻辑流程,并且代码不遵循约定.该应用程序中使用了该体系结构.这将在将来引发一些新的潜在问题,并且代码难以维护.(Think about the flow of logic from the client to server side, from UI to repository. So the written code will be nicer. For this, many of my co-workers try to write the code first, and debug it later. When something goes wrong, it changes our behavior, and we try to change the code to make it work. This may break the logic flow and the code does not follow the convention. The architecture was used in the app. This will raise some new potential issues in the future and the code is hard for maintenance.) 在分析页面之后,我们找出需要完成的事情的列表,如下所示:(After analyzing the page, we figure out the list of things that need to be completed as below:)
在客户上(On Client)
- 注册"添加角色"页面的路线(angular2中的组件)(Register route for “Add Role” page (Component in angular2))
- 创建组件文件(用于UI的html文件,用于逻辑处理的ts文件和用于该组件的视图模型的ts).(Create component files (html file for UI, ts file for logic handling and ts for view model of that component).)
- 实施"添加角色"组件的用户界面(Implement the UI of “Add Role” component)
- 实现"添加角色"组件的逻辑.(Implement logic of “Add Role” component.)
- 为该页面实施服务(服务将调用REST API,以在服务器上创建/更新数据).(Implement service for this page (service will make the call to REST API for creating/ updating data on server).)
在API上(On API)
- 将新方法添加到(Add new method into)
RolesController
用于处理与以下内容有关的创建请求(for handling create request related to)Role
- 将新方法添加到(Add new method into)
Role
服务和(service and)Role
用于创建的存储库(repository for creating)Role
实施客户(Implement the Client)
在这个部分,(In this section,)**<根>()**folder是客户代码的文件夹("(folder is the folder of client code (the path to “)客户(client)“文件夹).(” folder).)
- 为"添加角色"页面注册路由(angular2中的组件):(Register route for “Add Role” page (Component in angular2):)去 “(Go to “)**/app/模块/安全性/共享/配置(/app/modules/secutiry/_share/config)**并更新(” and update)
addRoutes
方法:(method to:)
内容(The content of)**route.ts(route.ts)**将会:(will be:)
-
创建组件文件(用于UI的HTML文件,用于逻辑处理的ts文件和用于该组件的视图模型的ts).(Create component files (HTML file for UI, ts file for logic handling and ts for view model of that component).)
-
实施"添加或编辑角色"组件的用户界面:(Implement the UI of “Add or Edit Role” component:)输出到浏览器的照片如下:(The output to browser as photo below:)
在此文件中:(In this file:)
- 我们没有使用传统的HTML来创建表单的UI,为此有许多指令,例如:(*We did not use traditional HTML for creating the UI of the form, there are a number of directives for this purpose, such as:*) `form` ,(*,*) `form-textarea` ,....(*, ....*)
- 该页面的结构为:(*The page was structured as:*)
- `page-header` :这包含页面的标题文本(*: This contains the header text of the page*)
- `page-content` :这是页面的主要内容区域(*: This is the main content region of the page*)
-
实现"添加角色"组件的逻辑.(Implement logic of “Add Role” component.)在此文件中,我们:(In this file, we:)
- 通过以下方式获取所选角色的ID(Get the id of selected role by)
routeParams.get("id")
- 在页面之间使用导航(Navigate between page using)
router.navigate
方法(method)
- 通过以下方式获取所选角色的ID(Get the id of selected role by)
-
为该页面实施服务(服务将调用REST API,以在服务器上创建数据).(Implement service for this page (service will make the call to REST API for creating data on server).)
实施API(Implement API)
-
将新方法添加到(Add new method into)
RolesController
用于处理与以下内容有关的创建请求(for handling create request related to)Role
.(.) -
将新方法添加到(Add new method into)
IRoleService
和(and)RoleService
用于创建(for creating)Role
.(.)-
IRoleService.cs(IRoleService.cs)
-
RoleService.cs(RoleService.cs) 在(In)
Role
服务:(service:) -
用户创建新(User creates new)
Role
呼唤(calling)Create
的方法(method of)Role
资料库.(repository.) -
在里面(In the)
UnitOfWork
,我们明确指定我们要用于此模式(, we specify explicitly the mode we want to use for this)UnitOfWork
.这样可以避免将意外更改保存到数据库.(. This avoids unexpected change from being saved to database.) -
“(")
security.addOrUpdateRole.validation.nameIsRequire
“,这将根据当前语言在客户端上解决,并将错误显示为每个表单组件上的工具提示.在我的代码中,服务应仅将错误的键返回给客户端,客户端将以适当的语言显示.(”, this will be resolved on client base on current language and display the error as the tooltip on each form component. In my code, the service should only return client the key of error, and client will display in appropriated language itself.)
-
-
IRoleRepository
和(and)RoleRepository
用于创建(for creating)Role
.(.)我们不需要更改此存储库,因为它继承了适当的方法(We do not need to change this repository as it inherited appropriate method from)IBaseContentRepository
和(and)BaseContentRepository
.(.)
有关Angular2的更多信息,请查看”(For more information about Angular2, Please have a look at “) Angular2-概述(Angular2 - Overview) “.(”.)
概要(Summary)
到目前为止,我们可以创建新的(Until this point, we can create new) Role
使用代码.(using the code.)
有关更多信息:(For more information about:)
-
Angular2,用于:(Angular2, For:)
-
有关Angular的概述,请访问(An overview about Angular, please visit) https://www.codeproject.com/Articles/1164843/Angular-Overview(https://www.codeproject.com/Articles/1164843/Angular-Overview)
-
在Angular中进行路由,请访问(Routing in Angular, please visit) https://www.codeproject.com/Articles/1164813/Angular-Routing(https://www.codeproject.com/Articles/1164813/Angular-Routing)
-
Angular中的组件,请访问(Component in Angular, please visit) https://www.codeproject.com/Articles/1166112/Angular-Component(https://www.codeproject.com/Articles/1166112/Angular-Component)
-
在Angular中绑定,请访问(Binding in Angular, please visit) https://www.codeproject.com/Articles/1166418/Angular-Binding(https://www.codeproject.com/Articles/1166418/Angular-Binding)
-
Angular指令,请访问(Directive in Angular, Please visit)
-
-
休息:(REST:)
- 有关概述的概念,请访问(For overview concept, please visit) https://www.codeproject.com/Articles/1164842/REST-概述(https://www.codeproject.com/Articles/1164842/REST-Overview)
- 要在Web API(C#)中使用REST,请访问(For using REST in WebAPI (C#), please visit) https://www.codeproject.com/Articles/1168872/REST-in-WebApi(https://www.codeproject.com/Articles/1168872/REST-in-WebApi)
许可
本文以及所有相关的源代码和文件均已获得The Code Project Open License (CPOL)的许可。
Javascript XML C# .NET SQL-Server Visual-Studio ASP.NET Dev Design Architect 新闻 翻译