Kendo UI 를 Angular2 와 함께 사용하기

Kendo UI 를 Angular 2 와 사용하기

                                     http://www.telerik.com/blogs/using-kendo-ui-with-angular-2 번역

올해 8 월, 몇 달 간의 노력 끝에 Kendo UI For Angular 2 Beta.를 발표했으며 그 이후로 우리는 1 월로 예정된 출시 후보에 대한 작업에 매진하였습니다. 우리는 이러한 구성 요소에 매우 흥분하고 있으며, 그 결과를 기다릴만한 가치가 있다고 믿습니다.

새로운 Angular 2 구성 요소를 시작하기 전에는 Kendo UI For jQuery와 완전히 다른 점이 있다는것을 아셔야합니다. 여러분 모두와 마찬가지로, 나는 이 이상한 새로운 개념과 모듈, 지시어 등의 새로운 세계에서 Kendo UI를 사용하는 법을 배워야 합니다. 최근에 베타 구성 요소로 Kendo UI와 Angular 2를 실행하는 것이 어떤 것인지 보기 위해 앉아있었습니다. 이것은 제 경험에 대한 기술입니다.

시작 포인트 잡기 

Angular 2에 대해 더 어려운 점 중 하나는 단지 시작하는 것입니다. 우리가 페이지에 스크립트 태그를 몇개 던저 놓고 끝낼 수있는 시대는 이제 끝났습니다. Angular 2는 많은 의존성을 가지고 있으며 모든 JavaScript를 자체 JavaScript와 함께 제공하고 JavaScript를 브라우저 간 호환 가능하게 만드는 빌드 단계가 필요합니다. 다행히도 많은 훌륭한 도구와 스타터 키트가 있습니다. 유감스럽게도, 그들은 모두 다른 모듈 로더를 사용합니다. 따라서 Kendo UI를 시작하는 방법은 사용하는 모듈 로더에 따라 다릅니다.

SystemJS vs Webpack

자바 스크립트 번들 / 모듈 로더 세계에는 현재 두 개의 주요 경쟁자가 있습니다. Webpack은 React 개발자가 널리 채택하였으며 SystemJS는 CommonJS, RequireJS 또는 ES6과 같은 모든 유형의 JavaScript 모듈을 로드하는 데 실제로 도움이되는 범용 모듈 로더입니다.

Angular 2를 선택하는 시작 키트에 따라 SystemJS 또는 Webpack을 사용하게됩니다. 문제는 이 모듈 로더 중 하나에 익숙하지 않은 경우 어느 모듈이 곧바로 사용되는지 알지 못할 수도 있다는 것입니다. 그것은 Kendo UI의 경우 Webpack이 잘 작동하고 SystemJS가 좀 더 많은 구성을 필요로 하기 때문에 문제가 될 수 도 있죠. 

그렇기 때문에 수많은 초보자 용 키트와 GitHub 프로젝트 템플릿을 검토 한 후 Kendo UI와 함께 Angular CLI를 사용하는 것이 좋습니다.

Angular CLI

Angular CLI는 Angular 2로 시작하고 실행하기위한 공식 도구이며 Angular 2 팀과 함께 커뮤니티의 쩌는 사람들이 구성했습니다. 나는 몇 가지 이유로 이것을 권장합니다 :

1. 가장 깨끗하고 단순한 빈 Angular 2 프로젝트를 생성합니다.
2. Webpack을 사용하며 , 거의 모든 것을 구성하는 멋진 일을 대신해줍니다.
3. Angular 2 프로젝트가 많은 파일을 포함하기 때문에 필요한 확실한 제네레이터를 가지고 있습니다.

Angular CLI를 설치하려면 문서를 방문하여 Node 및 npm의 올바른 버전이 설치되어 있는지 확인하십시오. 그 후는 매우 간단해 집니다. 

> npm install -g angular-cli

Windows 사용자 참고 사항 : Visual Studio에 C ++ 라이브러리가 설치되어 있어야합니다. 이러한 라이브러리가 설치되어 있지 않으면 모든 종류의 새 C ++ 프로젝트를 만들고 Visual Studio에서 다운로드하여 설치 됩니다. 그것들은 꽤 거대합니다... 고멘나사이..

CLI가 설치되면 ng 명령을 사용하여 새로운 Angular 2 프로젝트를 작성할 수 있습니다.

> ng new kendo-ui-first-look --style=scss

이것은 새로운 Angular 2 프로젝트를 생성 한 다음 "npm을 경유한 툴링을 위한 패키지 설치"라고 알려줍니다. 생성 된 프로젝트의 의존성을 모두 설치합니다. 꽤 설치할께 많은 패키지이며  i7 및 16 기가의 RAM을 갖춘 Macbook Pro에서 이 단계를 완료하는 데 드는 시간이 그리 짧지 만은 않습니다...CLI가 더 좋아지고 Yarn 같은 것들이 더 좋게 만들어 주길 바랄뿐..

