使用Bootstrap进行角度和材料设计一起使用Angular

Question

我正在使用此模板开展项目.

模板是使用AngularJs和Bootstrap-UI(有角度的bootstrap)编写的,我想包括一些Material Design元素,如卡片和其他.

有可能吗？推荐吗？我的事情是我们已经喜欢这个模板以及它的许多元素,但是Material Design有卡片,下拉,带有标签动画等的文本输入,例如令人惊叹.

所以我的问题是:

AngularJS + Bootstrap for Angular + Material Design for Angular = Awesomeness or Disaster？

Answer 1

如果你同时添加bootstrap和angular-material,那么将会发生这种情况

1. 两者都有css,它将瞄准你的前端元素(例如输入
   元素,按钮)

2. 每个都有自己的外观(即Bootstrap输入元素与Material输入元素不同).因此,您的整体项目将没有一个单一的外观和感觉.

3. 如果你添加两者,你将不得不照顾css样式覆盖其他公共部分(例如字体大小和字体系列).

4. 角度材料以角度方式处理前端元素(指令)因此,当他们发布新版本(到目前为止发布29个版本)时,您将不得不花一些时间测试您的早期代码(例如,他们将$ media更改为$ mdMedia以处理sideMenu) .我花了很多时间找到为什么我的sideMenu停止工作!

5. 如果使用两个前端框架,那么项目依赖项的总体大小将会增加.

   角度材料需要它自己的依赖,如'angular-animate'和'angular-aria'.

谈到你的"md-cards",引导程序中有"面板"你可能想看看这里

我建议你坚持使用bootstrap或angular-material.两者都很棒,只是不要混合它们.

Answer 2

我刚刚写了一篇关于如何用Angular-Material 替换 Bootstrap 的博客文章.它基于我正在使用的kickstarter框架,但它将完成你所追求的工作.

就像@nitin所说的那样,实现两者都具有挑战性.我实际上要求你考虑的是,无论它是否可能,为什么你都想要两者？

两者的目的是提供一个整体的共同UI风格,但它们在概念上相互关联,而不是可以协同工作的东西.

我建议你在开始之前从谷歌指南开始阅读更多关于材料设计的内容.

Answer 3

我写过 Angular Bootstrap Material,它是Bootstrap材料设计主题的AngularJS版本.它消除了对jQuery和bootstrap的JavaScript的依赖.并使用支持表单验证ng-messages.

你可以从凉亭通过安装bower install abm.

由于您已经在使用UI Bootstrap,因此唯一的附加依赖项将是bootstrap材料设计主题css和Angular Messages

以下是基本表单验证演示:

angular.module('angularBootstrapMaterialDocs', ['angularBootstrapMaterial', 'ui.bootstrap']);
angular.module('angularBootstrapMaterialDocs')
  .controller('validationDemoCtrl', ['$scope',
    function($scope) {
      $scope.user = {
        name: "",
        notifications: {}
      }
      $scope.errorMap = {
        required: "This field is mandatory",
        email: "Please enter a valid email"
      }
      $scope.change = function() {
        console.log($scope);
      }
    }
  ]);

.container-fluid {
  background-color: #fff;

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/bootstrap-material-design.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/ripples.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap.min.js"></script>
<script src="https://rawgit.com/tilwinjoy/angular-bootstrap-material/master/dist/angular-bootstrap-material.min.js"></script>
<div class="container-fluid" ng-app="angularBootstrapMaterialDocs">
  <div class="row" ng-controller="validationDemoCtrl">
    <div class="col-xs-12 col-sm-6">
      <form name="signup">
        <abm-form-group error-messages="errorMap">
          <label data-abm-label type="floating">Name</label>
          <input type="text" name="name" class="form-control" abm-form-control ng-model="user.name" required>
        </abm-form-group>
        <abm-form-group error-messages="errorMap">
          <label data-abm-label>Email</label>
          <input type="email" name="email" class="form-control" placeholder="johndoe@mail.com" abm-form-control ng-model="user.email" required>
        </abm-form-group>
        <div class="form-group">
          <div class="togglebutton" abm-toggle label="Premium Account">
            <input type="checkbox" name="premiumAccount" ng-model="user.premium" ng-change="user.paymentMode=undefined">
          </div>
        </div>
        <abm-form-group error-messages="errorMap">
          <label>Prefered payment method</label>
          <div class="radio" abm-radio label="Net banking">
            <input type="radio" name="payment" value="net" ng-model="user.paymentMode" ng-required="user.premium" ng-disabled="!user.premium">
          </div>
          <div class="radio" abm-radio label="Credit card">
            <input type="radio" name="payment" value="credit" ng-model="user.paymentMode" ng-required="user.premium" ng-disabled="!user.premium">
          </div>
        </abm-form-group>
        <div class="form-group">
          <div class="togglebutton" abm-toggle label="Send Me Updates">
            <input type="checkbox" name="notifications" ng-model="user.notify" ng-change="user.notifications={}">
          </div>
        </div>
        <div class="row">
          <div class="col-xs-6">
            <abm-form-group error-messages="errorMap">
              <label>Notifications via:</label>
              <div class="checkbox" abm-checkbox label="Text Message">
                <input type="checkbox" name="text-notifications" ng-model="user.notifications.text" ng-disabled="!user.notify" ng-required="user.notify && !user.notifications.email">
              </div>
              <div class="checkbox" abm-checkbox label="Email">
                <input type="checkbox" name="email-notifications" ng-model="user.notifications.email" ng-disabled="!user.notify" ng-required="user.notify && !user.notifications.text">
              </div>
            </abm-form-group>
          </div>
          <div class="col-xs-6">
            <abm-form-group error-messages="errorMap">
              <label>Notification Frequency:</label>
              <select class="form-control" name="frequency" abm-form-control ng-model="user.notifications.frequency" ng-disabled="!user.notify" ng-required="user.notify">
                <option>Daily</option>
                <option>Weekly</option>
                <option>Monthly</option>
              </select>
            </abm-form-group>
          </div>
        </div>
        <a href="" class="btn btn-raised btn-primary" ng-disabled="signup.$invalid" abm-component>Create Account</a>
      </form>
    </div>
    <div class="col-xs-12 col-sm-6">
      <pre>{{user | json}}</pre>
    </div>
  </div>
</div>