angular-material角度材料入门


备注

Angular Material是一个UI组件框架,允许您使用一组预定义的组件和指令生成单页面应用程序。

版本

发布日期
1.1.4 2017年4月20日
1.1.3 2017年1月31日
1.1.2 2017年1月5日
1.1.1 2016年9月1日
1.1.0 2016年8月14日
1.1.0-RC5 2016年6月3日
1.1.0-RC4 2016年4月15日
1.1.0-RC2 2016年3月30日
1.1.0-RC1 2016年3月9日
1.0.9 2016年5月19日
1.0.8 2016年4月28日
1.0.7 2016年4月1日
1.0.6 2016年2月29日
1.0.5 2016年2月4日
1.0.4 2016年1月28日
1.0.3 2016年1月21日
1.0.2 2016年1月14日
1.0.1 2015年12月17日
1.0.0 2015年12月14日
1.0.0-RC7 2015年12月8日
1.0.0 RC6 2015年12月2日
1.0.0 RC5 2015年11月25日
1.0.0 RC4 2015年11月13日
1.0.0-RC3 2015年11月6日
1.0.0-RC2 2015年10月29日
1.0.0-RC1 2015年10月21日
0.11.4 2015年10月13日
0.11.3 2015年10月12日
0.11.2 2015年10月1日
0.11.1 2015年9月25日
0.11.0 2015-09-08
0.11.0-RC2 2015年9月3日
0.11.0-RC1 2015年9月1日
0.10.1 2015年8月11日
0.10.0 2015年6月15日
0.9.8 2015-06-08
0.9.8-RC1 2015年6月5日
0.9.7 2015年6月1日
0.9.5 2015-05-28
0.9.4 2015年5月15日
0.9.3 2015年5月14日
0.9.0 2015年5月4日
0.9.0-RC3 2015年4月28日
0.9.0-RC2 2015年4月20日
0.9.0-RC1 2015年4月14日
0.8.3 2015年3月3日
0.8.2 2015年2月27日
0.8.1 2015-02-24
0.8.0 2015年2月23日
0.7.1 2015年1月30日
0.7.0 2015年1月24日
0.7.0-RC3 2015年1月14日
0.7.0-RC2 2015年1月8日
0.7.0-RC1 情节中字
0.6.1 2014年12月8日
0.6.0-RC3 情节中字
0.6.0-RC2 情节中字
0.6.0-RC1 情节中字
0.5.1 2014年10月31日
0.4.2 2014年10月16日
0.4.1 2014年10月15日
0.4.0 2014年10月6日
0.0.3 2014年9月19日

安装或设置

安装角度材料

NPM

npm install angular-material --save
 

亭子

bower install angular-material --save
 

JSPM

jspm install angular-material
 

来自云

cdnjs | jsdelivr | googlecdn


入门(空壳)

<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
  <!--
    Your HTML content here
  -->  
  
  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
  
  <!-- Your application bootstrap  -->
  <script type="text/javascript">    
    /**
     * You must include the dependency on 'ngMaterial' 
     */
    angular.module('BlankApp', ['ngMaterial']);
  </script>
  
</body>
</html>
 

大师(HEAD)

index.html

<html ng-app="masterAngularMaterial">
    <head>
        <!-- This is important (meta) -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Angular and other dependencies -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script>
        <!-- Angular Material -->
        <script src="https://cdn.rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
        <link href="https://cdn.rawgit.com/angular/bower-material/master/angular-material.min.css" rel="stylesheet">
        <script src="/path/to/app.js"></script>
    </head>
    <body>
        <md-content ng-controller="SomeController">
            {{content}}
        </md-content>
    </body>
</html>
 

app.js

angular.module('masterAngularMaterial', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])
    .controller('SomeController', function($scope) {
        $scope.content="Your content here.";
    })
 

请注意,从https://raw.githubusercontent.com导入将显示以下错误:

拒绝从' https://raw.githubusercontent.com/angular/bower-material/master/angular-material.min.js '执行脚本,因为它的MIME类型('text / plain')不可执行,并且严格MIME类型检查已启用。

使用CDN进行设置

在index.html中,链接来自Google CDN的CSS

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
 

必需的依赖项:

  • angular
  • angular-aria
  • angular-animate
  • angular-messages
  <!-- Angular Material requires Angular.js Libraries -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
 

链接: https//material.angularjs.org/latest/getting-started

的index.html

    <!DOCTYPE html>
    <html ng-app="angularMaterial">
      <head>
        <link rel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
          <!-- Angular Material requires Angular.js Libraries -->
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>
    
          <!-- Angular Material Library -->
          <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
          <script src="app.js"></script>
        <title>Angular Material</title>
      </head>
      <body ng-controller="MainController">
         <md-content>{{content}}</md-content>
      </body>
    </html>
 

app.js

angular.module('angularMaterial', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])
       .controller('MainController', function($scope) {
            $scope.content = "Your content goes here.";
        })