How to add angular-material into an existing plunker project?

Question

I am following the README of angular-material where the last step of settup is:

Once you have all the necessary assets installed, add ngMaterial as a dependency for your app: angular.module('myApp', ['ngMaterial']);

However...as soon as I added the ngMaterial dependency, my plunker stops running angular expressions:"script.js on plunker".

How can I use angular-material in plunker project? Or did I make a rookie mistake?

EDIT: I can retrieve angular-material with both http and https from my browser, but if I am using an online code sandbox...ie: I can't use angular-material using stackoverflow snippet

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

Did you tried using https instead of http when including angular-material script? It appear to be the problem with the plunker on the link you provided. — Italo Ayres, Mar 08 '16 at 23:27
it seems that you are correct, using **https** does solve my problem, but using http is the default behavior when I added angular-material with plunker's external library loader — watashiSHUN, Mar 08 '16 at 23:34
It appears to be a plunkr issue itself: **Mixed Content: The page at 'https://run.plnkr.co/4IjH0cvvFmQ3mHdA/' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js'. This request has been blocked; the content must be served over HTTPS.** — Italo Ayres, Mar 08 '16 at 23:40

score 0 · Answer 1 · answered Mar 09 '16 at 00:14

hmm...after I downloaded the zip file from plunker and debugged it locally, here is the fix:

instead of using the default external library loader of plunker, you need to replace it with the following:

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

How to add angular-material into an existing plunker project?

1 Answers1