Açısal bir projede Bootstrap nasıl kullanılır?

İlk Açısal uygulamama başlıyorum ve temel kurulumum tamamlandı.

Uygulamama Bootstrap'ı nasıl ekleyebilirim ?

Bir örnek verebilirseniz, bu çok yardımcı olacaktır.

Angular-CLI'yi yeni projeler oluşturmak için kullanmanız koşuluyla , bootstrap'i Açısal 2/ 4'te erişilebilir hale getirmenin başka bir yolu var .

1. Komut satırı arayüzü ile proje klasörüne gidin. Ardından bootstrap: 'i kurmak için npm kullanın
   $ npm install --save bootstrap. Bu --saveseçenek önyüklemenin bağımlılıklarda görünmesini sağlar.
2. Projenizi yapılandıran .angular-cli.json dosyasını düzenleyin. Proje dizininin içinde. "styles"Diziye bir başvuru ekleyin . Referans, npm ile indirilen bootstrap dosyasına göreli yol olmalıdır. Benim durumumda:"../node_modules/bootstrap/dist/css/bootstrap.min.css",

Örneğim .angular-cli.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "bootstrap-test"
  },
  "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/bootstrap/dist/css/bootstrap.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": {}
  }
}

Şimdi bootstrap varsayılan ayarlarınızın bir parçası olmalıdır.

Ng2-bootstrap projesi aracılığıyla Angular2 ile bir entegrasyon da mevcuttur : https://github.com/valor-software/ng2-bootstrap .

Yüklemek için bu dosyaları ana HTML sayfanıza koymanız yeterlidir:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Daha sonra bileşenlerinize şu şekilde kullanabilirsiniz:

import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',
  directives: [Alert],
  template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}

Tek yapmanız gereken index.html dosyanızın içindeki boostrap css dosyasını eklemektir.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Bir başka çok iyi (daha iyi?) Alternatif, açısal-ui ekibi tarafından oluşturulan bir dizi widget kullanmaktır: https://ng-bootstrap.github.io

Bu iş parçacığında belirtilen açısal-ui ekibinin ng-bootstrap'ı için gerekli olan Bootstrap 4'ü kullanmayı planlıyorsanız , bunu kullanmak isteyeceksiniz (NOT: JS dosyasını eklemenize gerek yoktur):

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

Ayrıca , SASS kullandığınızı varsayarak npm install bootstrap@4.0.0-alpha.6 --save, styles.scssdosyanızdaki dosyayı işaret ederek çalıştırdıktan sonra yerel olarak da başvurabilirsiniz :

@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';

En popüler seçenek, ng2-bootstrap projesi https://github.com/valor-software/ng2-bootstrap veya Angular UI Bootstrap kütüphanesi gibi npm paketi olarak dağıtılan bazı üçüncü taraf kütüphanelerini kullanmaktır .

Ben şahsen ng2-bootstrap kullanıyorum. Yapılandırmanın birçok yolu vardır, çünkü yapılandırma Açısal projenizin nasıl oluşturulduğuna bağlıdır. Altında Angular 2 QuickStart projesine dayalı örnek yapılandırma https://github.com/angular/quickstart

Öncelikle paketimize bağımlılıklar ekliyoruz. Json

    { ...
"dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",

    ...

    "bootstrap": "^3.3.7",
    "ng2-bootstrap": "1.1.16-11"
  },
... }

O zaman adları systemjs.config.js dosyasındaki uygun URL'lerle eşlemeliyiz

(function (global) {
  System.config({
    ...
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      //bootstrap
      'moment': 'npm:moment/bundles/moment.umd.js',
      'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
...
  });
})(this);

İndex.html dosyasında bootstrap .css dosyasını içe aktarmalıyız. Sabit diskimizdeki / node_modules / bootstrap dizininden (bootstrap 3.3.7 bağımlılığını eklediğimiz için) veya web'den alabiliriz. Orada web'den elde ediyoruz:

<!DOCTYPE html>
<html>
  <head>
    ...
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    ...
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

App.module.ts dosyamızı / app dizininden düzenlemeliyiz

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';

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


