角度材料

Var*_*rma 5 html javascript css material-design angular-material

所以我已经为我的系统安装了角度,角度材料,角度咏叹调,角度动画依赖性.我只是想测试一下这种即将到来的造型方法.好像我一开始就陷入困境.你能告诉我代码有什么问题吗?

这些是我的3个文件.

  1. app.js
  2. styles.css的
  3. 的index.html

我的输出是{{title1}},位于网页的中心位置.

angular.module('MyApp', ['ngMaterial'])
  .controller("MyController", function($scope) {
    $scope.title1 = 'Lol';
  });
Run Code Online (Sandbox Code Playgroud)
.buttondemoBasicUsage section {
  background: #f7f7f7;
  border-radius: 3px;
  text-align: center;
  margin: 1em;
  position: relative !important;
  padding-bottom: 10px;
}
.buttondemoBasicUsage md-content {
  margin-right: 7px;
}
.buttondemoBasicUsage section .md-button {
  margin-top: 16px;
  margin-bottom: 16px;
}
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" type="text/css" href="angular-material.css">
  <title>AngularJS</title>
</head>

<body ng-app="MyApp">
  <div ng-controller="MyController">
    <md-content>
      <section layout="row" layout-sm="column" layout-align="center center">
        <md-button>{{title1}}</md-button>
      </section>
    </md-content>
  </div>
  <script src="app.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>

</body>

</html>
Run Code Online (Sandbox Code Playgroud)

Chr*_*oph 0

我修复了你的进口。

angular.module('MyApp', ['ngMaterial'])
  .controller("MyController", function($scope) {
    $scope.title1 = 'Lol';
  });
Run Code Online (Sandbox Code Playgroud)
.buttondemoBasicUsage section {
  background: #f7f7f7;
  border-radius: 3px;
  text-align: center;
  margin: 1em;
  position: relative !important;
  padding-bottom: 10px;
}
.buttondemoBasicUsage md-content {
  margin-right: 7px;
}
.buttondemoBasicUsage section .md-button {
  margin-top: 16px;
  margin-bottom: 16px;
}
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" type="text/css" href="angular-material.css">
  <title>AngularJS</title>
</head>

<body ng-app="MyApp">
  <div ng-controller="MyController">
    <md-content>
      <section layout="row" layout-sm="column" layout-align="center center">
        <md-button>{{title1}}</md-button>
      </section>
    </md-content>
  </div>
  <script src="app.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>

</body>

</html>
Run Code Online (Sandbox Code Playgroud)