From e1a9eee0b8e23339785bbbe2086ef4ed267a6f02 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Fri, 16 Aug 2019 16:12:34 +0300 Subject: [PATCH] docs: change code blocks types --- docs/en/Tutorials/Angular/Part-I.md | 18 +++++----- docs/en/Tutorials/Angular/Part-II.md | 52 ++++++++++++++-------------- 2 files changed, 35 insertions(+), 35 deletions(-) diff --git a/docs/en/Tutorials/Angular/Part-I.md b/docs/en/Tutorials/Angular/Part-I.md index 6e4916dc8a..88b5c8539e 100644 --- a/docs/en/Tutorials/Angular/Part-I.md +++ b/docs/en/Tutorials/Angular/Part-I.md @@ -342,7 +342,7 @@ Run `yarn start`, wait Angular to run the application and open `http://localhost Open the `app-routing.module.ts` and replace `books` as shown below: -```ts +```js import { ApplicationLayoutComponent } from '@abp/ng.theme.basic';- //... @@ -380,7 +380,7 @@ yarn ng generate component books/book-list Import the `SharedModule` to the `BooksModule` to reuse some components and services defined in: -```ts +```js import { SharedModule } from '../shared/shared.module'; @NgModule({ @@ -395,7 +395,7 @@ export class BooksModule {} Then, update the `routes` in the `books-routing.module.ts` to add the new book-list component: -```ts +```js import { BookListComponent } from './book-list/book-list.component'; const routes: Routes = [ @@ -425,7 +425,7 @@ yarn ng generate ngxs-schematic:state books This command creates several new files and edits `app.modules.ts` to import the `NgxsModule` with the new state: -```ts +```js // app.module.ts import { BooksState } from './store/states/books.state'; @@ -446,7 +446,7 @@ First, create data types to map data returning from the backend (you can check s Modify the `books.ts` as shown below: -```ts +```js export namespace Books { export interface State { books: Response; @@ -497,7 +497,7 @@ yarn ng generate service books/shared/books Modify `books.service.ts` as shown below: -```ts +```js import { Injectable } from '@angular/core'; import { RestService } from '@abp/ng.core'; import { Books } from '../../store/models'; @@ -522,7 +522,7 @@ Added the `get` method to get the list of books by performing an HTTP request to Replace `books.actions.ts` content as shown below: -```ts +```js export class GetBooks { static readonly type = '[Books] Get'; } @@ -532,7 +532,7 @@ export class GetBooks { Open the `books.state.ts` and change the file as shown below: -```ts +```js import { State, Action, StateContext, Selector } from '@ngxs/store'; import { GetBooks } from '../actions/books.actions'; import { Books } from '../models/books'; @@ -572,7 +572,7 @@ Added the `GetBooks` action that uses the `BookService` defined above to get the Modify the `book-list.component.ts` as shown below: -```ts +```js import { Component, OnInit } from '@angular/core'; import { Store, Select } from '@ngxs/store'; import { BooksState } from '../../store/states'; diff --git a/docs/en/Tutorials/Angular/Part-II.md b/docs/en/Tutorials/Angular/Part-II.md index 98d79d4600..61e3232a1b 100644 --- a/docs/en/Tutorials/Angular/Part-II.md +++ b/docs/en/Tutorials/Angular/Part-II.md @@ -18,7 +18,7 @@ In this section, you will learn how to create a new modal dialog form to create Create an interface, named `CreateUpdateBookInput` in the `books.ts` as shown below: -```ts +```js export namespace Books { //... export interface CreateUpdateBookInput { @@ -36,7 +36,7 @@ export namespace Books { Open the `books.service.ts` and add a new method, named `create` to perform an HTTP POST request to the server: -```ts +```js create(createBookInput: Books.CreateUpdateBookInput): Observable { return this.restService.request({ method: 'POST', @@ -52,7 +52,7 @@ create(createBookInput: Books.CreateUpdateBookInput): Observable { Add the `CreateUpdateBook` action to the `books.actions.ts` as shown below: -```ts +```js import { Books } from '../models'; export class CreateUpdateBook { @@ -63,7 +63,7 @@ export class CreateUpdateBook { Open `books.state.ts` and define the `save` method that will listen to a `CreateUpdateBook` action to create a book: -```ts +```js import { ... , CreateUpdateBook } from '../actions/books.actions'; import { ... , switchMap } from 'rxjs/operators'; //... @@ -118,7 +118,7 @@ Add a button, labeled `New book` to show the modal: Open the `book-list.component.ts` and add `isModalOpen` variable and `createBook` method to show/hide the modal. -```ts +```js isModalOpen = false; //... @@ -136,7 +136,7 @@ createBook() { Add a `form` variable and inject a `FormBuilder` service to the `book-list.component.ts` as shown below (remember add the import statement). -```ts +```js import { FormGroup, FormBuilder } from '@angular/forms'; form: FormGroup; @@ -151,7 +151,7 @@ constructor( Add the `buildForm` method to create book form. -```ts +```js buildForm() { this.form = this.fb.group({ name: ['', Validators.required], @@ -167,7 +167,7 @@ buildForm() { Modify the `createBook` method as shown below: -```ts +```js createBook() { this.buildForm(); this.isModalOpen = true; @@ -220,7 +220,7 @@ Open `book-list.component.html` and add the form in the body template of the mod Open the `book-list.component.ts` and then create an array, named `bookTypeArr`: -```ts +```js //... form: FormGroup; @@ -231,7 +231,7 @@ bookTypeArr = Object.keys(Books.BookType).filter( The `bookTypeArr` contains the fields of the `BookType` enum. Resulting array is shown below: -```ts +```js ['Adventure', 'Biography', 'Dystopia', 'Fantastic' ...] ``` @@ -241,7 +241,7 @@ This array was used in the previous form template (in the `ngFor` loop). You need to import `NgbDatepickerModule` to the `books.module.ts`: -```ts +```js import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap'; @NgModule({ @@ -255,7 +255,7 @@ export class BooksModule {} Then open the `book-list.component.html` and add `providers` as shown below: -```ts +```js import { NgbDateNativeAdapter, NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap'; @Component({ @@ -292,7 +292,7 @@ This adds a save button to the bottom area of the modal: Then define a `save` method in the `BookListComponent`: -```ts +```js save() { if (this.form.invalid) { return; @@ -311,7 +311,7 @@ save() { Open the `books.service.ts` and then add the `getById` and `update` methods. -```ts +```js getById(id: string): Observable { return this.restService.request({ method: 'GET', @@ -332,7 +332,7 @@ update(updateBookInput: Books.CreateUpdateBookInput, id: string): Observable, action: CreateUpdateBook) { let request; @@ -360,7 +360,7 @@ save(ctx: StateContext, action: CreateUpdateBook) { Inject `BooksService` dependency by adding it to the `book-list.component.ts` constructor and add a variable named `selectedBook`. -```ts +```js import { BooksService } from '../shared/books.service'; //... selectedBook = {} as Books.Book; @@ -373,7 +373,7 @@ constructor( `booksService` is used to get the editing book to prepare the form. Modify the `buildForm` method to reuse the same form while editing a book. -```ts +```js buildForm() { this.form = this.fb.group({ name: [this.selectedBook.name || '', Validators.required], @@ -386,7 +386,7 @@ buildForm() { Add the `editBook` method as shown below: -```ts +```js editBook(id: string) { this.booksService.getById(id).subscribe(book => { this.selectedBook = book; @@ -400,7 +400,7 @@ Added `editBook` method to get the editing book, build the form and show the mod Now, add the `selectedBook` definition to `createBook` method to reuse the same form while creating a new book: -```ts +```js createBook() { this.selectedBook = {} as Books.Book; //... @@ -409,7 +409,7 @@ Now, add the `selectedBook` definition to `createBook` method to reuse the same Modify the `save` method to pass the id of the selected book as shown below: -```ts +```js save() { if (this.form.invalid) { return; @@ -489,7 +489,7 @@ Update the modal header to change the title based on the current operation: Open `books.service.ts` and add a `delete` method to delete a book with the `id` by performing an HTTP request to the related endpoint: -```ts +```js delete(id: string): Observable { return this.restService.request({ method: 'DELETE', @@ -502,7 +502,7 @@ delete(id: string): Observable { Add an action named `DeleteBook` to `books.actions.ts`: -```ts +```js export class DeleteBook { static readonly type = '[Books] Delete'; constructor(public id: string) {} @@ -511,7 +511,7 @@ export class DeleteBook { Open the `books.state.ts` and add the `delete` method that will listen to the `DeleteBook` action to delete a book: -```ts +```js import { ... , DeleteBook } from '../actions/books.actions'; //... @Action(DeleteBook) @@ -544,7 +544,7 @@ The final actions dropdown UI looks like below: Open `book-list.component.ts` and inject the `ConfirmationService`. -```ts +```js import { ConfirmationService } from '@abp/ng.theme.shared'; //... constructor( @@ -557,7 +557,7 @@ constructor( Add a delete method to the `BookListComponent`: -```ts +```js import { ... , DeleteBook } from '../../store/actions'; import { ... , Toaster } from '@abp/ng.theme.shared'; //...