Angular 프로젝트에서 Bootstrap을 사용하는 방법은 무엇입니까?

첫 번째 Angular 응용 프로그램을 시작 하고 기본 설정이 완료되었습니다.

애플리케이션 에 부트 스트랩 을 추가 하려면 어떻게 해야합니까?

예제를 제공 할 수 있다면 큰 도움이 될 것입니다.

당신이 사용 제공 각도-CLI를 새로운 프로젝트를 생성하기 위해,에서 액세스 할 수 부트 스트랩 할 수있는 또 다른 방법이 각도 2/4 .

1. 명령 행 인터페이스를 통해 프로젝트 폴더로 이동하십시오. 그런 다음 npm 을 사용 하여 부트 스트랩을 설치하십시오
   $ npm install --save bootstrap. 이 --save옵션은 부트 스트랩을 종속성에 표시합니다.
2. 프로젝트를 구성하는 .angular-cli.json 파일을 편집하십시오. 프로젝트 디렉토리 안에 있습니다. "styles"배열에 대한 참조를 추가하십시오 . 참조는 npm으로 다운로드 한 부트 스트랩 파일의 상대 경로 여야합니다. 제 경우에는 :"../node_modules/bootstrap/dist/css/bootstrap.min.css",

내 예 .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": {}
  }
}

이제 부트 스트랩이 기본 설정의 일부 여야합니다.

Angular2와의 통합은 ng2-bootstrap 프로젝트 ( https://github.com/valor-software/ng2-bootstrap )를 통해서도 가능합니다 .

설치하려면 다음 파일을 기본 HTML 페이지에 넣으십시오.

<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">

그런 다음 다음과 같이 구성 요소에 사용할 수 있습니다.

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 {
}

index.html 파일 내에 boostrap CSS를 포함시키기 만하면됩니다.

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

또 다른 좋은 (더 나은) 대안은 angular-ui 팀이 만든 일련의 위젯을 사용하는 것입니다 : https://ng-bootstrap.github.io

이 스레드에서 언급 된 angular-ui 팀의 ng-bootstrap에 필요한 Bootstrap 4 를 사용하려는 경우 대신 이것을 사용하는 것이 좋습니다 (참고 : JS 파일을 포함하지 않아도 됨).

  <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">

SASS를 사용한다고 가정 npm install bootstrap@4.0.0-alpha.6 --save하고 파일에서 파일을 가리켜 실행 한 후에 로컬로이를 참조 할 수 있습니다 styles.scss.

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

가장 인기있는 옵션은 ng2-bootstrap 프로젝트 https://github.com/valor-software/ng2-bootstrap 또는 Angular UI Bootstrap 라이브러리 와 같은 npm 패키지로 배포 된 타사 라이브러리를 사용하는 것 입니다.

개인적으로 ng2-bootstrap을 사용합니다. 구성은 Angular 프로젝트의 빌드 방법에 따라 다르므로 구성하는 방법에는 여러 가지가 있습니다. 아래에 Angular 2 QuickStart 프로젝트를 기반으로 한 예제 구성 게시 https://github.com/angular/quickstart

먼저 패키지에 의존성을 추가합니다.

    { ...
"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"
  },
... }

그런 다음 systemjs.config.js에서 올바른 URL에 이름을 매핑해야합니다.

(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);

부트 스트랩 .css 파일을 index.html로 가져와야합니다. 우리는 (bootstrap 3.3.7 의존성을 추가했기 때문에) 하드 드라이브의 / node_modules / bootstrap 디렉토리 또는 웹에서 얻을 수 있습니다. 우리는 웹에서 그것을 얻고 있습니다 :

<!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 디렉토리에서 app.module.ts 파일을 편집해야합니다

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 { }

마지막으로 / app 디렉토리의 app.component.ts 파일

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

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

export class AppComponent {

    constructor() { }

}

그런 다음 앱을 실행하기 전에 부트 스트랩과 ng2-bootstrap 종속성을 설치해야합니다. 프로젝트 디렉토리로 이동하여 다음을 입력하십시오.

npm install

마지막으로 앱을 시작할 수 있습니다

npm start

ng2-bootstrap 프로젝트 github에는 다양한 Angular 2 프로젝트 빌드로 ng2-bootstrap을 가져 오는 방법을 보여주는 많은 코드 샘플이 있습니다. plnkr 샘플도 있습니다. Valor-software (라이브러리 작성자) 웹 사이트에도 API 설명서가 있습니다.

앵귤러 클리 환경에서 내가 찾은 가장 간단한 방법은 다음과 같습니다.

1. s̲c̲s̲s̲ 스타일 시트가있는 환경에서의 솔루션

npm install bootstrap-sass —save

style.scss에서 :

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

참고 1 :이 ~문자는 nodes_modules 폴더에 대한 참조 입니다.
참고 2 : scss를 사용함에 따라 원하는 모든 boostrap 변수를 사용자 정의 할 수 있습니다.

2. c̲s̲s̲ 스타일 시트가있는 환경에서의 솔루션

npm install bootstrap —save

style.css에서 :

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

