각을 조합하는 가장 좋은 방법JS 및 트위터 부트스트랩
Angular를 조합하고 싶습니다.JS와 Twitter Bootstrap을 새로운 웹 앱으로 만듭니다.앵귤러 같아요.JS 디렉티브는 부트스트랩용으로 작성되었습니다.
그러나 주의 깊게 살펴보면, 이러한 지침이 모든 부트스트랩을 커버하는 것은 아닌 것 같습니다.두 Angular를 결합할 수 있습니까?완전성을 얻기 위해 원래 부트스트랩을 사용하는 UI 부트스트랩 코드를 사용하시겠습니까?애초에 할 수 있는 일인가요?
Angular Strap이라는 또 다른 Angular 프로젝트를 우연히 발견했어요.셋 다 합칠 수 있어요?
Angular를 결합하는 가장 좋은 방법은 무엇입니까?JS와 Twitter Bootstrap은 완전성을 얻기 위해?
일반적으로 부트스트랩의 CSS 부분은 Angular와 동일하게 동작합니다.JS는 부트스트랩 JavaScript와 함께 작동합니다.따라서 부트스트랩 CSS만을 사용하는 경우에는 생각할 필요가 없습니다.
Bootstrap JavaScript의 거의 모든 기능에 대해 Angular는UI는 대체 접근 방식을 제공합니다.예를 들어 일반적으로 navbar는 CSS에서만 작동하므로 Bootstrap 문서를 보고 구현하십시오.네비게이션 바의 응답 기능이 필요한 경우collapse디렉티브의 예에 대해서는, 「angular-ui navbar
Angular에 빠진 게 있으면UI, "Twitter Bootstrap 전체를 커버할 만큼 완전하지 않습니다"라고 좀 더 구체적으로 말씀해 주시겠습니까?나는 일반적인 차이가 있다는 인상을 받지 않는다.
게다가 http://angular-ui.github.io/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>
기본적으로 제 지시는 페이지에 부트스트랩네비게이션 바를 삽입하는 것입니다.
Angular Strap은 Navbar를 지원하며 모듈 단위로 ui 부스트랩과 Angular Strap을 혼합할 수도 있습니다.두 프로젝트 모두 다음과 같은 커스텀 빌드를 위해 컴포넌트를 주입할 수 있습니다.
angular.module('myApp', [
'mgcrea.ngStrap.modal',
'mgcrea.ngStrap.aside',
'ui.bootstrap.popover'
]);
그러나 서로 충돌할 수도 있고 충돌할 수도 있습니다.즉, UI 부트스트랩모달과 각도스트랩모달은 같은 프로젝트에서 사용할 수 없습니다.또한 두 프로젝트의 지시 중 일부는 다른 모듈에 종속되어 있습니다. 예를 들어 각도 스트랩 달력 선택기는 툴팁 지시문에 종속되어 있습니다.
언급URL : https://stackoverflow.com/questions/22421707/best-way-to-combine-angularjs-and-twitter-bootstrap
'itsource' 카테고리의 다른 글
| 스프링 부트가 logging.path 변수를 수신하지 않는 이유는 무엇입니까? (0) | 2023.03.08 |
|---|---|
| AngularJS ng-class if-else 식 (0) | 2023.03.08 |
| Ruby on Rails의 소셜 미디어 공유 버튼 보석 (0) | 2023.03.08 |
| angularjs에서의 단방향 바인딩과 쌍방향 바인딩의 차이 (0) | 2023.03.08 |
| AngularJS 필터 완전 일치 (0) | 2023.03.08 |