Question

我似乎无法将ngMaterial作为一行简单的hello world应用程序布局。我没有看到控制台中的任何错误，我做错了很明显吗？我希望下面的布局布局，水平布拉。

＆＃13;

<!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>

＆＃13;

Answer 1

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

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

我将angular.module语句提取到外部app.js文件（不需要，但只是没有混淆），并且还用一个来自angulars网站的css替换了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

ngMaterial flex布局无法正常工作

1 个答案: