Как добавить угловой материал в существующий проект плунжера?

Я следую README углового материала, где последний шаг урегулирования:

После того, как вы установили все необходимые ресурсы, добавьте ngMaterial в качестве зависимости для вашего приложения: angular.module('myApp', ['ngMaterial']);

Однако... как только я добавил зависимость ngMaterial, мой plunker перестает запускать угловые выражения: "script.js on plunker".

Как я могу использовать угловой материал в проекте плунжера? Или я сделал ошибку новичка?

РЕДАКТИРОВАТЬ: я могу получить угловой материал с http и https из моего браузера, но если я использую изолированную программную среду онлайн кода... т.е.: я не могу использовать угловой материал с помощью фрагмента stackru

//I am using https...but following code does not work on stackru
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>

Источник

1 ответ

Хм... после того, как я скачал 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>
Источник
Другие вопросы по тегам