Angular 材质 + Phonegap/Cordova答案

【问题标题】：Angular Material + Phonegap/CordovaAngular 材质 + Phonegap/Cordova
【发布时间】：2015-02-16 18:21:46
【问题描述】：

我正在尝试使用 google 的 Material Design（Angular Material）来开发一个使用 phonegap 的应用程序（所以我假装它可以在 iOS 或其他操作系统中工作）

为什么这段代码不起作用：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="cordova.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
</head>
<body>

    <!-- Angular Material Dependencies -->
    <script src="http://cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>

    <!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
    <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
<md-button>
  Button
</md-button>
<md-button href="http://google.com" class="md-button-colored">
  I'm a link
</md-button>
<md-button ng-disabled="true" class="md-colored">
  I'm a disabled button
</md-button>
  </body>
</html>

THE PLUNKER

对于手机/电脑，它只是显示为 plkr = 纯文本 =|

我做错了什么，因为它是教程中的 ctrl c + ctrl v：

任何解决方案或修复？

还没有人使用 phonegap + angular material 吗？

【问题讨论】：

您好，这不是答案，您在真机上测试过角材料吗？如果是，速度如何？

标签： javascript angularjs html cordova material-design

【解决方案1】：

解决方案：

1) 将所有 src/import 移动到 <HEAD>

和

2) 我忘了补充：

<script>
angular.module('myApp', [ 'ngMaterial' ]);
</script>

比：

 <div ng-app="myApp" layout="vertical">
</div>

现在一切正常；）

【讨论】：

您应该将脚本向下移动到

【解决方案2】：

不要使用网络源加载Angular-Material，加载项目内的文件。

您可以在 Bower 或 Npm 上获得它。

您也可以使用种子： https://github.com/marioaleogolsat/cordova-angular-angularMaterial-seed

【讨论】：

【解决方案3】：

定义角度材料依赖关系在创建你的角度模块：

  <html>
  <head>
   <script type="text/javascript" src="cordova.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">

        <!-- Angular Material Dependencies -->
        <script src="http://cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>

        <!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
        <script src="http://ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
    <script>
       angular.module('myApp', [ 'ngMaterial' ]);
    </script>
    </head>
    <body ng-app="myApp">


        <div layout="vertical">

    <md-button>
      Button
    </md-button>
    <md-button href="http://google.com" class="md-button-colored">
      I'm a link
    </md-button>
    <md-button ng-disabled="true" class="md-colored">
      I'm a disabled button
    </md-button>
    </div>
      </body>
    </html>

【讨论】：