角度材料
[英]Angular Material
問題描述
所以我已經為我的系統安裝了角度，角度材料，角度詠嘆調，角度動畫依賴性。 我只是想測試一下這種即將到來的造型方法。 好像我一開始就陷入困境。 你能告訴我代碼有什么問題嗎？
這些是我的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>
3 個解決方案
解決方案1
2 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>
在這些情況下，有用的事情是打開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”
解決方案2
0 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>
解決方案3
0 2016-04-24 14:46:17
我建議使用打字稿或一種選項，第一步很難，但后來你會有更好的解決方案。
請不要讓編寫代碼痛苦和獲得。
快樂的編碼。
角材料產生切屑效果而沒有角材料
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.