angularjs 1.x的角材料

我打算使用AngularJS 1.x版本的Angular材料設計。angularjs 1.x的角材料

當我搜索文章時，我想出了兩個URL。第一個是我用於Angular 1.x的。如果我沒有錯，那麼第二個是Angular 2.x和更高版本。希望有人能夠更多地瞭解這一點。

https://material.angularjs.org

https://material.angular.io

2017-09-10 Ravi Khambhati

是的，你說得對！爲了建立與angularjs你的應用程序中使用的第一個

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>

而第二URL是angular和angular4您可以安裝必要的使用命令npm的模塊在您的角度應用程序中安裝並導入模塊。

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

來源

2017-09-10 03:48:57 Sajeetharan

它已更改爲'@ angular/material'。你在這裏指的是alpha版本。 – Edric

angularjs 1.x的角材料

回答

相關問題