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 bilgisiAngular 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-angularBu 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 jqueryKurulumdan 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">×</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/popper.js@1.16.1/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-bootstrapKullanı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...