角材料答案 - 爱码网

【问题标题】：Angular Material角材料
【发布时间】：2015-10-09 11:45:32
【问题描述】：

所以我已经为我的系统安装了 angular、angular-material、angular-aria、angular-animate 依赖项。我只是想测试一下这个即将到来的造型方法。看来我一开始就卡住了。你能告诉我代码有什么问题吗？

这是我的 3 个文件。

app.js
styles.css
index.html

我的输出是 {{title1}} 在网页的中心顶部。

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>

【问题讨论】：

我修复了你的导入（查看我的编辑）并且它正在工作。
我没有看到任何修改。 :O
嗯好的。看我的回答

标签： javascript html css material-design angular-material

【解决方案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 文件不同的文件夹中，因此您将拥有将“../”添加到您的 href 的开头以访问父文件夹。

例子：

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

要从 index.html 访问 angular.js，您必须编写 href="../jsfolder/angular.js"

【讨论】：

谢谢大家。原来我必须先导入我的依赖项，然后是我的 .js 和 .css 文件。
@VarunVerma ，请告诉我，我的回答中是否有任何不足之处？

【解决方案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>

【讨论】：

好的，我找到了。对此感到抱歉。当我在 sof 上运行代码 sn-p 时，它可以工作，但是当我将其复制粘贴到我的文件时，它仍然显示相同的结果，无论是在 chrome 和 IE8 上
@Christoph，您忘记将 angular-material.css 更改为 CDN 托管的位置。再说一次，这个答案并没有真正反映为什么 Varun 不能引用他的文件。

【解决方案3】：

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

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

快乐的编码。

【讨论】：