eckiges Material mit angularjs 1.x

Ich plane AngularJS 1.x Version mit Angular Material Design.eckiges Material mit angularjs 1.x

Während ich nach Artikeln suchte, kam ich unter zwei URLs. Die erste ist, was ich für Angular 1.x benutze. Wenn ich nicht falsch liege, dann ist der zweite für Angular 2.x und höhere Version. Hoffe, dass jemand mehr Licht dazu bringen kann.

https://material.angularjs.org

https://material.angular.io

Quelle

2017-09-10 Ravi Khambhati

Ja, Sie haben Recht! Um Setup verwenden, um Ihre App mit angularjs die erste

DEMO

// Code goes here 
 

 
angular.module('webapp', ['ngMaterial']) 
 
    .controller('AppCtrl', function($scope) { 
 
    $scope.todos = []; 
 
    for (var i = 0; i < 45; i++) { 
 
     $scope.todos.push({ 
 
     face: 'https://avatars0.githubusercontent.com/u/598463?v=3&s=60', 
 
     what: "Brunch this weekend?", 
 
     who: "Markus Thiel", 
 
     notes: "I'll be in your neighborhood doing errands." 
 
     }); 
 
    } 
 
    });

<!DOCTYPE html> 
 
<html ng-app="webapp"> 
 
<head> 
 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css"> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script> 
 

 
    <!-- Angular Material Javascript now available via Google CDN; version 0.6 used here --> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script> 
 

 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-controller="AppCtrl" layout="column"> 
 
    <md-toolbar md-scroll-shrink> 
 
     <div class="md-toolbar-tools"> 
 
     <div flex="50"> 
 
      <h3 class="title"><span>My Title</span></h3> 
 
     </div> 
 
     <div flex="50" layout layout-align="end center"> 
 
      <md-button class="md-fab" aria-label="Time"> 
 
      <md-icon icon="/img/icons/ic_access_time_24px.svg" style="width: 24px; height: 24px;"></md-icon> 
 
      </md-button> 
 
     </div> 
 
     </div> 
 
    </md-toolbar> 
 
    <md-content layout-fill> 
 
     <md-list> 
 
     <md-item ng-repeat="item in todos"> 
 
      <md-item-content> 
 
      <div class="md-tile-left"> 
 
       <img ng-src="{{item.face}}" alt="{{item.who}}" class="face"> 
 
      </div> 
 
      <div class="md-tile-content"> 
 
       <h3>{{item.what}}</h3> 
 
       <h4>{{item.who}}</h4> 
 
       <p>{{item.notes}}</p> 
 
      </div> 
 
      </md-item-content> 
 
      <md-divider inset></md-divider> 
 
     </md-item> 
 
     </md-list> 
 
    </md-content> 
 
</body> 
 

 
</html>

Während die zweite URL für angular ist und angular4 Sie die notwendigen installieren Module mit dem Befehl npm installieren und importieren die Module in Ihre eckige Anwendung.

# install Angular Material 2 components 
npm install --save @angular2-material/{core,button,card}

Quelle

2017-09-10 03:48:57 Sajeetharan

Es hat sich geändert in '@ angular/material'. Das, worauf Sie sich beziehen, ist die Alpha-Version. – Edric

eckiges Material mit angularjs 1.x

Antwort

Verwandte Themen