Question

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

这些是我的3个文件。

app.js
styles.css的
的index.html

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

＆＃13;

angular.module('MyApp', ['ngMaterial'])
  .controller("MyController", function($scope) {
    $scope.title1 = 'Lol';
  });

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

这实际上只是将文件引用到项目中的正确位置。

将您所有的本地参考资料替换为CDN，您的代码运作完美：http://codepen.io/qvazzler/pen/vOaqXW

<!DOCTYPE html>
<html>
<head>
<!--    <link rel="stylesheet" type="text/css" href="CSS.css">-->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/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="MyApp.js"></script>-->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-aria.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script>
</body>
</html>

在这些情况下，有用的事情是打开Chrome开发人员工具（CTRL + SHIFT + I），转到控制台部分并查看错误消息。

指向使用DevTools的指南：https://developer.chrome.com/devtools

如果我真的回答你的问题，为什么它不起作用，我们必须看到你的文件结构，但是js文件通常位于与你的html分开的文件夹中文件，你必须添加＆＃34; ../"到你的href的开头访问父文件夹。

示例：

[My Project]
jsfolder
- angular.js
- angular-material.js
cssfolder
- angular-material.css
- styles.css
html
- index.html

要从index.html访问angular.js，您必须写 href =＆＃34; ../ jsfolder / angular.js＆＃34;

Answer 2

我修复了你的进口。

angular.module('MyApp', ['ngMaterial'])
  .controller("MyController", function($scope) {
    $scope.title1 = 'Lol';
  });

.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;
}

<!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>

Answer 3

我建议使用打字稿或一种选项，第一步很难，但稍后你会有更好的解决方案。

请不要让编写代码痛苦和获得。

快乐的编码。

角度材料

3 个答案: