Angular 4 – Third Party Paket Entegrasyonu ve Kullanımı

Merhaba,

Bu içeriğimizde Angular 4 uygulamalarında Third Party diye nitelendirilen farklı kütüphanelerin entegrasyonu üzerine konuşuyor olacağız.

Angular uygulamasına Third Party entegrasyonu sağlayabilmek için projemizin ana dizininde bulunan “package.json” dosyasını kullanmamız gerekecektir. Şuradaki makalede de değerlendirdiğimiz gibi “package.json” dosyası NPM ile indirilen paketleri tutmak için tasarlanmıştır.

Uygulamaya entegre edeceğimiz paketlerin; ‘uygulama için mi? yoksa biz uygulama geliştiricileri için mi?’ soruları çerçevesinde projeye hangi açıdan dahil edileceklerini netleştirdikten sonra ilgili paketleri “package.json” dosyasında “dependencies” ya da “devDependencies” özelliklerine referans olarak eklemekteyiz.

Eğer ki; ekleyeceğimiz paketler client ve arayüz ile alakası olan paketlerse yani sadece uygulama için kullanılacaksa “dependencies” özelliğine eklenmeleri gerekmektedir. Yok eğer biz geliştiriciler için lazım olan ve client ve arayüz ile pekte alakası olmayan paketler mevzu bahisse “devDependencies” özelliğine eklenmeleri daha uygun olacaktır.

Biz örneğimizde “jQuery” ve “bootstrap” paketlerini uygulamamıza dahil edeceğimizden dolayı ve bu iki paketin uygulama için kullanılacağından dolayı “dependencies” özelliğine aşağıdaki gibi referanslarını eklemekteyim.

{
.
.
.
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19",
    "jquery": "3.3.1",
    "bootstrap": "4.1.0"
  }
.
.
.
}

Buraya eklenen referanslar ilgili paketleri uygulamamıza entegre etmek için yeterli değildir. En nihayetinde “node_modules” dizininin altını incelerseniz eğer ne “bootstrap” ne de “jQuery” ile ilgili bir kaynak görebileceksiniz.

Projemize eklenecek paketlerin referanslarını “package.json” dosyasında ilgili alana ekledikten sonra artık geri kalan işlemleri Angular CLI’a bırakabilir ve Visual Studio Code editörünün “Integrated Terminal” penceresinden aşağıdaki komutu çalıştırarak uygulamanın paketlerini “package.json” dosyasına göre denetlenmesini ve yeniden tazelenmesini sağlayabilirsiniz.

npm install

Bu işlemden sonra “node_modules” dosyasına göz atarsanız ilgili paketlerin uygulamaya dahil edildiğini göreceksiniz.

Şuana kadar Angular uygulamasında Third Party paketlerinin nasıl entegre edildiğini görmüş bulunmaktayız. İçeriğimizin bundan sonraki satırlarında bu harici eklenen paketlerin projemizde nasıl kullanıldığına dair bir anlatım ve örneklendirme üzerinden devam edeceğiz.

Projeye entegrasyonu sağlanan paketleri kullanabilmek için referanslarını uygulamamıza tanıtmamız gerekmektedir. Tabi bu işlem için paketlerin dizinlerini tek tek html dosyalarına ekleyebilirsiniz. Ama benim size daha güzel bir önerim var. Projenin ana dizininde “.angular-cli.json” dosyasını bu işlem için kullanabilirsiniz.

“.angular-cli.json” dosyası projemizde kullanacağımız kütüphanelerin referanslarını tutmakla görevlidir. Bu dosya içerisine eklenen herhangi bir paket, uygulamanın herhangi bir noktasından erişilebilir vaziyette kullanılabilmektedir. Default dizin olarak uygulama içerisindeki “src” klasörünü göstermektedir. Doğal olarak tüm ayarlamaları ve paket yollarını bu mantıkta belirtmemiz gerekmektedir.

Bizler örneğimizde “bootstrap” ve “jQuery” paketlerinin style ve script yapıları itibariyle ilgili alanlara eklenmesini gerçekleştireceğiz.

.
.
.
      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css"
      ],
      "scripts": [
        "../node_modules/bootstrap/dist/js/bootstrap.js",
        "../node_modules/jquery/dist/jquery.js"
      ]
.
.
.

Şimdi uygulamamızda bu paketlerin çalışıp çalışmadığını kontrol etmek ve biryandan da deneyebilmek için https://getbootstrap.com/docs/4.1/components/navbar/ adresindeki bootstrap kaynaklarından faydalanarak bir sayfa oluşturalım.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home
          <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Bu çalışmayı ana componentimiz olan “app.component.html” sayfasında gerçekleştiriyorum.

Projeyi kaydedip, yayınladıktan sonra aşağıdaki gibi bootstrap kütüphanesinin çalıştığını görebiliyorsanız eğer Third Party entegrasyonu ve kullanımı üzerine başarılı bir çalışma gerçekleştirdiğinizi düşünebilirsiniz.

Evet. Bundan sonraki makalelerimizde, gerektiği durumlarda Third Party entegrasyonlarını bu makale referansıyla gerçekleştirecek veyahut önceden gerçekleştirdiğimizi varsayacağız. Doğal olarak kaleme aldığım içeriklerim sektörünün ve ilminin gereği olarak ilgili konudan başka konulara daha az sapacak, farklı noktalara temas edilip gereksizce makalenin şişmesi durumları engellenmiş olacaktır.

Tabi herşeyden önemlisi Angular uygulamalarında Third Party paketlerle bu şekilde rahat, hızlı ve pratik çalışmalar sergileyebiliyor olacağız. 🙂

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…