文章/答案/技术大牛

发布

社区首页 >问答首页 >角质材料

问角质材料
EN

Stack Overflow用户

提问于 2015-07-20 11:14:26

回答 3查看 1.3K关注 0票数 5

因此，我已经安装了角，角材料，角-咏叹调，角动画依赖于我的系统。我只想测试这个和即将到来的造型方法。好像我一开始就被困住了。你能告诉我密码有什么问题吗？

这是我的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>

material-design

angular-material

javascript

html

css

回答 3

Stack Overflow用户

发布于 2015-07-20 11:40:52

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

替换所有对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>

在这些情况下，一件有用的事情是打开工具(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

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

票数 2

Stack Overflow用户

发布于 2015-07-20 11:39:40

我修好了你的进口品。

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>

票数 0

Stack Overflow用户

发布于 2016-04-24 14:46:17

我建议使用类型脚本或类似的选项，第一步是困难的，但稍后您将得到更好的解决方案。

请不要使写代码的痛苦和收获。

快乐的编码。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31515044

复制

相似问题

问角质材料
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角质材料EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角质材料
EN