从角度材料设计开始答案

【问题标题】：Starting with angular material design从角度材料设计开始
【发布时间】：2015-02-18 03:09:54
【问题描述】：

我已经尝试使用 Angular Material Design 一个星期了，但没有成功。我花时间研究 HTML/CSS、JavaScript 和 AngularJS 以了解出了什么问题，但我仍然不知道问题出在哪里。

基本上我尝试的是Google Angular Material Design 网站的“入门”部分，但没有一个与我合作：

我试图复制它的Github Starter Project，但结果如下：

编辑：抱歉，我的帐户是新帐户，我还不能发布图片，但这是我网站的打印屏幕，甚至没有运行角度！[我的结果][3]。 p>

我也尝试复制其简单的 Hello World 示例，但遇到了非常相似的问题。

我不知道我做错了什么，但我认为这很简单。我感觉我没有导入正确的 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>

我尝试在 [brackets][4] 上重新创建这个确切的代码，但是当我在浏览器中运行它时，它不起作用。我的代码还有其他事情要做吗？

【问题讨论】：

如果您在 plunkr 中运行代码，究竟是什么不工作？ plnkr.co/edit/GqHyyJQnvNria6JdU1dN?p=preview

标签： javascript html css angularjs

【解决方案1】：

我无法准确理解哪些内容不适合您，但请注意，如果您从本地文件系统查看此页面，则在引用您的文件时需要指定 http:// 或 https://外部资源。

目前您的所有资产都被这样引用：//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css

这可能会阻止 Angular 和其他所有内容加载到您的页面中。

更多解释