Question

我正在关注README角度材料，其中最后一步是：

安装完所有必需资源后，添加ngMaterial作为应用的依赖项： angular.module('myApp', ['ngMaterial']);

然而......一旦我添加了ngMaterial依赖项，我的plunker就会停止运行角度表达式："script.js on plunker"。

如何在plunker项目中使用角度材料？还是我犯了菜鸟错误？

编辑：我可以从我的浏览器中检索带有http和https的角度素材，但是如果我使用的是在线代码沙箱...即：我不能使用使用stackoverflow代码段的angular-material

//I am using https...but following code does not work on stackoverflow
angular.module("myapp",['ngMaterial']).controller("controller",function($scope){$scope.angularexpression="controller is running";});

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <link data-require="angular-material@1.0.0" data-semver="1.0.0" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" />
    <script data-require="angular-material@1.0.0" data-semver="1.0.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
    <script data-require="angular-material@1.0.0" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular.min.js "></script>
    <script data-require="angular-material@1.0.0" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular-route.min.js "></script>
    <script data-require="angular-material@1.0.0" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular-messages.min.js "></script>
    <script data-require="angular-material@1.0.0" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular-animate.min.js"></script>
    <script data-require="angular-material@1.0.0" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular-aria.min.js"></script>
  </head>

  <body ng-controller="controller">
    {{angularexpression}}
  </body>

</html>

Answer 1

嗯...我从plunker下载了zip文件并在本地调试后，这是修复：

而不是使用plunker的默认外部库加载器，您需要将其替换为以下内容：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" />
<script src="https://code.angularjs.org/1.4.9/angular.min.js "></script>

// order matters, plunker load material before angular, which will not work

<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular-route.min.js "></script>
<script src="https://code.angularjs.org/1.4.9/angular-messages.min.js "></script>
<script src="https://code.angularjs.org/1.4.9/angular-animate.min.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular-aria.min.js"></script>

如何在现有的plunker项目中添加角度材料？

1 个答案: