如何将角材料添加到现有的 plunker 项目中？答案

【问题标题】：How to add angular-material into an existing plunker project?如何将角材料添加到现有的 plunker 项目中？
【发布时间】：2016-03-09 08:14:45
【问题描述】：

我正在关注 angular-material 的 README，其中设置的最后一步是：

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

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

如何在 plunker 项目中使用 angular-material？还是我犯了菜鸟的错误？

编辑：我可以从浏览器中同时使用 http 和 https 检索角度材料，但如果我使用的是在线代码沙箱...即：我不能使用 stackoverflow sn-p 使用角度材料

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

【问题讨论】：

在包含 angular-material 脚本时，您是否尝试过使用 https 而不是 http？这似乎是您提供的链接上的 plunker 的问题。
看来你是对的，使用 https 确实解决了我的问题，但是当我使用 plunker 的外部库加载器添加 angular-material 时，使用 http 是默认行为
这本身似乎是一个 plunkr 问题：混合内容：“run.plnkr.co/4IjH0cvvFmQ3mHdA”处的页面是通过 HTTPS 加载的，但请求了一个不安全的脚本“ajax.googleapis.com/ajax/libs/angular_material/1.0.0/…”。此请求已被阻止；内容必须通过 HTTPS 提供。

标签： javascript angularjs angular-material plunker

【解决方案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>

【讨论】：