前言
本文是翻譯文章，如有翻譯不正確的地方請指正。
其中內容大部分是官方原文，加上自己根據操作實現的心得。
官方 原文https://aspnetboilerplate.com/Pages/Documents/Zero/Startup-Template-Angular#source-code
簡介（Introduction）
The easiest way of starting a new project using ABP with ASP.NET Core with Angular is to create a template on templates page. Remember to check "Include module zero". After creating and downloading your project, follow below steps to run your application.
開始一個新使用Angular和 ASP.NET Core 的ABP項目最簡單的方法就是通過官方的模板頁面來生成模板。切記包含zero模塊。在官網完成創建和下載你的項目后，跟隨后面的步驟來運行你的應用。
下載地址：https://aspnetboilerplate.com/Templates
ASP.NET Core項目介紹（ASP.NET Core Application）
- Open your solution on Visual Studio 2017+ and build the solution.
- Select the 'Web.Host' project as startup project.
- Open Package Manager Console and run Update-Database command to create your database (ensure that Default project is selected as .EntityFrameworkCore in the Package Manager Console window).
- Run the application. It will show swagger-ui if it is successfull:
- 用vs2017及其以上版本打開解決方案，然后生成解決方案
- 選擇 'Web.Host' 為啟動項目。
- 打開程序包管理控制臺，然后輸入Update-Database 指令來創建你的數據庫（確保程序包管理控制臺中的默認項目選擇的是‘EntityFrameworkCore’）。
- 運行程序，如果成功將會顯示 swagger-ui。
這里還有一點我要補充一下就是數據庫連接需要根據實際情況進行修改，在‘Web.Host’工程項目下面的appsetting.json中。和以往的mvc項目不同。
下面是我按照上面方法啟動后的效果：
In this template, multi-tenancy is enabled by default. You can disable it in Core project's module class if you don't need.
在這個模版中，multi-tenancy默認是啟用的，如果需要，你可以在core項目中禁用他們
If you have problems with running the application, please try close and open your Visual Studio again. It sometimes fail on first package restore.
如果在運行過程中出現什么問題，請嘗試關閉你的vs然后重新打開。往往在第一次還原包的時候容易失敗。
Angular項目 （Angular Application）
Angular application needs to following tools be installed:
- nodejs 6.9+ with npm 3.10+
- Typescript 2.0+
We used angular-cli to develop the Angular application.
Angular 項目需要按照下面的工具：
- nodejs 6.9版本及其以上，npm3.10版本及其以上
- Typescript 2.0版本及其以上
我們是用angular-cli來構建的Angular項目。
Restore Packages
Open a command prompt, navigate to angular folder which contains *.sln file and run the following command to restore npm packages:
還原包
打開命令提示符，并進入angular的文件夾，執行下面命令還原npm包。
npm install
Notice that npm install may show some warn messages, which is not related to our solution and generally it's not a problem. The solution can also configured to work with yarn and we suggest to use it if available on your computer.
注意，npm安裝包時可能會出現一些警告信息，這不是我們的解決方案相關的一般沒問題。該解決方案還可以配置在yarn上運行，如果你的電腦可以使用yarn，我們建議使用。
Run The Application
In your opened command prompt, run the following command:
運行程序
在你的命令提示符中執行下面命令：
npm start
Once the application compiled, you can browse http://localhost:4200 in your browser. Be sure that Web.Host application is running at the same time. When you open the application, you will see the login page:
項目一旦編譯完成，你可以在瀏覽器中輸入http://localhost:4200 ，前提要確定與此同時你的.net項目中 Web.Host 工程正在運行。當你打開項目，你可以看見登錄頁面。
就翻譯到這里把，因為npm編譯出現錯誤，一時半會也解決不了。
早就聽說java編程對版本的要求很嚴格，node這套開發顯然和java開發很類似，對于我們新手總數莫名奇妙因為引用版本不同而導致錯誤。
于是我確保了下node版本，npm版本符合要求的情況下，重新安裝了typescript，再執行npm install，npm start ，出乎意料的編譯成功了。
Angular client app has also HMR (Hot Module Replacement) enabled. You can use the following command (instead of npm start) to enable HMR on development time:
Angular 客戶端程序同樣支持HMR (Hot Module Replacement)，在開發的時候，你可以用下面的指令來啟動HMR
npm run hmr
對于node開發項目有點了解的人都知道，有package.json這么一個文件，里面包含了一些信息，就包括上面這些指令，還有依賴的包及其版本
Login
Now you can login the application using default credentials. User name is 'admin' and password is '123qwe' as default. If you want to login as a tenant, first switch to that tenant in login page. There is a tenant named "Default" by default. Once you login successfully, you will see a dashboard:
登陸
現在你可以用默認的證書登錄應用。默認用戶名是admin，密碼是123qwe，如果你想作為一個租戶登錄，首先在登陸頁面切換租戶，這里提供一個名字叫做"Default"的默認租戶，一旦你登陸成功，你會看見這樣一個面板。
很明顯我的樣式出現了問題，后面再解決。繼續翻譯。
正常的應該是這樣的
This dashboard is just for demonstration and to be a base for your actual dashboard.
這個面板只是一個demo，它只是你實際面板的基礎。
Deployment of Angular Application
We used angular-cli tooling to build Angular solution. You can use ng build command to publish your project. It publishes to dist folder by default. Then you can host this folder on IIS or any web server you like.
部署Angular項目
我們用 angular-cli 工具來生成Angular解決方案，你可以用ng build 指令來發布你的工程項目，發布內容默認放在dist文件夾下，然后你可以將這個文件夾部署到iis或者其他你喜歡的web服務器下面。
解決方案明細及其他特性（ Solution Details & Other Features）
Token Based Authentication
If you want to consume APIs/application services from a mobile application, you can use token based authentication mechanism just like we do it for Angular client. Startup template includes JwtBearer token authentication infrastructure.
基于令牌的認證
如果您想從移動應用程序中使用API /應用程序服務，您可以使用基于令牌的認證機制，就像我們為Angular 客戶端那樣做。啟動模板包括jwtbearer令牌認證基礎設施。
Here, Postman (chrome extension) will be used to demonstrate requests and responses.
這里，我們用Postman（Chrome的擴展）來演示請求和響應。
Authentication
Just send a POST request to http://localhost:21021/api/TokenAuth/Authenticate with Context-Type="application/json" header as shown below:
認證
只需要向http://localhost:21021/api/TokenAuth/Authenticate發送一個頭包含 Context-Type="application/json"的post請求，如下所示
We sent values usernameOrEmailAddress and password. As seen above, result property of returning JSON contains the token and expire time (which is 24 hours by default and can be configured). We can save it and use for next requests.
如上所示我們發送用戶名和密碼的值，結果返回JSON數據包含令牌和過期時間（默認是24小時，可以配置）。我們可以保存它并用于下一個請求。
About Multi Tenancy
API will work as host users by default. You can send Abp.TenantId header value to work with a specified tenant. It's an integer value and 1 for default tenant by default.
關于多租戶
默認情況下，api將作為主機用戶工作。你可以把abp.tenantid頭的值指定一個特殊租戶。默認情況下，默認的租戶是一個整型值1。
Use API
After authenticate and get the token, we can use it to call any authorized action. All application services are available to be used remotely. For example, we can use the User service to get a list of users:
用戶api
經過驗證后得到令牌，我們可以用它來調用任何授權的方法。所有的應用服務可以遠程使用。例如，我們可以使用用戶服務獲得用戶列表：
Just made a GET request to http://localhost:21021/api/services/app/user/getAll with Content-Type="application/json" and Authorization="Bearer your-auth-token ". All functionality available on UI is also available as API.
我們只需要向http://localhost:21021/api/services/app/user/getAll 發送一個get請求，包含Content-Type="application/json"和Authorization="Bearer your-auth-token "UI上可用的所有功能API也可以實現。
Migrator Console Application
Startup template includes a tool, Migrator.exe, to easily migrate your databases. You can run this application to create/migrate host and tenant databases.
控制臺數據遷移
啟動模板包括一個工具，migrator.exe，可以輕松遷移您的數據庫。您可以運行此應用程序來創建/遷移主機和租戶數據庫。
This application gets host connection string from it's own appsettings.json file. It will be same in the appsettings.json in the .Web.Host project at the beggining. Be sure that the connection string in config file is the database you want. After getting host connection sring, it first creates the host database or apply migrations if it does already exists. Then it gets connection strings of tenant databases and runs migrations for those databases. It skips a tenant if it has not a dedicated database or it's database is already migrated for another tenant (for shared databases between multiple tenants).
這個應用程序從主機的appsettings.json文件中獲取連接字符串。開始它和Web.Host中的appsettings.json文件一樣。確保在配置文件中的連接字符串是要數據庫。獲取主機的連接字符串后，它首先創建主數據庫或應用的遷移，如果它已經存在。然后它就會獲取租戶數據庫連接字符串和運行的數據庫遷移。如果沒有專用數據庫，或者它的數據庫已經遷移到另一個租戶（用于多個租戶之間的共享數據庫），它就會跳過該租戶。
You can use this tool on development or on product environment to migrate databases on deployment, instead of EntityFramework's own tooling (which requires some configuration and can work for single database/tenant in one run).
你可以在開發或生成環境遷使用這個工具來遷移數據，而不是使用EntityFramework自己的工具（這需要一些配置，而且可以在一個單個數據庫/租戶的工作）。
Unit Testing
Startup template includes test infrastructure setup and a few tests under the .Test project. You can check them and write similar tests easily. Actually, they are integration tests rather than unit tests since they tests your code with all ASP.NET Boilerplate infrastructure (including validation, authorization, unit of work...).
單元測試
啟動模板包括測試基礎設施和一些測試例子在測試項目下。你可以查看，并且很輕松的寫類似的測試。實際上，他們因為測試你的代碼與所有的ASP.NET樣板的基礎設施，所以算是集成測試而不是單元測試（包括驗證、授權、工作單位…）。
Source Code
This project template is developed as open source and free under Github: https://github.com/aspnetboilerplate/module-zero-core-template
源碼
這個項目模板的作為開源免費項目，項目地址在
Github：https://github.com/aspnetboilerplate/module-zero-core-template
樣式問題解決辦法（一看就是因為樣式缺失導致的）
在index.html中加入下面標簽
<link rel="stylesheet">
