AngularJS와 Twitter 부트 스트랩을 결합하는 가장 좋은 방법
AngularJS와 Twitter Bootstrap을 새로운 웹 앱으로 결합하고 싶습니다. AngularJS 지시문이 Bootstrap 용으로 작성된 것 같습니다 .
그러나주의 깊게 살펴보면 이러한 지시문이 모든 부트 스트랩을 다루지는 않는 것 같습니다. AngularUI 부트 스트랩 코드를 원본 부트 스트랩과 결합하여 완전성을 얻을 수 있습니까? 처음부터 할 수 있습니까?
AngularStrap 이라는 또 다른 Angular 프로젝트를 우연히 발견했습니다 . 세 가지를 모두 결합 할 수 있습니까?
완성도를 얻기 위해 AngularJS와 Twitter Bootstrap을 결합하는 가장 좋은 방법은 무엇입니까?
일반적으로 Bootstrap의 CSS 부분은 Bootstrap JavaScript에서 작동하는 것처럼 AngularJS에서 정확히 동일한 방식으로 작동합니다. 따라서 Bootstrap CSS 만 사용하려는 한 생각할 필요가 없습니다.
거의 모든 Bootstrap JavaScript 기능에 대해 AngularUI는 대체 접근 방식을 제공합니다. 예를 들어 navbar는 일반적으로 CSS에서만 작동하므로 Bootstrap 문서를보고 구현하십시오. navbar에 반응 형 기능이 필요한 경우 collapse지시문 이 필요합니다 . 예를 보려면 여기를 참조하십시오 : angular-ui navbar
따라서 AngularUI에 빠진 것이 있다고 생각한다면 "전체 Twitter 부트 스트랩을 다룰 수있을만큼 완전하지 않습니다."라고 좀 더 구체적으로 말씀해 주시겠습니까? 일반적인 엇갈림이 있다는 인상이 없습니다.
또한 http://angular-ui.github.io/bootstrap/ 은 작업을위한 가장 성숙한 라이브러리입니다. 따라서 누락 된 기능이 있다고 생각되면 패치하고 풀 요청을하는 것이 좋습니다.
코드는 Bootstrap 클래스가있는 HTML을 생성하는 고유 한 Angular 지시문을 작성하여 결합 할 수 있습니다. Bootstrap과 Angular를 결합한 유사한 웹 응용 프로그램에서 작업 중입니다. 내가 거기서 한 일은 다음과 같습니다.
app.directive('trackerMenu', function(){
return {
restrict: 'E',
templateUrl: "partials/menu.html"
};
});
그리고 menu.html 의 내용은 다음 과 같습니다.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-show="auth">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Issue Tracker</a>
<ul class="nav navbar-nav">
<li class='toggleable'>
<a ng-click="navigate('dashboard')"><i class="fa fa-home"></i>Dashboard</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('tasks')"><i class="fa fa-tasks"></i>Tasks</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('bugs')"><i class="fa fa-bug"></i>Bugs</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('statistics')"><i class="fa fa-bar-chart-o"></i>Statistics</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('team')"><i class="fa fa-users"></i>Team</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('profile')"><i class="fa fa-user"></i>Profile</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('settings')"><i class="fa fa-cog"></i>Settings</a>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
</div>
</form>
<ul class="nav navbar-nav">
<li>
<a ng-click="logout()"><i class="fa fa-power-off"></i>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
그리고 지시문은 다음과 같이 사용됩니다.
<body ng-class="togglePadding()" ng-controller="RootCtrl">
<tracker-menu></tracker-menu>
</body>
기본적으로 내 지시문은 Bootstrap navbar 를 페이지 에 삽입하는 것 입니다.
Angular Strap은 navbar를 지원하며 경험상 모듈별로 모듈별로 ui boostrap과 angular strap을 혼합 할 수 있습니다. 두 프로젝트 모두 다음과 같이 사용자 지정 빌드에 대한 구성 요소를 삽입 할 수 있습니다.
angular.module('myApp', [
'mgcrea.ngStrap.modal',
'mgcrea.ngStrap.aside',
'ui.bootstrap.popover'
]);
However, they can and will conflict with each other. I.E you cannot have the ui-bootstrap modal and the angular strap modal in the same project. Additionally, some of the directives from both projects have dependencies on other modules for example, the Angular Strap date picker has a dependency on the tooltip directive.
참고URL : https://stackoverflow.com/questions/22421707/best-way-to-combine-angularjs-and-twitter-bootstrap
'code' 카테고리의 다른 글
| 자바 스크립트 개체 ID (0) | 2020.11.02 |
|---|---|
| 인터프리터가 유지 관리하는 정수 캐시는 무엇입니까? (0) | 2020.11.02 |
| 파이썬에서 부동 소수점 무한대 리터럴을 어떻게 입력합니까? (0) | 2020.11.02 |
| ES6-클래스 내에서 정적 메서드 호출 (0) | 2020.11.01 |
| Angular에서 'pathmatch : full'은 무엇이며 어떤 효과가 있습니까? (0) | 2020.11.01 |