website·Indexed 31 days ago
https://nc12.chenxiaopa.cnA component library based on Angular 12 featuring a wide array of UI elements including animation backgrounds (PrismBackground, LightRaysBackground), text effects (Highlighter, AnimatedShinyText, TypingText), and specialized viewers (GltfViewer, PdfViewer, WordViewer). It also provides utility services such as NcCommonService, NcMouseTooltipService, and NcHtml2canvasService for enhanced development efficiency.
easyplayer that supports HLS formats (H.264 and H.265). To use it in an Angular project, import the NcVideoEasyModule from the ng-cw-v12/video-easy package.import { NcVideoEasyModule } from 'ng-cw-v12/video-easy';NcImgEnlargementModule from the ng-cw-v12/img-enlargement package.import { NcImgEnlargementModule } from 'ng-cw-v12/img-enlargement';Several directives are available to enhance element behavior:
ClickOutside: Triggers an action when a user clicks outside a specific element.Ripple: Adds a ripple effect to elements (supports border-radius and container positioning).Ribbon: Adds a ribbon decoration to elements.HorizontalScroll: Enables mouse-based horizontal scrolling.Spin: Provides a 'loading' state directive.The library provides components for 3D model visualization:
GltfViewer: Supports GLTF models with animation controls and a collapsible environment light panel.ObjViewer: Supports OBJ models. Features include loading progress indicators, spherical background textures, automatic rotation (with configurable speed), and automatic texture path resolution (defaults to the same directory as the .obj file).NcFlipTextModule from the ng-cw-v12/flip-text package.import { NcFlipTextModule } from 'ng-cw-v12/flip-text';ncHorizontalScroll directive allows a host element to be scrolled horizontally using the mouse wheel. To use this directive, import the NcHorizontalScrollModule into your Angular module.import { NcHorizontalScrollModule } from 'ng-cw-v12/horizontal-scroll';<!-- Basic Usage --> <div class="demoDom" ncHorizontalScroll> <div class="demoDomItem" *ngFor="let i of itemsList">{{ i }}</div> </div>
<style> .demoDom { display: flex; height: 67px; overflow-x: auto; /* Ensure overflow is handled */ } .demoDomItem { width: 100px; height: 50px; background-color: rgb(0, 204, 255); margin: 0 10px; flex-shrink: 0; color: white; line-height: 50px; text-align: center; } </style>
HttpService that wraps Angular's HttpClient to provide a centralized way to handle authentication tokens, set default headers, and process program-level errors. This service abstracts GET, POST, and Blob requests, ensuring that every request includes the necessary Authorization bearer token and that errors are displayed via a notification service (e.g., NzMessageService).import { Injectable } from '@angular/core';
import { HttpHeaders, HttpErrorResponse, HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { NzMessageService } from 'ng-zorro-antd/message';
@Injectable({
providedIn: 'root'
})
export class HttpService {
constructor(private http: HttpClient, private message: NzMessageService) { }
get<T>(url: string): Observable<T> {
const headers = this.createHeaders('application/json');
return this.http.get<T>(url, { headers }).pipe(
map(this.extractData),
catchError(this.handleError)
);
}
post<T>(url: string, body: any): Observable<T> {
const headers = this.createHeaders('application/json');
return this.http.post<T>(url, body, { headers }).pipe(
map(this.extractData),
catchError(this.handleError)
);
}
postBlob<T>(url: string, body: any): Observable<T> {
const headers = this.createHeaders('application/json');
return this.http.post<T>(url, body, { headers , responseType: 'blob' as 'json' }).pipe(
map(this.extractData),
catchError(this.handleError)
);
}
private createHeaders(contentType?: string): HttpHeaders {
let headers: HttpHeaders = new HttpHeaders();
if (contentType) {
headers = headers.set('Content-Type', contentType);
}
if (this.token) {
headers = headers.set('Authorization', `Bearer ${this.token}`);
}
return headers;
}
private extractData(res: any) {
return res || {};
}
private handleError = (error: HttpErrorResponse) => {
let errorMessage = '';
if (error.error instanceof ErrorEvent) {
errorMessage = `错误: ${error.error.message}`;
} else {
errorMessage = `服务器返回代码: ${error.status}, 错误信息: ${error.message}`;
}
this.message.error(errorMessage, { nzDuration: 5000 });
return throwError(new Error(errorMessage));
}
}NcImgZoomModule from the ng-cw-v12/img-zoom package into your Angular module.import { NcImgZoomModule } from 'ng-cw-v12/img-zoom';The library provides a suite of viewer components for common file types:
PdfViewer: For PDF documents.WordViewer: For Word documents.ExcelViewer: For Excel spreadsheets.TxtViewer: For plain text files.AutoScrollText component creates a scrolling text effect. To use it, import the NcAutoScrollTextModule from the ng-cw-v12/auto-scroll-text package.import { NcAutoScrollTextModule } from 'ng-cw-v12/auto-scroll-text';NcAnimatedGradientTextModule from the ng-cw-v12/animated-gradient-text package. If you need to specify the animation direction using the provided type, import NcDirectionType.import { NcAnimatedGradientTextModule } from 'ng-cw-v12/animated-gradient-text';
import { NcDirectionType } from 'ng-cw-v12/animated-gradient-text';NcWordViewerModule from the ng-cw-v12/word-viewer package into your Angular module.import { NcWordViewerModule } from 'ng-cw-v12/word-viewer';