diff --git a/README.md b/README.md index 7343de8..149f1f1 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,15 @@ # Ratel -这个项目是[Angular完全开发手册](http://www.hijavascript.com) 的官网代码 +This project includes the code of official site of [Angular完全开发手册](https://blog.chtoma.com) -This project includes the code of official site of [Angular完全开发手册](http://www.hijavascript.com) ## Development server -运行 `ng serve` 启动开发服务器，然后在浏览器中输入 `http://localhost:4200`。 - run `ng serve` to start the server, then type `http://localhost:4200` in your browser. -## Build -运行 `npm run build:ssr` 会启动项目的构建过程，运行完成将会在 dist 目录下生成以下结构： +## Build run `npm run build:ssr` to start the building process of the project. After that, the following structure will be generated in the `dist` folder. -> 注意： 由于 ng-zorro-antd 目前不支持ssr，在打包服务端渲染代码时需要将 src/formly-zorro/formly-zorro-routing.module.ts 中的子路由注释掉 - > Note: Currently ng-zorro-antd does not support ssr, you need to comment the sub routing config in src/formly-zorro/formly-zorro-routing.module.ts before production build. ```js @@ -24,61 +18,36 @@ run `npm run build:ssr` to start the building process of the project. After that ----server| ``` -browser文件夹下为打包后的源代码。server文件夹下为服务端渲染所需要的代码。 - The packed source code will be in the `browser` folder, and the code for server side rendering will be in the `server` folder. ---- ## NGX_FORMLY_ZORRO -### 产生原因 -### Cause - -Ngx Formly 是一个可以使用动态JSON驱动的表单库，如果你需要更加详细的学习它的使用方法，请访问[官方仓库](https://github.com/ngx-formly/ngx-formly)。 - Ngx Formly is a dynamic JSON powered form library, if you want to learn more details about how to use it, please visit [ngx-formly](https://github.com/ngx-formly/ngx-formly) -Ng Zorro Antd 是 Ant Design 的 Angular 版本，如果你需要更加详细的学习它的使用方法，请访问[官方仓库](https://github.com/NG-ZORRO/ng-zorro-antd)。 - Ng Zorro Antd is the Angular version of Ant Design, if you want to learn more details about it, please visit [NG-ZORRO](https://github.com/NG-ZORRO/ng-zorro-antd) -目前 Ngx Formly 官方尚未提供对 Ng Zorro Antd 的支持，尽管已经有开发者向官方仓库提交了相关的 pr，但目前为止都没有合入，可能管理人员的工作太忙吧。 - Ngx Formly offcially does not provide support for Ng Zorro Antd till now. Even some developers have submitted relative pull requests, but are still not merged, maybe the admins are far too busy due to the 996 :) -> 源码位置：src/app/ngx-formly-zorro 完全按照 [Ngx Formly](https://github.com/ngx-formly/ngx-formly) 的方式开发 - > Source code position：src/app/ngx-formly-zorro, totally followed the way of [Ngx Formly](https://github.com/ngx-formly/ngx-formly) to develop -### 安装方法 - ### Installation -按照[Ngx Formly](https://github.com/ngx-formly/ngx-formly)官方提供的方式进行即可，只不过Ng Zorro Antd 的包尚未在 **@ngx-formly/** 路径下，目前你可以使用 ngx-formly-zorro 这个包来替代，例如： - -Just follow the method provided by [Ngx Formly](https://github.com/ngx-formly/ngx-formly), but the package of Ng Zorro Antd is still not under the path **@ngx-formly/**, you can use package ngx-formly-zorro to substitute, for instance: - ```bash npm install --save @angular/forms @ngx-formly/core ngx-formly-zorro ``` ### DEMO -DEMO的方式也是安全按照 [Ngx Formly](https://github.com/ngx-formly/ngx-formly)的方式进行，由于没来得及申请域名，暂时将它放在这个博客网站下。 - Demo also totally follows the [Ngx Formly](https://github.com/ngx-formly/ngx-formly), because we still have not applied for domain name, we put it in the blog site. -你可以跳转到 [这里](http://www.hijavascript.com) 查看相关示例及代码，并且你也可以通过每个demo右上方的按钮进行调试或者查看示例代码。 - -You can click [here](http://www.hijavascript.com) to check the examples and codes, besides you can also click the buttons above every demo to debug or check the code. +You can click [here](http://blog.chtoma.com) to check the examples and codes, besides you can also click the buttons above every demo to debug or check the code. ### CONTRIBUTING -目前只是封装了 Ng Zorro Antd 中常用的几个基础表单控件，你可以使用 Ng Formly 提供的自定义控件方式继续添加其它表单控件。在提交代码前强烈建议您阅读 [Ngx Formly](https://github.com/ngx-formly/ngx-formly) 封装UI的方式，并按照其扩展UI组件的方式继续实现其它表单控件。 - Currently only a few basic form controls commonly used in Ng Zorro Antd are packaged, you can continue to add other form controls using the custom controls provided by Ng Formly. Before you submit your code, we strongly recommend you to read the method to encapsulate the UI from [Ngx Formly](https://github.com/ngx-formly/ngx-formly), and continue to implement other form controls in the same way that they extend UI components. ### CONTRIBUTORS -[](https://github.com/sxlwar)[](https://github.com/ZQ-jhon)[](https://github.com/Lei-Wei) +[](https://github.com/sxlwar)[](https://github.com/ZQ-jhon)[](https://github.com/Lei-Wei) diff --git a/src/app/article/article-creation/article-creation.component.ts b/src/app/article/article-creation/article-creation.component.ts index 10bac9d..e0938f3 100644 --- a/src/app/article/article-creation/article-creation.component.ts +++ b/src/app/article/article-creation/article-creation.component.ts @@ -1,21 +1,21 @@ -import { Component, OnDestroy, OnInit, ViewChild, Inject, PLATFORM_ID } from '@angular/core'; +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { isPlatformBrowser } from '@angular/common'; +import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID, ViewChild } from '@angular/core'; import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { ActivatedRoute } from '@angular/router'; - -import { BehaviorSubject, of, Observable, iif } from 'rxjs'; -import { filter, takeWhile, tap, take, share, map, switchMap, distinctUntilChanged } from 'rxjs/operators'; +import { ImageCroppedEvent } from 'ngx-image-cropper'; +import { BehaviorSubject, iif, Observable, of } from 'rxjs'; +import { distinctUntilChanged, filter, map, share, switchMap, take, takeWhile, tap } from 'rxjs/operators'; import { Article } from 'src/app/interface/response.interface'; - +import { UploadResult, UploadService } from 'src/app/providers/upload.service'; import { User } from '../../auth/interface/auth.interface'; import { EditorComponent } from '../../codemirror/editor/editor.component'; import { ArticleCategory } from '../../constant/constant'; import { DeactivateGuard } from '../../interface/app.interface'; import { AuthService } from '../../providers/auth.service'; import { ArticleService } from '../providers/article.service'; -import { ImageCroppedEvent } from 'ngx-image-cropper'; -import { UploadService, UploadResult } from 'src/app/providers/upload.service'; -import { isPlatformBrowser } from '@angular/common'; -import { trigger, transition, animate, state, style } from '@angular/animations'; + + @Component({ selector: 'ratel-article-creation', @@ -193,7 +193,7 @@ export class ArticleCreationComponent implements OnInit, OnDestroy { private getContent(): string { return !!this.isOriginalCtrl.value - ? this.editor.data + '\n\r' + '转载请注明出处：www.hijavascript.com' + ? this.editor.data + '\n\r' + '转载请注明出处：blog.chtoma.com' : this.editor.data; } diff --git a/src/app/article/article/article.component.html b/src/app/article/article/article.component.html index c71516f..49139fe 100644 --- a/src/app/article/article/article.component.html +++ b/src/app/article/article/article.component.html @@ -9,7 +9,7 @@