@NgModule({
  //bootstrap alert import part 2
  imports:      [ BrowserModule, AlertModule.forRoot() ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Ve son olarak / app dizinindeki app.component.ts dosyamız

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

@Component({
    selector: 'my-app',
    template: `
    <alert type="success">
        Well done!
    </alert>
    `
})

export class AppComponent {

    constructor() { }

}

Ardından, uygulamamızı çalıştırmadan önce bootstrap ve ng2-bootstrap bağımlılıklarımızı yüklemeliyiz. Proje dizinimize gitmeli ve yazmalıyız

npm install

Sonunda uygulamamızı başlatabiliriz

npm start

Ng2-bootstrap proje githubunda, çeşitli Angular 2 proje yapılarına ng2-bootstrap'in nasıl içe aktarılacağını gösteren birçok kod örneği vardır. Hatta plnkr örneği var. Valor-software (kütüphanenin yazarları) web sitesinde API dokümanları da bulunmaktadır.

Açısal uçlu bir ortamda bulduğum en basit yol şudur:

1. s̲c̲s̲s̲ stil sayfaları ile bir ortamda çözüm

npm install bootstrap-sass —save

Style.scss içinde:

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

Not1: ~Karakter, nodes_modules klasörüne bir referanstır .
Not2: scss kullandığımız için istediğimiz tüm boostrap değişkenlerini özelleştirebiliriz.

2. c̲s̲s̲ stil sayfaları içeren bir ortamda çözüm

npm install bootstrap —save

Style.css içinde:

@import '~bootstrap/dist/css/bootstrap.css';

Angular2'yi Bootstrap ile yapılandırmanın birkaç yolu vardır, en iyi şekilde yararlanmak için en eksiksiz yollardan biri ng-bootstrap kullanmaktır, DOM'umuz üzerinde algular2 tam kontrolünü verdiğimiz bu yapılandırmayı kullanarak JQuery ve Boostrap kullanma ihtiyacını ortadan kaldırır js.

1-Başlangıç ​​noktası olarak Angular-CLI ile oluşturulan yeni bir projeyi alın ve komut satırını kullanarak ng-bootstrap kurun:

npm install @ng-bootstrap/ng-bootstrap --save

Not: Daha fazla bilgi için https://ng-bootstrap.github.io/#/getting-started

2-O zaman css ve grid sistemi için bootstrap kurmamız gerekiyor.

npm install bootstrap@4.0.0-beta.2 --save

Not: adresinde daha fazla bilgi https://getbootstrap.com/docs/4.0/getting-started/download/

Şimdi ortamı kurduk ve bunun için stile ekleyen .angular-cli.json'u değiştirmeliyiz:

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

İşte bir örnek:

"apps": [
    {
      "root": "src",
        ...
      ],
      "index": "index.html",
       ...
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]

Bir sonraki adım ng-boostrap modülünü projemize eklemek, bunu yapmak için app.module.ts dosyasına eklememiz gerekiyor:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

Sonra yeni modülü uygulama uygulamasına ekleyin: NgbModule.forRoot ()

Misal:

@NgModule({
  declarations: [
    AppComponent,
    AppNavbarComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Şimdi angular2 / 5 projemizde bootstrap4 kullanmaya başlayabiliriz.

Aynı soruyu sordum ve bu makaleyi gerçekten temiz bir çözümle buldum:

http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/

İşte talimatlar, ancak benim basitleştirilmiş çözümümle:

Bootstrap 4'ü kurun ( talimatlar ):

npm install --save bootstrap@4.0.0-alpha.6

Gerekirse, yeniden adlandırmak src / styles.css için styles.scss ve güncelleme .angular-cli.json değişikliği yansıtmak için:

"styles": [
  "styles.scss"
],

Ardından, bu satırı styles.scss dosyasına ekleyin :

@import '~bootstrap/scss/bootstrap';

sadece package.json dosyanızı kontrol edin ve bootstrap için bağımlılıklar ekleyin

"dependencies": {

   "bootstrap": "^3.3.7",
}

sonra .angular-cli.jsondosyaya aşağıdaki kodu ekleyin

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

Son olarak npm'nizi terminal kullanarak yerel olarak güncellersiniz

$ npm update

1. npm install - kaydetme bootstrap

2. -> angular-cli.json dosyasına gidin, stil özelliklerini bulun ve bir sonraki sokmayı ekleyin: "../node_modules/bootstrap/dist/css/bootstrap.min.css", Şuna benzeyebilir:

   "styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "styles.css"
   ],

Açısal 6+ ve Bootstrap 4+ ile prosedür:

1. Projenizin klasöründe bir kabuk açın
2. Bootstrap komutunu yükleyin: npm install --save bootstrap@4.1.3
3. Bootstrap bağımlılık jquery'sine ihtiyaç duyar, bu nedenle sahip değilseniz, şu komutla yükleyebilirsiniz: npm install --save jquery 1.9.1
4. Güvenlik açığını şu komutla düzeltmeniz gerekebilir: npm audit fix
5. Ana style.scss dosyanıza aşağıdaki satırı ekleyin: @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

VEYA

Bu satırı ana index.html dosyanıza ekleyin: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Aynı cevabı arıyordum ve sonunda bu bağlantıyı buldum. Açısal 2 projenize bootstrap css eklemenin üç farklı yolunu açıklayabilirsiniz. Bana yardımcı oldu.

Link: http://codingthesmartway.com/using-bootstrap-with-angular/

Benim tavsiyem, her şeyin derlenmesi ve tek bir yerde toplanması için scss içine koymak için json stylus içinde ilan etmek olacaktır.

1) npm ile bootstrap yükleyin

 npm install bootstrap

2) Stillerimizle css'de bootstrap npm bildirin

Oluşturun _bootstrap-custom.scss:

  // Required
  @import "bootstrap-custom-required";


  // Optional
  @import "~bootstrap/scss/root";
  @import "~bootstrap/scss/grid";
  @import "~bootstrap/scss/tables";

    ...
    ..
    .

3) stilleri içinde.

@import "bootstrap-custom";

bu yüzden tüm çekirdeklerimizi tek bir yerde derleyeceğiz

Prettyfox UI kütüphanesini kullanmayı deneyebilirsiniz http://ng.prettyfox.org

Bu kütüphane bootstrap 4 stilleri kullanır ve jquery'ye ihtiyaç duymaz.

html sayfanıza aşağıdaki satırları ekleyin

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Açısal cli kullanırsanız, package.json'a bootstrap ekledikten ve paketi yükledikten sonra, tek yapmanız gereken .angular-cli.json'un "stiller" bölümüne boostrap.min.css eklemektir.

Önemli bir şey, ".angular-cli.json dosyasında değişiklik yaptığınızda, yapılandırma değişikliklerini almak için sunumu yeniden başlatmanız gerekir."

Ref:

https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Bir başka çok iyi alternatif, iskelet Angular 2/4 + Bootstrap 4'ü kullanmaktır

1) ZIP indirin ve zip klasörünü ayıklayın

2) ng servis