[Twitter-Bootstrap] 어떻게 앵귤러 2 프로젝트에서 부트 스트랩 CSS 라이브러리를 사용합니까?



Answers

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

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

Angular2 프로젝트에 부트 스트랩 CSS 라이브러리를 추가하려면 어떻게합니까?

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




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

개인적으로 ng2-bootstrap을 사용합니다. 설정은 앵귤러 프로젝트의 빌드 방식에 따라 다르기 때문에 여러 가지 방법으로 구성 할 수 있습니다. 밑에 앵귤러 2 퀵 스타트 프로젝트 https://github.com/angular/quickstart 기반으로 예제 구성을 게시합니다.

먼저 패키지에 종속성을 추가합니다 .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"
  },
... }

그런 다음 이름을 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);

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

<!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 부트 트랩 종속성을 설치해야합니다. 프로젝트 디렉토리로 이동하여

npm install

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

npm start

ng2-bootstrap 프로젝트 github에는 ng2-bootstrap을 다양한 Angular 2 프로젝트 빌드로 가져 오는 방법을 보여주는 많은 코드 샘플이 있습니다. plnkr 샘플도 있습니다. Valor-software (도서관 저자) 웹 사이트의 API 문서도 있습니다.




Bootstrap을 사용하여 angular2를 구성하는 방법은 여러 가지가 있습니다. ng-bootstrap을 사용하는 가장 완벽한 방법 중 하나는 algular2에서 제공하는이 구성을 사용하여 DOM을 완전히 제어하고 JQuery 및 Boostrap을 사용할 필요가 없도록하는 것입니다 .js.

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

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

참고 : https://ng-bootstrap.github.io/#/getting-started 에서 자세한 정보를 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를 사용할 수 있습니다.




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






나는 같은 대답을 찾고 있었고 마침내이 링크를 발견했다. 부트 스트랩 CSS를 앵귤러 2 프로젝트에 추가하는 세 가지 방법을 설명합니다. 그것은 나를 도왔다.

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







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

"dependencies": {

   "bootstrap": "^3.3.7",
}

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

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

마지막으로 터미널을 사용하여 npm을 로컬로 업데이트하면됩니다.

$ npm update



Links