angular material 与 angularjs 1.x

Question

我打算使用具有 Angular Material 设计的 AngularJS 1.x 版本。

在搜索文章时，我找到了以下两篇 URL。第一个是我用于 Angular 1.x 的。如果我没记错的话，第二个是 Angular 2.x 和更高版本。希望有人能对此有更多的了解。

https://material.angularjs.org

https://material.angular.io

Answer 1

是的，你是对的！要使用 angularjs 设置您的应用，请使用第一个

演示

// 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 和 import 安装必要的模块angular 应用程序中的模块。

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

angular material 与 angularjs 1.x

angular material with angularjs 1.x

angularjs

material-design

angular-material

angularjs-material