angular2를 Bootstrap으로 구성하는 몇 가지 방법이 있습니다.이를 최대한 활용하는 가장 완벽한 방법 중 하나는 ng-bootstrap을 사용하는 것입니다.이 구성을 사용하면 algular2가 DOM을 완전히 제어하여 DOM을 제어하지 않아도되므로 JQuery 및 Boostrap을 사용할 필요가 없습니다. .js.

1- Angular-CLI로 작성하고 명령 행을 사용하여 새 프로젝트를 시작점으로 사용하여 ng-bootstrap을 설치하십시오.

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

참고 : https://ng-bootstrap.github.io/#/getting-started에 대한 자세한 정보

2 : CSS와 그리드 시스템을위한 부트 스트랩을 설치해야합니다.

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

참고 : 자세한 내용은 https://getbootstrap.com/docs/4.0/getting-started/download/

이제 환경을 설정 했으므로 .angular-cli.json을 스타일에 추가하여 변경해야합니다.

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

예를 들면 다음과 같습니다.

"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"
      }
    }
  ]

다음 단계는 프로젝트에 ng-boostrap 모듈을 추가하는 것이므로 app.module.ts에 추가해야합니다.

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

그런 다음 응용 프로그램 앱에 새 모듈을 추가하십시오 : NgbModule.forRoot ()

예:

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

이제 angular2 / 5 프로젝트에서 bootstrap4를 사용할 수 있습니다.

나는 같은 질문을했고 정말 깨끗한 해결책 으로이 기사를 찾았습니다.

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

여기에 지침이 있지만 단순화 된 솔루션이 있습니다.

부트 스트랩 4를 설치하십시오 ( 지침 ) :

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

필요한 경우, 당신의 이름을 변경 SRC /을 styles.css 에 styles.scss 업데이트 .angular - cli.json을 변경 사항을 반영하기 위해 :

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

그런 다음이 줄을 styles.scss에 추가하십시오 .

@import '~bootstrap/scss/bootstrap';

package.json 파일을 확인하고 부트 스트랩에 대한 종속성을 추가하십시오.

"dependencies": {

   "bootstrap": "^3.3.7",
}

그런 다음 .angular-cli.json파일 에 아래 코드를 추가 하십시오.

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

마지막으로 터미널을 사용하여 로컬에서 npm을 업데이트하십시오.

$ npm update

1. npm 설치-부트 스트랩 저장

2. -> angular-cli.json 파일 로 이동하여 스타일 속성을 찾고 다음 스팅을 추가하십시오 : "../node_modules/bootstrap/dist/css/bootstrap.min.css", 다음과 같이 보일 수 있습니다.

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

Angular 6+ 및 Bootstrap 4+를 사용한 절차 :

1. 프로젝트 폴더에서 쉘을 엽니 다
2. 다음 명령을 사용하여 부트 스트랩을 설치하십시오. npm install --save bootstrap@4.1.3
3. 부트 스트랩은 의존성 jquery가 필요하므로 그것을 가지고 있지 않다면 다음 명령으로 설치할 수 있습니다 : npm install --save jquery 1.9.1
4. 다음 명령으로 취약점을 해결해야 할 수도 있습니다. npm audit fix
5. 기본 style.scss 파일에서 다음 줄을 추가하십시오. @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

또는

이 줄을 기본 index.html 파일에 추가하십시오. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

나는 같은 대답을 찾고 있었고 마침내이 링크를 찾았습니다. 부트 스트랩 CSS를 각도 2 프로젝트에 추가하는 방법에 대한 세 가지 다른 방법을 찾을 수 있습니다. 그것은 나를 도왔다.

링크는 다음과 같습니다. http://codingthesmartway.com/using-bootstrap-with-angular/

내 권장 사항은 json 스타일러스로 선언하여 scss에 넣어서 모든 것이 컴파일되고 한곳에 배치되도록하는 것입니다.

1) npm으로 부트 스트랩 설치

 npm install bootstrap

2) CSS로 부트 스트랩 npm을 CSS로 선언하십시오.

작성 _bootstrap-custom.scss:

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


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

    ...
    ..
    .

3) styles.scss 내에서 삽입

@import "bootstrap-custom";

그래서 우리는 모든 핵심을 한 곳에 모아 둘 것입니다

Prettyfox UI 라이브러리를 사용하려고 할 수 있습니다 http://ng.prettyfox.org

이 라이브러리는 부트 스트랩 4 스타일을 사용하며 jquery가 필요하지 않습니다.

html 페이지에 다음 줄을 추가하십시오

<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">

angular cli를 사용하는 경우 부트 스트랩을 package.json에 추가하고 패키지를 설치 한 후 boostrap.min.css를 .angular-cli.json의 "styles"섹션에 추가하기 만하면됩니다.

한 가지 중요한 점은 ".angular-cli.json을 변경할 때 구성 변경을 가져 오기 위해 서비스를 다시 시작해야합니다."입니다.

참조 :

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

또 다른 좋은 대안은 골격 Angular 2/4 + Bootstrap 4 를 사용하는 것입니다

1) ZIP 다운로드 및 zip 폴더 추출

2) 제공