Merge pull request #341 from aspnetzero/update-tutorial-documents-for-angular

Update Angular tutorial documents

Author: ismcagdas

blog-posts/en/using-asp.net-zero-with-devextreme-angular-part-4.md

@@ -216,7 +216,7 @@ Update-Database
 
 **It's finished**! We can test the application. Run the project, **login** as the **host admin** (click Change link and clear  tenancy name) shown below:
 
-<img src="/Images/Blog/login-as-host-3.png" alt="Login as host" class="img-thumbnail" style="width:100.0%" />
+<img src="/Images/Blog/login-as-host-7.png" alt="Login as host" class="img-thumbnail" style="width:100.0%" />
 
 Default **admin** password is **123qwe**. After login, we see the **tenant list** which only contains a **default** tenant. We can create a new tenant:
 

blog-posts/en/using-asp.net-zero-with-devextreme-mvc-part-4.md

@@ -180,7 +180,7 @@ Update-Database
 
 **It's finished**! We can test the application. Run the project, **login** as the **host admin** (click Change link and clear  tenancy name) shown below:
 
-<img src="/Images/Blog/login-as-host-3.png" alt="Login as host" class="img-thumbnail" style="width:100.0%" />
+<img src="/Images/Blog/login-as-host-7.png" alt="Login as host" class="img-thumbnail" style="width:100.0%" />
 
 Default **admin** password is **123qwe**. After login, we see the **tenant list** which only contains a **default** tenant. We can create a new tenant:
 

doc-obsolete/Developing-Step-By-Step-Angular.md

@@ -2034,7 +2034,7 @@ Now, we can update the database again:
 **login** as the **host admin** (click Change link and clear tenancy
 name) shown below:
 
-<img src="images/login-as-host-3.png" alt="Login as host" class="img-thumbnail" style="width:100.0%" />
+<img src="images/login-as-host-7.png" alt="Login as host" class="img-thumbnail" style="width:100.0%" />
 
 After login, we see the **tenant list** which only contains a
 **default** tenant. We can create a new tenant:

docs/en/Developing-Step-By-Step-Angular-Adding-AddPhone-DeletePhone-Methods.md

@@ -68,6 +68,20 @@ Then we add configuration for AutoMapper into CustomDtoMapper.cs like below:
 configuration.CreateMap<AddPhoneInput, Phone>();
 ```
 
+A permission should have a unique name. We define permission names as constant strings in **AppPermissions** class. It's a simple constant string:
+
+```csharp
+public const string Pages_Tenant_PhoneBook_DeletePhone = "Pages.Tenant.DeletePhone";
+public const string Pages_Tenant_PhoneBook_AddPhone = "Pages.Tenant.AddPhone";
+```
+
+Go to **AppAuthorizationProvider** class in the server side and add a new permission as shown below (you can add just below the dashboard permission):
+
+```csharp
+phoneBook.CreateChildPermission(AppPermissions.Pages_Tenant_PhoneBook_DeletePhone, L("DeletePhone"), multiTenancySides: MultiTenancySides.Tenant);
+phoneBook.CreateChildPermission(AppPermissions.Pages_Tenant_PhoneBook_AddPhone, L("AddPhone"), multiTenancySides: MultiTenancySides.Tenant);
+```
+
 (Note: We injected **IRepository&lt;Phone, long&gt;** in the constructor
 and set to \_phoneRepository field, as similar to \_personRepository)
 

docs/en/Developing-Step-By-Step-Angular-Adding-New-Menu-Item.md

@@ -24,12 +24,14 @@ Open PhoneBookDemo.xml (the **default**, **English** localization dictionary) an
 
 ```xml
 <text name="PhoneBook">Phone Book</text>
+<text name="PhoneBooksHeaderInfo">Phone Book Details</text>
 ```
 
 If we don't define "PhoneBook"s value for other localization dictionaries, default value is shown in all languages. For example, we can define it also for Turkish in `PhoneBookDmo-tr.xml` file:
 
 ```xml
 <text name="PhoneBook">Telefon Rehberi</text>
