从棱角材料设计开始
[英]Starting with angular material design
问题描述
I've been trying to use Angular Material Design for one week now with no success. 
我一直试图使用Angular Material Design一周，但没有成功。 I spent my time studying HTML/CSS, JavaScript, and AngularJS to understand what is going wrong, but I still don't know what the problem is. 我花时间研究HTML / CSS，JavaScript和AngularJS来了解出了什么问题，但我仍然不知道问题是什么。
Basically what I have tried is the "Getting Started" section of the Google Angular Material Design website but none of them worked with me: 基本上我所尝试的是Google Angular Material Design网站的“入门”部分，但它们都没有与我合作：
I've tried to copy its Github Starter Project but I got this as result: 我试图复制它的Github Starter项目，但我得到了这个结果：
edit: sorry my account is new and I can't post images yet, but it is a print screen of my website not even running angular ![My Result][3] . 编辑：对不起我的帐户是新的，我还不能发布图片，但它是我的网站的打印屏幕，甚至没有运行角度！[我的结果] [3]。
I've also tried to copy its simple Hello World example, but I got very similar problems. 我也尝试复制其简单的Hello World示例，但我遇到了非常类似的问题。
I don't know what I'm doing wrong, but I think it is very simple. 我不知道我做错了什么，但我认为这很简单。 I have a feeling that I'm not importing the right CSS/JS. 我有一种感觉，我没有导入正确的CSS / JS。
var app = angular.module('StarterApp', ['ngMaterial']); app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){ $scope.toggleSidenav = function(menuId) { $mdSidenav(menuId).toggle(); }; }]);
.menuBtn { background-color: transparent; border: none; height: 38px; margin: 16px; position: absolute; width: 36px; } md-toolbar h1 { font-size: 1.250em; font-weight: 400; margin: auto; } md-list .md-button { color: inherit; font-weight: 500; text-align: left; width: 100%; } .visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Using Data-URI converted from svg until <md-icon> becomes available https://github.com/google/material-design-icons */ .menuBtn { background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IkhlYWRlciI+CiAgICA8Zz4KICAgICAgICA8cmVjdCB4PSItNjE4IiB5PSItMjIzMiIgZmlsbD0ibm9uZSIgd2lkdGg9IjE0MDAiIGhlaWdodD0iMzYwMCIvPgogICAgPC9nPgo8L2c+CjxnIGlkPSJMYWJlbCI+CjwvZz4KPGcgaWQ9Ikljb24iPgogICAgPGc+CiAgICAgICAgPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+CiAgICAgICAgPHBhdGggZD0iTTMsMThoMTh2LTJIM1YxOHogTTMsMTNoMTh2LTJIM1YxM3ogTTMsNnYyaDE4VjZIM3oiIHN0eWxlPSJmaWxsOiNmM2YzZjM7Ii8+CiAgICA8L2c+CjwvZz4KPGcgaWQ9IkdyaWQiIGRpc3BsYXk9Im5vbmUiPgogICAgPGcgZGlzcGxheT0iaW5saW5lIj4KICAgIDwvZz4KPC9nPgo8L3N2Zz4=) no-repeat center center; }
<html lang="en" ng-app="StarterApp"> <head> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css"> <link rel="stylesheet" href="CSS/test.css"> </head> <body layout="column" ng-controller="AppCtrl"> <md-toolbar layout="row"> <button ng-click="toggleSidenav('left')" hide-gt-sm class="menuBtn"> <span class="visually-hidden">Menu</span> </button> <h1>Hello World</h1> </md-toolbar> <div layout="row" flex> <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('gt-sm')"> </md-sidenav> <div layout="column" flex id="content"> <md-content layout="column" flex class="md-padding"> </md-content> </div> </div> <!-- Angular Material Dependencies --> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.js"></script> <script src="JS/test.js"></script> </body> </html>
我尝试在[方括号] [4]上重新创建这个确切的代码，但是当我在浏览器中运行它时，它不起作用。
Is there something else that I have to do on my code?
我的代码还有其他什么吗？
2 个解决方案
解决方案1
2 已采纳 2015-02-17 14:49:22
I'm having trouble understanding exactly what isn't working for you, but as a note, if you are viewing this page from your local file system, you will need to specify http:// or https:// when referencing your external resources. 我无法确切地了解哪些内容对您不起作用，但请注意，如果您从本地文件系统查看此页面，则需要在引用外部时指定http://或https://资源。
Currently all of your assets are being referenced like this: //ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css 目前，您的所有资产都被引用如下： //ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css
This might be keeping angular and everything else from loading into your page. 这可能是保持角度和其他一切从加载到您的页面。
More explanation 更多解释
As mentioned in the comments, what you are using is called a Protocol-relative URL . 正如评论中所提到的，您使用的是称为协议相对URL 。
If the browser is viewing that current page in through HTTPS, then it'll request that asset with the HTTPS protocol, otherwise it'll typically* request it with HTTP.
The article also mentions: 文章还提到：
*Of course, if you're viewing the file locally, it'll try to request the file with the file:// protocol.
解决方案2
1 2015-02-17 14:48:44
使用Chrome，打开开发人员工具（F12）并验证是否正确加载了js和css文件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.