PrimeNG CLI Kurulumu

Merhaba,

Daha önce anlatmış olduğum PrimeNG Kurulumu'na bakabilirsiniz. Şimdi ise "cli" nedir önce buna kısa bir şekilde değinmek istiyorum.

>
Angular CLI

Angular 2 CLI Angular 2 için gereken altyapının otomatik kurulumunu sağlayan bir araçtır.  Angular ekibi tarafından geliştirilmiş olup tüm dünyaya sunulmuştur. Angular 2 CLI kurulduğu zaman otomatik olarak gereken altyapı, örnek proje, gereken test alanı oluşturur. Bunları sadece birkaç komutla hızlıca yapması biz geliştiriciler için önemli kolaylık sağlamaktır. https://cli.angular.io/ detaylı olarak inceleyebilirsiniz.



Angular CLI nasıl kurulur?

npm kullanarak indireceğiz.  Kurulumu başlatmak için Başlat > cmd sağ tıklayıp Yönetici olarak çalıştır'ı tıklıyoruz. Açılan pencereden ben D: sürücüsüne kurulum yapacağım için

md D:\primeng // primeng adında bir klasör oluşturuyorum.
cd D:\primeng // oluşturmuş olduğum klasöre geçiş yapıyorum.
npm install -g @angular/cli //@angularcli indiriyorum
ng new primengcli // primengcli adında bir proje oluşturuyorum.

Sonuç olarak

Installing packages for tooling via npm.
Installed packages for tooling vai npm.
Project 'primengcli' successfully created.

Böylelikle angularcli ile projemizi oluşturduk. Çalıştırmak için ise aşağıdaki komut ile çalıştırabiliriz.

cd primengcli // oluşturmuş olduğumuz proje klasörüne giriyoruz.
ng serve  //projeyi başlatıyoruz.

Görebilmek için ise web browser a http://localhost:4200 yazıp girebiliriz. Server'ı durdurmak için ise

CTRL + C

tuşlarına basarak durdurabiliriz.



Geldik PrimeNG'yi entegre etmeye PrimeNG'nin resmi sitesinde de anlatıldığı gibi

npm install primeng --save

komutunu çalıştırarak primeng'i projemize dahil ediyoruz.

PrimeNG'nin çalışması için angular animations'ı yüklememiz gerekmektedir. Aşağıdaki gibi yükleyebiliriz.

npm install @angular/animations

Daha sonra PrimeNG'i fontawesome simgelerini kullandığını için fontawesome'ı yüklememiz gerekmektedir. Burada da anlatıldığı gibi yükleyebiliriz.

npm install font-awesome

Style dosyalarını eklemek için .angular-cli.json dosyasını aşağıdaki gibi düzenliyoruz.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "primengcli"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
    "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Projenin yüklü olduğu klasörün altında src\app.module.ts dosyasına aşağıdaki gibi module import edeceğiz. Ben calendar(takvim) i import ediyorum.

import {CalendarModule} from 'primeng/primeng';

Aynı dosyanın içerisine Class export ediyoruz

export class MyModel {

    value: Date;
    
}

Import ettiğimiz module u html dosyasından çağırmamız gerekmektedir. Bunun için ise src\app.component.html 

<p-calendar [(ngModel)]="value"></p-calendar>

Son olarak

ng serve

yazarak serverımızı çalıştırıyoruz.

Çalıştırdıktan sonra http://localhost:4200 yazıp girdiğimizde aşağıdaki görünümü almış olacağız.

Sorunsuz kodlamalar :)