+<text name="PhoneBooksHeaderInfo">Telefon Rehberi Detayları</text>
 ```
 
 Note: Any change in server side (including change localization texts) requires recycle of the server application. We suggest to use Ctrl+F5 if you don't need to debugging for a faster startup. In that case, it's

docs/en/Developing-Step-By-Step-Angular-Authorization-PhoneBook.md

@@ -11,16 +11,16 @@ defined. We will define two permission:
 
 ### Define the permission
 
-Go to **AppAuthorizationProvider** class in the server side and add a new permission as shown below (you can add just below the dashboard permission):
+A permission should have a unique name. We define permission names as constant strings in **AppPermissions** class. It's a simple constant string:
 
 ```csharp
-pages.CreateChildPermission(AppPermissions.Pages_Tenant_PhoneBook, L("PhoneBook"), multiTenancySides: MultiTenancySides.Tenant);
+public const string Pages_Tenant_PhoneBook = "Pages.Tenant.PhoneBook";
 ```
 
-A permission should have a unique name. We define permission names as constant strings in **AppPermissions** class. It's a simple constant string:
+Go to **AppAuthorizationProvider** class in the server side and add a new permission as shown below (you can add just below the dashboard permission):
 
 ```csharp
-public const string Pages_Tenant_PhoneBook = "Pages.Tenant.PhoneBook";
+pages.CreateChildPermission(AppPermissions.Pages_Tenant_PhoneBook, L("PhoneBook"), multiTenancySides: MultiTenancySides.Tenant);
 ```
 
 Unique name of this permission is "**Pages.Tenant.PhoneBook**". While you can set any string (as long as it's unique), it's suggested to use that convention. A permission can have a localizable display name: "**PhoneBook**" here. (See "Adding a New Page" section for more about localization, since it's very similar). Lastly, we set this as a **tenant** level permission.
@@ -71,7 +71,7 @@ new AppMenuItem("PhoneBook", 'Pages.Tenant.PhoneBook', "flaticon-book", "/app/ma
 
 So, how we can enter the page now? Simple, go to **Role Management** page and edit **admin** role:
 
-<img src="images/role-permissions-with-phonebook1.png" alt="Role permissions" class="img-thumbnail" />
+<img src="images/role-permissions-with-phonebook-2.png" alt="Role permissions" class="img-thumbnail" />
 
 We see that a **new permission** named "**Phone book**" added to **permissions** tab. So, we can check it and save the role. After saving, we need to **refresh** the whole page to refresh permissions for the current user. We could also grant this permission to a specific user. Now, we can enter the Phone book page again.
 
@@ -81,17 +81,17 @@ While a permission for a page is useful and probably always needed, we may want
 
 ### Define the Permission
 
-Defining a permission is similar (in the `AppAuthorizationProvider` class):
+First permission was defined before. In the second line, we are creating a child permission of first one. Remember to create a constant in `AppPermissions` class:
 
 ```csharp
-var phoneBook = pages.CreateChildPermission(AppPermissions.Pages_Tenant_PhoneBook, L("PhoneBook"), multiTenancySides: MultiTenancySides.Tenant);
-phoneBook.CreateChildPermission(AppPermissions.Pages_Tenant_PhoneBook_CreatePerson, L("CreateNewPerson"), multiTenancySides: MultiTenancySides.Tenant);
+public const string Pages_Tenant_PhoneBook_CreatePerson = "Pages.Tenant.PhoneBook.CreatePerson";
 ```
 
-First permission was defined before. In the second line, we are creating a child permission of first one. Remember to create a constant in `AppPermissions` class:
+Defining a permission is similar (in the `AppAuthorizationProvider` class):
 
 ```csharp
-public const string Pages_Tenant_PhoneBook_CreatePerson = "Pages.Tenant.PhoneBook.CreatePerson";
+var phoneBook = pages.CreateChildPermission(AppPermissions.Pages_Tenant_PhoneBook, L("PhoneBook"), multiTenancySides: MultiTenancySides.Tenant);
+phoneBook.CreateChildPermission(AppPermissions.Pages_Tenant_PhoneBook_CreatePerson, L("CreateNewPerson"), multiTenancySides: MultiTenancySides.Tenant);
 ```
 
 ### Add AbpAuthorize Attribute
@@ -113,7 +113,26 @@ If we run the application and try to create a person, we get an authorization er
 Open the **phonebook.component.html** view and add the permission **Pages.Tenant.PhoneBook.CreatePerson** condition as shown below:
 
 ```html