-style = scss 플래그는 SASS가 지원되는 새로운 Angular 2 프로젝트를 원한다는 것을 지정합니다. SASS는 부트스트랩과 같은 외부 CSS 프레임 워크를 포함하고 덮어 쓰기 쉬운 CSS 전처리기입니다.

프로젝트가 생성되면 이동후 serve 명령을 사용하여 프로젝트를 실행할 수 있습니다.

> ng serve

터미널이나 명령 프롬프트를 살펴보면 Webpack이 그 일을하는 것을 볼 수 있습니다.

이 시점에서 앱이 실행 중이지만 브라우저에서 앱을 어떻게 로드할까요? 터미널에서 조금 위로 스크롤하면 앱이 실행되고있는 포트가 어디에 있는지 알 수 있습니다.

그리고 브라우저에 URL을로드하면 ...

굿! 앱이 작동합니다. 

프로젝트를 살펴 보겠습니다. 프로젝트를 생성 한 디렉토리의 내부에 src/app 폴더가 있습니다. app.component.ts 파일을 열면 title이라는 속성이 있는 Angular 2 구성 요소가 표시됩니다. 이 title 속성은 {{title}} 구문을 사용하여 app.component.html 파일에 바인딩됩니다. app.component.ts에서 title 값을 변경하면 다시 로드하지 않고도 앱에 표시된 메시지가 변경되므로이 브라우저 창을 항상 실행 상태로 둘 수 있습니다.

이 응용 프로그램에 Kendo UI를 추가하기 전에 Kendo UI가 권장하고 완벽하게 통합되는 프레임워크인 Bootstrap을 CSS 프레임워크로 사용하기 위해 가져옵니다.

Including Bootstrap.

Angular CLI에는 엄청난 SASS 지원 기능이 내장되어 있으며 타사 CSS 프레임 워크를 포함시키는 것이 쉽기 때문에 SASS 버전의 Bootstrap을 포함 할 예정입니다.

> npm install bootstrap-sass --save

이렇게하면 npm의 bootstrap이 node_models 폴더로 복사됩니다. 우리가 필요로 하는 것은 부트스트랩 CSS입니다.  styles.scss 파일에 @importstatement와 함께 이것을 넣을 수 있습니다.

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

첫 번째 행은 부트스트랩 아이콘 글꼴을 가리키는 변수를 설정합니다. 그 변수는 아래에 임포트 된 Bootstrap SASS 파일에서 사용됩니다. Angular 2 CLI에는 SASS에 대한 모든 빌드 단계가 이미 포함되어 있으므로 이 기능은 "잘 작동합니다".

styles.scss 파일에 SASS를 작성하거나 포함 시키면 이 스타일을 전체 응용 프로그램에서 사용할 수 있습니다. Angular 2에는 스타일 캡슐화라는 기능이 있어 하나 이상의 구성 요소에 제한된 스타일을 지정할 수 있지만 전체 응용 프로그램에는 지정할 수 없습니다. 이것은 강력한 기능이며 저스틴 슈 바르 첸 버거 ( Justin Schwartzenberger)의 짧은 프레젠테이션을 자세히 보시고 장려 해주십시오.

https://www.youtube.com/watch?v=J5Bvy4KhIs0

현재 응용 프로그램을 보면 비슷한 모양이지만 글꼴과 같은 기본 CSS 속성을 정규화하기 때문에 글꼴이 변경되었습니다. 더 좋아 보이는군요!

이 시점에서 부트 스트랩 CSS 구성 요소를 사용할 수 있습니다. app.component.html의 내용을 다음과 같이 변경하십시오.

<div class="container">
  <div>
    <h1>{{ title }}</h1>
  </div>
</div>

이제 응용 프로그램에  Kendo UI Button을 추가해 보겠습니다. 물론 Bootstrap 버튼을 사용할 수는 있지만 Kendo UI를 포함하는 방법을 배우기 위해 Kendo UI 버튼을 사용할 것입니다. 그 외에, Kendo UI for Angular 2의 기본 테마들은 꽤 놀랍습니다. 기대하세요~ 

먼저 Kendo UI npm 엔드 포인트를 등록해야합니다. Telerik 사용자 이름과 암호 및 전자 메일 주소로 로그인 하도록 요청할 것입니다. (역주: Kendo UI 는 999달러 입니다. 아이폰이나 안드로이드 앱 UI 는 499달러) 

> npm login --registry=https://registry.npm.telerik.com/ --scope=@progress

일단 로깅하면 Kendo UI 버튼 컴포넌트를 인스톨 할 수 있게 됩니다.

> npm install -S @progress/kendo-angular-buttons

