Mit Bootstrap für Angular und Material Design für Angular zusammen

Question

Ich arbeite an einem Projekt mit dieser template.

Die Vorlage wird mit AngularJs und Bootstrap-UI (Bootstrap für Angular) geschrieben und ich möchte einige Material Design Elemente wie Karten und andere hinzufügen.

Ist es möglich, das zu tun? ist es empfehlenswert? Mein Ding ist, wir lieben diese Vorlage und Weg zu vielen Elementen, aber Material Design haben Karten, Dropdown, Texteingaben mit der Label-Animation usw. zum Beispiel, die erstaunlich sind.

Also meine Frage ist:

AngularJS + Bootstrap für Angular + Material Design für Angular = Awesomeness oder Disaster?

Answer 1

Wenn Sie beide Bootstrap & Winkel-Material hinzuzufügen, ist es das, was

1. Beide haben CSS passieren wird, die Ihre Front-End-Elemente Ziel wird (zB Eingabe
   Element, Tasten)

2. Jeder haben ihr eigenes Aussehen & fühlen (dh Bootstrap Eingabeelement unterscheidet sich von Material Eingabeelement). Also, Ihr gesamtes Projekt wird kein einziges Aussehen haben & fühlen.

3. Wenn Sie beide hinzufügen, müssen Sie sich um CSS-Stile kümmern, die andere auf allgemeine Teile (z. B. Schriftgröße & Schriftfamilie) überschreiben.

4. Angular-Material Front-End-Elemente in Winkel Art und Weise behandelt (Richtlinie) Also, wenn sie eine neue Version veröffentlichen (29 Releases bisher), werden Sie einige Zeit testen Ihre früheren Code ausgegeben haben (egthey geändert Medien $ $ mdMedia für den Umgang mit SideMenu). Ich habe viel Zeit damit verbracht herauszufinden, warum meine SeiteMenu nicht mehr funktioniert!

5. Die Gesamtgröße der Projektabhängigkeiten wird erhöht, wenn Sie zwei Front-End-Frameworks verwenden.

   Angular-Material benötigt seine eigenen Abhängigkeiten wie 'angular-animate' & 'angular-aria'.

Gespräch über Ihre „md-Karten“ gibt es „Platten“ in Bootstrap könnten Sie wollen einen Blick here

Ich würde Ihnen empfehlen, auf eine Sache bleiben entweder Bootstrap oder eckig-Material. Beide sind fantastisch, mischen Sie sie einfach nicht.

Answer 2

ich nur recently wrote a blog post wie Bootstrap mit kantigem-Material ersetzen. Es basiert auf dem Kickstarter-Framework der Wahl, das ich verwende, aber es wird die Arbeit machen, nach der Sie suchen.

Ähnlich wie @nitin sagte, wird es schwierig sein, beide zu implementieren. Worüber ich dich eigentlich bitten würde, darüber nachzudenken, egal ob es möglich ist, warum würdest du beides wollen?

Der Zweck von beiden ist es, einen allgemein gebräuchlichen UI-Stil bereitzustellen, aber sie sind konzeptuell aufeinander abgestimmt, anstatt etwas, das zusammen funktionieren könnte.

Ich würde Sie mehr über Material-Design zu lesen empfehlen starten von der Google-Guides vor rechts in springen.

Answer 3

ich Angular Bootstrap Material geschrieben haben, die eine AngularJS Version von Bootstrap material design theme ist. Es beseitigt die Abhängigkeit von jQuery und Bootstrap-JavaScript. Und unterstützt die Formularvalidierung mit ng-messages.

Sie können von bower über bower install abm installieren.

Da Sie bereits UI Bootstrap verwenden, die nur zusätzliche Abhängigkeit wird Bootstrap-Material Design-Thema CSS und Angular Messages

---

Unten ist eine Grundform Validierung Demo:

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>

Answer 4

Ich habe dieses Problem kürzlich auch analysiert. Es gibt eine neue Version von Angular, die Angular 5 ist. Aber es ist nicht leicht, gut aussehende Komponenten für diese Version von Angular zu finden, die vor ein paar Wochen veröffentlicht wurde.

Eckiges Material basiert hauptsächlich auf Flex-Layout. Sie sollten prüfen, ob das für Sie eine Einschränkung darstellt. Wenn Sie nur Eingabekomponenten verwenden und kein anderes Bootstrap-Javascript-Framework (z. B. ng-bootstrap) integrieren, sollte es funktionieren.

Da Materialkomponenten keine Änderung definieren, native Styling (es hat auch keine normalize.css-Implementierung). Wenn Sie ein Thema des Materialstylings überprüfen, z. https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css Sie finden kein Styling für native Tags.

Was Sie beachten sollten, ist, dass Sie nicht beide Styling auf das gleiche Element verwenden, z. folgenden werden nicht als

<button mat-raised-button class="btn btn-primary">Submit</button> 

gewünscht funktionieren, wenn Sie eine Materialkomponente verwenden, sollten Sie eine materialspezifische Styling auf dieser Komponente verwenden. zum Beispiel

<button mat-raised-button color="primary">Primary</button>