-<button *ngIf="'Pages.Tenant.PhoneBook.CreatePerson' | permission" class="btn btn-primary" (click)="createPersonModal.show()"><i class="fa fa-plus"></i> {{"CreateNewPerson" | localize}}</button>
+@if('Pages.Tenant.PhoneBook.CreatePerson' | permission){
+    <button class="btn btn-primary" (click)="createPersonModal.show()"><i class="fa fa-plus"></i> {{"CreateNewPerson" | localize}}</button>
+}
+```
+
+Open the **phonebook.component.ts** view and add the import **PermissionPipe** condition as shown below:
+
+```typescript
+@Component({
+    selector: 'app-phone-book',
+    templateUrl: './phonebook.component.html',
+    animations: [appModuleAnimation()],
+    imports: [
+        //...
+        PermissionPipe,
+    ],
+})
+export class PhoneBookComponent extends AppComponentBase implements OnInit {
+  //...
+}
 ```
 
 In this way, the "Create New Person" button is not rendered in server and user can not see this button.
@@ -122,7 +141,7 @@ In this way, the "Create New Person" button is not rendered in server and user c
 
 To see the button again, we can go to role or user manager and grant related permission as shown below:
 
-<img src="images/user-permissions-phonebook1.png" alt="User specific permissions" class="img-thumbnail" />
+<img src="images/user-permissions-phonebook-2.png" alt="User specific permissions" class="img-thumbnail" />
 
 As shown above, **Create new person** permission is a child permission of the **Phone book**. Remember to refresh page to get permissions updated.
 

docs/en/Developing-Step-By-Step-Angular-Creating-Person-Application-Service.md

@@ -8,12 +8,11 @@ Application service interface and DTOs are located in **.Application.Shared** pr
 using Abp.Application.Services;
 using Abp.Application.Services.Dto;
 
-namespace Acme.PhoneBookDemo.PhoneBook
+namespace Acme.PhoneBookDemo.PhoneBook;
+
+public interface IPersonAppService : IApplicationService
 {
-    public interface IPersonAppService : IApplicationService
-    {
-        ListResultDto<PersonListDto> GetPeople(GetPeopleInput input);
-    }
+    ListResultDto<PersonListDto> GetPeople(GetPeopleInput input);
 }
 ```
 
@@ -50,6 +49,14 @@ configuration.CreateMap<Person, PersonListDto>();
 After defining interface, we can implement it as shown below: (in **.Application** project)
 
 ```csharp
+using Abp.Application.Services.Dto;
+using Abp.Collections.Extensions;
+using Abp.Domain.Repositories;
+using System.Collections.Generic;
+using System.Linq;
+
+namespace Acme.PhoneBookDemo.PhoneBook;
+
 public class PersonAppService : PhoneBookDemoAppServiceBase, IPersonAppService
 {
     private readonly IRepository<Person> _personRepository;

docs/en/Developing-Step-By-Step-Angular-Creating-Person-Entity.md

@@ -10,9 +10,9 @@ using System.ComponentModel.DataAnnotations;
 using System.ComponentModel.DataAnnotations.Schema;
 using Abp.Domain.Entities.Auditing;
 
-namespace Acme.PhoneBookDemo.PhoneBook
-{
-    [Table("PbPersons")]
+namespace Acme.PhoneBookDemo.PhoneBook;
+
+[Table("PbPersons")]
     public class Person : FullAuditedEntity
     {
         public const int MaxNameLength = 32;
@@ -30,7 +30,6 @@ namespace Acme.PhoneBookDemo.PhoneBook
         [MaxLength(MaxEmailAddressLength)]
         public virtual string EmailAddress { get; set; }
     }
-}
 ```
 
 Person's **primary key** type is **int** (as default). It inherits

docs/en/Developing-Step-By-Step-Angular-Creating-Phone-Entity.md

@@ -37,7 +37,7 @@ public class Person : FullAuditedEntity
 }
 ```
 
-We have a **PhoneType** enum as shown below: (in **.Core**
+We have a **PhoneType** enum as shown below: (in **.Core.Shared**
 project)
 
 ```csharp

