2016-06-24 3 views
2

したがって、角度材料マテリアルの紹介hereを紹介します。私が知る限り、私は手紙の指示に従っています。アンギュラマテリアルの導入が正常に動作しないかレンダリングされない

スタックオーバーフローとGoogleの詳細については、CNDリンクが間違っていると思われますが、私は同じ結果を得ています。私はリンクを掲示するつもりですが、私はここで新しいです。

が、私はエラーを取得していないとVisual Studio

2015を使用している場合はChromeでページを開くと、私はこれを取得のdevのツールを引き上げ: Errors when inspecting from Chrome

私も両方のNPMからそれらをインストールしようとしましたそれに応じてリンクを変更することは無駄です。

私はプランカを投稿したいが、もう一度、私は新しいです。ここで

は私のコード角度コードです:

<!DOCTYPE html> 
<html ng-app="ReconciliationWebApp"> 
<head> 
    <!-- Angular Material style sheet --> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css"> 
</head> 
<body ng-controller="MainCtrl"> 
    <!--Content--> 
    <md-toolbar> 
     <div class="md-toolbar-tools"> 
      <h2>Reconciliation Forms</h2> 
     </div> 
    </md-toolbar> 
    <md-content> 
     <div layout="row" layout-align="center start"> 
      <div layout-fill> 
       <md-card> 
        <md-card-title> 
         <md-card-title-text> 
          <span class="md-headline">Hello!</span> 
         </md-card-title-text> 
        </md-card-title> 
        <md-card-content> 
         <p> 
          Whatever you do, do not click the button below. 
         </p> 
        </md-card-content> 
        <md-card-actions layout="row" layout-align="start"> 
         <md-button ng-click="releaseKraken()" class="md-primary md-raised">I Dare You!</md-button> 
        </md-card-actions> 
       </md-card> 
      </div> 
     </div> 
    </md-content> 

    <!-- Angular Material Dependencies --> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">  </script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script> 

    <!-- Angular Material Library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script> 
    <script src="../../Scripts/Tabs.js" charset="utf-8"></script> 
    <!-- Your application bootstrap --> 
    <script type="text/javascript"> 
     angular.module('ReconciliationWebApp', ['ngMaterial']); 
    </script> 
</body> 
</html> 

そして、ここでは私のJavascriptです:

angular.module('ReconciliationWebApp', ['ngMaterial']) 
    .controller('MainCtrl', function ($scope, $mdDialog) { 
    $scope.hello = 'Hello Angular Material'; 

    $scope.releaseKraken = function() { 
     $mdDialog.show(
      $mdDialog.alert({ 
       title: 'Danger', 
       textContent: 'You asked for it!', 
       ok: 'Run!' 
      }) 
     ); 
     } 
    }) 
; 

誰も私が間違ってやっているものを私に伝えることができますか?

私は自分自身について十分に説明してくれることを願っていますが、私が助けてくれるものがあれば教えてください!

+0

オム私はすでに1.0.9であり、そして多分あなたの依存性の要素が最新バージョンからのもの、角材料のバージョンが古すぎると思います。 –

+0

htmlの 'script'タグであなたのモジュールを定義したので、あなたは別のファイルを探すことはなく、もし可能なら最新のライブラリを使用しようとします。 – nextt1

答えて

1

別の場所でスクリプトファイルを使用している場合は、そのファイルへの参照をインデックスページに追加する必要があります。あなたのコードは完全に正常に動作します。ここでは、作業plunkerがある:http://plnkr.co/edit/Ux1pOFgvQgipMqzvfs9X?p=preview

<!DOCTYPE html> 
<html ng-app="ReconciliationWebApp"> 
<head> 
    <!-- Angular Material style sheet --> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css"> 
</head> 
<body ng-controller="MainCtrl"> 
    <!--Content--> 
    <md-toolbar> 
     <div class="md-toolbar-tools"> 
      <h2>Reconciliation Forms</h2> 
     </div> 
    </md-toolbar> 
    <md-content> 
     <div layout="row" layout-align="center start"> 
      <div layout-fill> 
       <md-card> 
        <md-card-title> 
         <md-card-title-text> 
          <span class="md-headline">Hello!</span> 
         </md-card-title-text> 
        </md-card-title> 
        <md-card-content> 
         <p> 
          Whatever you do, do not click the button below. 
         </p> 
        </md-card-content> 
        <md-card-actions layout="row" layout-align="start"> 
         <md-button ng-click="releaseKraken()" class="md-primary md-raised">I Dare You!</md-button> 
        </md-card-actions> 
       </md-card> 
      </div> 
     </div> 
    </md-content> 

    <!-- Angular Material Dependencies --> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">  </script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script> 

    <!-- Angular Material Library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script> 
    <script src="../../Scripts/Tabs.js" charset="utf-8"></script> 
    <!-- Your application bootstrap --> 
    <script type="text/javascript"> 
     angular.module('ReconciliationWebApp', ['ngMaterial']) 
    .controller('MainCtrl', function ($scope, $mdDialog) { 
    $scope.hello = 'Hello Angular Material'; 

    $scope.releaseKraken = function() { 
     $mdDialog.show(
      $mdDialog.alert({ 
       title: 'Danger', 
       textContent: 'You asked for it!', 
       ok: 'Run!' 
      }) 
     ); 
     } 
    }) 
; 
    </script> 
</body> 
</html> 
+0

これはうまくいった!私は基本的に言ったように、コントローラ(私は何らかの理由でindex.htmlにその一部を持っていました)をスクリプトファイルに移動させ、index.htmlで参照しました。 – Jand

+0

うれしい私は助けることができる:) –

関連する問題