{{data.subtitle}}

  • 更新时间：{{data.updatedAt}}
  • - 转载请注明出处：www.hijavascript.com + 转载请注明出处：blog.chtoma.com
  • diff --git a/src/app/providers/upload.service.ts b/src/app/providers/upload.service.ts index 5dbdef5..8821a43 100644 --- a/src/app/providers/upload.service.ts +++ b/src/app/providers/upload.service.ts @@ -1,15 +1,15 @@ import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { MatSnackBar } from '@angular/material/snack-bar'; - import * as qiniu from 'qiniu-js'; import { from, Observable, of, Subject } from 'rxjs'; -import { catchError, delay, filter, map, mergeMap, take, takeUntil, timeout, switchMapTo } from 'rxjs/operators'; - +import { catchError, delay, filter, map, mergeMap, switchMapTo, take, takeUntil, timeout } from 'rxjs/operators'; import { ALLOW_UPLOAD_FILE_TYPES, CRUDVar, QiniuErrorCode } from '../constant/constant'; import { GetQiniuTokenResponse } from '../interface/response.interface'; import { BaseService } from './base.service'; + + export interface UploadResult { name: string; url: string; @@ -20,7 +20,7 @@ export interface UploadResult { } @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class UploadService extends BaseService { private readonly path = 'upload'; @@ -33,7 +33,7 @@ export class UploadService extends BaseService { private uploadResults: UploadResult[] = []; - readonly urlPrefix = 'https://assets.hijavascript.com/'; + readonly urlPrefix = 'https://assets.hijavascript.com/'; // FIXME: replace it after domain filing result$: Subject = new Subject(); @@ -49,10 +49,10 @@ export class UploadService extends BaseService { /** * Upload file to qiniu server; - * 1、获取token - * 2、上传图片 - * 3、图片全部上传完成时发出上传结果 - * 4、发生错误或完成时终止数据流 + * 1、request token + * 2、upload image + * 3、emit upload result after finished + * 4、terminate data flow as error occurs or finished */ uploadImage(files: FileList): Observable { this.uploading$.next(true); diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index e98c67c..7747cf5 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,6 +1,6 @@ export const environment = { production: true, name: 'prod', - apiAddress: 'https://www.hijavascript.com', - githubAuthRedirectAddress: 'https://www.hijavascript.com', + apiAddress: 'https://blog.chtoma.com', + githubAuthRedirectAddress: 'https://blog.chtoma.com', };