docs/en/Developing-Step-By-Step-Angular-Creating-PhoneBook-Component.md

@@ -5,20 +5,20 @@ new typescript file (**phonebook.component.ts**) in the phonebook folder
 as shown below:
 
 ```javascript
-import { Component, Injector } from '@angular/core';
+import { Component } from '@angular/core';
 import { AppComponentBase } from '@shared/common/app-component-base';
 import { appModuleAnimation } from '@shared/animations/routerTransition';
+import { LocalizePipe } from '@shared/common/pipes/localize.pipe';
+import { SubHeaderComponent } from '@app/shared/common/sub-header/sub-header.component';
 
 @Component({
     templateUrl: './phonebook.component.html',
-    animations: [appModuleAnimation()]
+    animations: [appModuleAnimation()],
+    imports: [SubHeaderComponent, LocalizePipe],
 })
-
 export class PhoneBookComponent extends AppComponentBase {
-    constructor(
-        injector: Injector
-    ) {
-        super(injector);
+    constructor() {
+        super();
     }
 }
 ```
@@ -32,21 +32,11 @@ As we declared in **phonebook.component.ts** we should create a
 
 ```html
 <div [@routerTransition]>
-    <div class="kt-content  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">
-        <div class="kt-subheader kt-grid__item">
-            <div [class]="containerClass">
-                <div class="kt-subheader__main">
-                    <h3 class="kt-subheader__title">
-                        <span>{{"PhoneBook" | localize}}</span>
-                    </h3>
-                </div>
-            </div>
-        </div>
-        <div [class]="containerClass + ' kt-grid__item kt-grid__item--fluid'">
-            <div class="kt-portlet kt-portlet--mobile">
-                <div class="kt-portlet__body  kt-portlet__body--fit">
-                    <p>PHONE BOOK CONTENT COMES HERE!</p>
-                </div>
+    <sub-header [title]="'PhoneBook' | localize" [description]="'PhoneBooksHeaderInfo' | localize"></sub-header>
+    <div [class]="containerClass">
+        <div class="card card-custom">
+            <div class="card-body">
+                <p>PHONE BOOK CONTENT COMES HERE!</p>
             </div>
         </div>
     </div>
@@ -62,15 +52,16 @@ Now we should create a **phonebook.module.ts** and **phonebook-routing.module.ts
 *phonebook-routing.module.ts*
 
 ```typescript
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-import {PhoneBookComponent} from './phonebook.component';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
-const routes: Routes = [{
-    path: '',
-    component: PhoneBookComponent,
-    pathMatch: 'full'
-}];
+const routes: Routes = [
+    {
+        path: '',
+        loadComponent: () => import('./phonebook.component').then((m) => m.PhoneBookComponent),
+        pathMatch: 'full',
+    },
+];
 
 @NgModule({
     imports: [RouterModule.forChild(routes)],
@@ -82,21 +73,20 @@ export class PhoneBookRoutingModule {}
 *phonebook.module.ts*
 
 ```typescript
-import {NgModule} from '@angular/core';
-import {AppSharedModule} from '@app/shared/app-shared.module';
-import {PhoneBookRoutingModule} from './phonebook-routing.module';
-import {PhoneBookComponent} from './phonebook.component';
+import { NgModule } from '@angular/core';
+import { AppSharedModule } from '@app/shared/app-shared.module';
+import { PhoneBookRoutingModule } from './phonebook-routing.module';
+import { PhoneBookComponent } from './phonebook.component';
 
 @NgModule({
-    declarations: [PhoneBookComponent],
-    imports: [AppSharedModule, PhoneBookRoutingModule]
+    imports: [AppSharedModule, PhoneBookRoutingModule, PhoneBookComponent],
 })
 export class PhoneBookModule {}
 ```
 
 Now, we can refresh the page to see the new added page:
 
-<img src="images/phonebook-empty-ng2.png" alt="Phonebook empty" class="img-thumbnail" style="width:100.0%" />
+<img src="images/phonebook-empty-ng3.png" alt="Phonebook empty" class="img-thumbnail" style="width:100.0%" />
 
 Note: Angular-cli automatically re-compiles and refreshes the page when
 any changes made to any file in the application.