PrimeNG를 만져 보았습니다.

PrimeNG란?

JSF 의 구현의 하나인 PrimeFaces 와 같은 곳이 만들고 있는 Angular용의 Rich UI Components.
기본 무료로 이용할 수 있어 70개 이상의 컴퍼넌트를 간단하게 이용할 수 있다(유료의 디자인 템플릿등도 제공하고 있다)

· 공식 : htps //w w. p 리메후세 s. 오 rg/p 리멘 g/
・Angular에 대해서는 여기 가 참고가 됩니다.

이런 걸까


이런 게


쉽게 실현할 수 있습니다.

실제로 만져 보았다.

※이번은 Angular 도입~프로젝트의 작성에 대해서는 할애합니다.

PrimeNG 설치

프로젝트 폴더에서 다음 명령을 실행합니다.

$ npm install primeng --save

CSS 적용

src/style.css에 다음을 추가하면 PrimeNG CSS가로드됩니다.

@import url('../node_modules/primeng/resources/themes/omega/theme.css');
@import url('../node_modules/primeng/resources/primeng.min.css');

※이번은 omega라는 테마를 사용합니다만 그 밖에도 무료로 사용할 수 있는 css가 같은 디렉토리에 다수 준비되어 있습니다.
여기에 주의가 필요하고, 지금까지의 순서라면 PrimeNG가 사용하고 있는 아이콘이 존재하지 않고 아이콘이 표시되지 않습니다!

이런 느낌 (버튼 왼쪽의 공백에 아이콘이 표시될 것)


그래서 PrimeNG가 사용하는 Font Awesome을 다운로드해야합니다.
또한 Font Awesome의 최신 버전인 5.0.10에서는 표시할 수 없는 아이콘이 있으므로 이전 버전인 4.7.0을 다운로드해야 합니다. (2018년 4월 현재)
다운로드 페이지는 여기
여러 번 "최신 버전이 있어요!"라고 말합니다만 마음을 귀신으로 해 No Thanks를 선택합니다.
펼친 폴더에서 css 및 fonts 폴더를 src/resources 아래에 놓습니다.
그리고 방금전의 src/style.css 에 아래를 추기하는 것으로 아이콘이 읽히게 됩니다.

@import url('./resources/css/font-awesome.min.css');

Font Awesome에 대해서는 여기 가 참고가 됩니다.
단체라도 충분히 사용할 수 있을 것 같네요.

이 근처의 소세공이 공식은 끝이 접혀 있기 때문에 괴로웠다. . .

구성요소 적용

자, 이제 PrimeNG을 사용할 준비가 되었으므로 실제로 구성 요소를 사용합니다.
이번에는 파일을 업로드하기 위해 FileUploadModule을 사용해 보겠습니다.

각 component.ts에 사용할 모듈을 import하기만 하면 됩니다.

import { FileUploadModule } from 'primeng/components/fileupload/fileupload';

각 HTML은 이런 느낌

<p>
  ファイルアップロード
</p>

<p-fileUpload name="myfile[]" url="./upload.php"></p-fileUpload>

※primeNG의 html 태그를 사용하는 경우는 app.module.ts에도 임포트가 필요합니다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FileUploadModule } from 'primeng/fileupload';
import { AppComponent } from './app.component';
import { MainComponent } from './main/main.component';

@NgModule({
  declarations: [
    MainComponent,
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    FileUploadModule,
  ],
  providers: [
    FileUploadModule,
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

쉽습니다


미리보기도 좋은 느낌


기본적으로 드래그 앤 드롭으로 업로드도 구현됩니다.

요약

이상과 같이 사용할 때는 매우 간단하고 풍부한 UI를 기본 무료로 실현할 수 있습니다.
그러나, 도입시에 조금 빠졌으므로 이번 기사로 했습니다.
나도 아직 만지기 시작했을 뿐이므로 앞으로 건간 사용해 지식을 업데이트 할 수 있으면 좋겠습니다.