ngMaterial flex 布局不起作用答案

【问题标题】：ngMaterial flex layout not workingngMaterial flex 布局不起作用
【发布时间】：2016-02-25 00:49:18
【问题描述】：

我似乎无法让 ngMaterial 连续布局一个简单的 hello world 应用程序。我在控制台中没有看到任何错误，很明显我做错了什么吗？我希望下面的内容可以水平布局等等。

<!DOCTYPE html>
<html>
  <head>
      <!-- AngularJS-ngMaterial-->
      <link src='//cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc4/angular-material.css' />
      <link src='//cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc4/angular-material.layouts.css' />
      <!-- /AngularJS-ngMaterial-->
  
  </head>
  <body ng-app='myApp' layout='column'>
      <md-toolbar>
        <h1>Angular Material - Starter</h1>
      </md-toolbar>
      
      <div layout='row'>
        <div flex>
          blag
        </div>
        <div flex>
          blah
        </div>
      </div>
  
      <!-- AngularJS-->
      <script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js'></script>
      <!-- /AngularJS-->
  
      <!-- AngularJS-ngAria-->
      <script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-aria.js'></script>
      <!-- /AngularJS-ngAria-->
  
      <!-- AngularJS-ngAnimate-->
      <script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-animate.js'></script>
      <!-- /AngularJS-ngAnimate-->
  
      <!-- AngularJS-ngMaterial-->
      <script src='//cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc4/angular-material.js'></script>
      <!-- /AngularJS-ngMaterial-->
  
      <script type='text/javascript'>
          angular.module('myApp', ['ngMaterial']);
      </script>
  </body>
</html>

【问题讨论】：

仅供参考 - flex 标签指的是 Apache Flex 问题，而不是 CSS flex 布局问题。

标签： javascript angularjs flexbox

【解决方案1】：

如果您在调试窗口中运行控制台，您将看到此错误：Uncaught ReferenceError: angular is not defined

所以我假设您的导入存在问题。

我将您的 angular.module 语句提取到一个外部 app.js 文件（不需要，但只是为了避免混淆），并将 css 替换为来自 angulars 网站的 css。这是一个工作示例：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
</head>
<body ng-app='myApp' layout='column'>
  <md-toolbar>
    <h1>Angular Material - Starter</h1>
  </md-toolbar>

  <div layout='row'>
    <div flex>
      blag
    </div>
    <div flex>
      blah
    </div>
  </div>
</body>

<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.11.2/angular-material.min.js"></script>
<script src="app.js"></script>

</html>

我使用的CDN来自：https://github.com/angular/material#cdn

【讨论】：

谢谢！我觉得很傻，这只是cdn。奇怪的是，我在控制台的任何地方都没有看到角度异常。感谢您的帮助，它现在正在工作:)
乍一看，我只是在链接标签上失败了。没有 rel + href == 伤心了两天。
哈哈，我们都去过那里。很高兴我能帮上忙！