如何將角度材料添加到現有的plunker項目中？

我下面角材料的README，其中settup的最後一個步驟是：如何將角度材料添加到現有的plunker項目中？

一旦你安裝了所有必要的資源，添加ngMaterial爲您的應用程序的依賴： angular.module('myApp', ['ngMaterial']);

但是......只要我添加了ngMaterial依賴，我plunker停止運行的角度表達："script.js on plunker"。

如何使用角材料plunker項目？還是我犯了一個菜鳥的錯誤？

編輯：我可以從我的瀏覽器檢索角的材料與HTTP和HTTPS，但如果我使用一個在線代碼沙箱...即：我不能使用計算器片斷

//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="[email protected]" 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="[email protected]" 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="[email protected]" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular.min.js "></script> 
 
    <script data-require="[email protected]" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular-route.min.js "></script> 
 
    <script data-require="[email protected]" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular-messages.min.js "></script> 
 
    <script data-require="[email protected]" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular-animate.min.js"></script> 
 
    <script data-require="[email protected]" 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>

使用角材

來源

2016-03-08 watashiSHUN

你有沒有嘗試過使用HTTPS，而不是http包括角料腳本時？這似乎是你提供的鏈接上的重擊者的問題。 –

看來你是正確的，使用** ** HTTPS不解決我的問題，但使用HTTP是，當我加入角材料plunker的外部庫裝載 – watashiSHUN

這似乎是一個plunkr問題本身的默認行爲：**混合內容：在「https://run.plnkr.co/4IjH0cvvFmQ3mHdA/」加載頁面通過HTTPS，但要求一個不安全的腳本「http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/角material.min.js'。此請求已被阻止;內容必須通過HTTPS提供。** –

嗯...我下載後從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>

來源

2016-03-09 00:14:45 watashiSHUN

如何將角度材料添加到現有的plunker項目中？

回答

相關問題