@tj_besendorfer는 "ng serve"를 실행하는 동안 Kendo UI 위젯을 설치하면 사용중인 파일이 제대로 복사되지 않아 문제가 발생할 수 있다고 지적했습니다. "unmet dependencies가 @ progress / kendo-data-query @ ^ 0.2.0 및 tslint@^3.0.0."과 같은 문제가 발생하면 개발 웹 서버 (서비스 제공 업체)와 `npm install`을 실행하고 다시`ng serve '를 실행하십시오.

그러면 Kendo UI Button 구성 요소가 npm_modules 디렉토리의 @progressfolder에 설치됩니다. 이 버튼을 사용하려면 사용하려는 모듈로 가져와야합니다. 이 경우 app.module.ts라는 모듈이 하나만 있으므로 여기에 모듈을 가져옵니다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

// Import the Kendo UI Component
import { ButtonsModule } from '@progress/kendo-angular-buttons';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,

    // import the Kendo UI Component into the module
    ButtonsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

마지막으로 Kendo UI 버튼에 필요한 CSS를 포함시켜야합니다. Kendo UI Default 테마는 별도의 NPM 패키지를 통해 제공됩니다.

> npm install -S @telerik/kendo-theme-default

그런 다음 Bootstrap을 포함하는 것과 같은 방법으로 styles.scss에 포함시킬 수 있습니다.

/* Bootstrap CSS */

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

/* Kendo UI CSS */

@import "~@telerik/kendo-theme-default/styles/packages/all";

이제이 버튼을 app.component.html에서 사용할 수 있습니다.

<div class="container">
  <div>
    <h1>{{ title }}</h1>
  </div>
  <div>
    <button kendoButton [primary]="true" (click)="buttonClicked()">Don't Click Me!</button>
  </div>
</div>

버튼 클릭 이벤트는 buttonClicked라는 이벤트 핸들러에 바인딩됩니다. 해당 이벤트를 app.component.ts 파일에 추가해야합니다.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app works!';

  // Kendo UI Button click event handler
  buttonClicked() {
    alert("Clickity Clack!")
  }
}

Kendo UI 대화 상자 인 Kendo UI Dialog를 추가하십시오. 이것은 이전에 Kendo UI 창으로 알려져 있었습니다.

> npm install -S @progress/kendo-angular-dialog

Kendo UI Button과 마찬가지로 app.module.ts 파일에서 Kendo UI Dialog 구성 요소를 가져옵니다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

// Import the Kendo UI Components
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DialogModule } from '@progress/kendo-angular-dialog';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,

    // import the Kendo UI Components into the module
    ButtonsModule,
    DialogModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Kendo UI 대화 상자 구성 요소의 마크 업을 버튼 바로 아래의 app.component.html 파일에 추가합니다.

<div class="container">
  <div>
    <h1>{{ title }}</h1>
  </div>
  <div>
    <button kendoButton [primary]="true" (click)="buttonClicked()">Don't Click Me!</button>
  </div>
  <kendo-dialog title="Awesome title">
    I am a super simple Kendo UI Dialog!
  </kendo-dialog>
</div>

지금 앱을 살펴보면 대화 상자 구성 요소가 표시됩니다.

버튼이 대화 상자를 열었더라면 좋을 것입니다. 이를 위해서 우리는 대화 상자의 * ngIf 속성을 부울로 설정해야합니다. 이 * ng는 대화상자의 가시성을 제어합니다. 따라서 속성을 false 로 설정하면 대화 상자가 표시되지 않습니다. 토글하면 대화 상자가 나타나고 배경이 어두워집니다.

<div class="container">
  <div>
    <h1>{{ title }}</h1>
  </div>
  <div>
    <button kendoButton [primary]="true" (click)="buttonClicked()">Don't Click Me!</button>
  </div>
  <kendo-dialog title="Awesome title" *ngIf="dialogOpen" (close)="dialogClosed()">
    I am a super simple Kendo UI Dialog!
  </kendo-dialog>
</div>

즉, buttonClicked 이벤트는 단순히 dialogOpen이라는 속성을 true로 설정하면 됩니다. 그러면 kendo 대화상자가 보여지는것(나타나는것)이죠. 그리고 close 이벤트는 false로 다시 토글합니다.

마지막으로  Angular 2 바인딩을 보여주기 위해 title 속성도 변경합니다.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app works!';
  dialogOpen = false;

  // Kendo UI Button click event handler
  buttonClicked() {
    this.dialogOpen = true;
  }

  dialogClosed() {
    this.dialogOpen = false;
    this.title = "Nice Job!";
  }
}

You’re Ready To Go!

이를 통해 Kendo UI와 Bootstrap을 갖춘 Angular 2 응용 프로그램을 만들었고 이제는 무엇이든 만들 준비가되었습니다!

Kendo UI For Angular 2 Beta에는 Grid 및 Data Visualization를 비롯한 가장 널리 사용되는 컨트롤이 많이 있습니다. 우리는 1 월에 릴리스 후보가 나올 예정이며, 여러분이 좋아하는 구성 요소가 더 많이 포함될 것입니다. 내년 초에 더 많은 것을 제공 할 예정입니다. 우리는 당신이 지금이 모든 구성 요소를 갖고 싶어한다는 것을 알고 있으며 솔직히 그렇게 할 것입니다! 그러나 우리는 항상 최선을 다하는 것을 믿었습니다. 때로는 우리가 원하는 것보다 더 많은 시간이 걸립니다. 그러나 우리는 기다릴만한 가치가 있다고 믿습니다.

자세한 내용은 Getting Started Guide 와 Beta components and demos. 를 확인하십시오.