첫 번째 Angular 응용 프로그램을 시작 하고 기본 설정이 완료되었습니다.
애플리케이션 에 부트 스트랩 을 추가 하려면 어떻게 해야합니까?
예제를 제공 할 수 있다면 큰 도움이 될 것입니다.
답변
당신이 사용 제공 각도-CLI를 새로운 프로젝트를 생성하기 위해,에서 액세스 할 수 부트 스트랩 할 수있는 또 다른 방법이 각도 2/4 .
- 명령 행 인터페이스를 통해 프로젝트 폴더로 이동하십시오. 그런 다음 npm 을 사용 하여 부트 스트랩을 설치하십시오
$ npm install --save bootstrap. 이--save옵션은 부트 스트랩을 종속성에 표시합니다. - 프로젝트를 구성하는 .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 startng2-bootstrap 프로젝트 github에는 다양한 Angular 2 프로젝트 빌드로 ng2-bootstrap을 가져 오는 방법을 보여주는 많은 코드 샘플이 있습니다. plnkr 샘플도 있습니다. Valor-software (라이브러리 작성자) 웹 사이트에도 API 설명서가 있습니다.
답변
앵귤러 클리 환경에서 내가 찾은 가장 간단한 방법은 다음과 같습니다.
1. s̲c̲s̲s̲ 스타일 시트가있는 환경에서의 솔루션
npm install bootstrap-sass —savestyle.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 —savestyle.css에서 :
@import '~bootstrap/dist/css/bootstrap.css';