• 0

Angular 10'da Bootstrap 4 Kullanımı ve Kurulum

1 ay önce , Okuma süresi 3 dakika.

Bu yazıda, bootstrap 4'ü Angular 10 uygulamamıza kurmanın farklı yollarını göreceğiz.
Angular 10'da Bootstrap 4 Kullanımı ve Kurulum

Localhost makinenizde Angular 10 kurulu değilse , nasıl kurulacağına dair bu öğreticiyi görebilirsiniz .

Önkoşullar

  • HTML, CSS ve JavaScript (ES6 +) ile aşinalık.
  • Geliştirme makinenizde yüklü olan Vs kodu veya herhangi bir kod düzenleyici.
  • Temel Angular bilgisi

Angular Bootstrap Uygulamamızı Kurma

Angular'ın CLI'sini kullanarak yeni bir Angular uygulaması kurarak başlayacağız. Bunu yapmak için bir dizin oluşturun ve bu dizinde terminalinizi açın:

ng new bootstrap-angular

Bu komutu çalıştırmak, kurulum için bazı sorular soracaktır. tip N Angular  yönlendirme kaldırmak ve seçmek için cssbizim uygulama için stil biçimi olarak.

Kurulumdan sonra cd bootstrap-angularterminalinize yazarak proje dizinine giriyoruz .

Bootstrap, bootstrap'in temel betiğinden ve jQuery'den oluşur. Bu paketi kurmak ve kurmak için npm kullanacağız. Bunu yapmak için terminalinizi açın ve bu komutu çalıştırın. Projelerinizin çalışma dizininde olduğunuzdan emin olun):

npm install --save bootstrap jquery

Kurulumdan sonra bunu açısal paketimize eklemeliyiz.

İlk yöntem onu angular.json dosyamıza eklemektir. angular.json Dosyayı açın ve stiller ve komut dizisi dizisine içe aktarın:

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

Bu, önyükleme komut dosyasını ve stillerini uygulamamıza ekleyecektir. Bunu yaptıktan sonra artık src/app/app.components.html dosyamızdaki kodlarımızı şu şekilde değiştirerek bootstrap bileşenlerini deneyebiliriz :

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <!-- testing buttons -->
        <button class="btn btn-primary">Hello World</button>
        <div
          class="alert alert-warning alert-dismissible fade show"
          role="alert"
        >
          <strong>Hi..</strong> I'm Sunil..I write Angular
          <button
            type="button"
            class="close"
            data-dismiss="alert"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

Uygulamamızı ng serve terminalimiz üzerinden çalıştırarak açabiliyoruz. Bu, 4200 numaralı bağlantı noktasındaki uygulamamızı açacaktır:

Bootstrap CDN Yöntemini Kullanma

Uygulamamıza bootstrap eklemenin bir başka yolu da bootstrap CDN'yi kök index.htmldosyamıza eklemektir . Bunun çalıştığını doğrulamak için angular.jsondosyaya eklediğiniz kodu kaldırabilirsiniz . src/index.htmlDosyayı şu şekilde değiştirin :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>BootstrapAngular</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
  </script>
</body>
</html>

Bu hemen işe yaramazsa, değişiklikleri görmek için uygulamanızı yeniden başlatmanız gerekecektir.

Ng-bootstrap yöntemini kullanma

Bir başka iyi yöntem de ng-bootstrap widget'ı kullanmaktır . Bu, uygulamamızda kullanabileceğimiz tüm önyükleme bileşenlerine sahiptir.

Yüklemek için terminalinizi açın ve aşağıdakileri yazın:

ng add @ng-bootstrap/ng-bootstrap

Kullanımı ng add, çalışmayı kolaylaştıran paketi yapılandırır. Şimdi src/app/app.component.htmldosyamızı şu şekilde değiştirerek bileşenimizi test edebiliriz :

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ul ngbNav #nav="ngbNav" class="nav-tabs">
          <li ngbNavItem>
            <a ngbNavLink>First</a>
            <ng-template ngbNavContent>First content</ng-template>
          </li>
          <li ngbNavItem>
            <a ngbNavLink>Second</a>
            <ng-template ngbNavContent>Second content</ng-template>
          </li>
        </ul>
        <div [ngbNavOutlet]="nav"></div>
      </div>
    </div>
  </div>
</section>

Gördüğünüz gibi Angular ile geliştirdiğimiz bir uygulamaya Boostrap kütüphanesini tanımladık. Bunun daha fazla çeşitli yollarıda bulunabilir geliştirmek tamamen size kalmış. 

Esenle kalın...

#angularjs #Bootstrap