gpt4 book ai didi

javascript - 棱 Angular Material

转载 作者:太空狗 更新时间:2023-10-29 16:35:39 26 4
gpt4 key购买 nike

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

这是我的 3 个文件。

  1. 应用程序.js
  2. 样式.css
  3. 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>

最佳答案

这实际上只是将文件引用到元素中正确位置的问题。

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

关于javascript - 棱 Angular Material ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31515044/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com