Question

所以我正在浏览Angular Materials网站here中的介绍。据我所知，我按照信中的指示行事。

更多关于堆栈溢出和谷歌似乎表明CND链接是错误的，但我得到了相同的结果。我发布了一个链接，但我是新来的。

我没有收到任何错误并使用Visual Studio 2015

在Chrome中打开页面并启动开发工具时，我得到了以下信息： Errors when inspecting from Chrome

我也尝试从npm和bower安装它们并相应地更改链接无效。

我发布了一个傻瓜，但我又是一个新人。

这是我的代码Angular代码：

<!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!'
          })
        );
      }
   })
 ;

有谁能告诉我我做错了什么？

我希望我能够很好地解释自己，但请告诉我是否还有其他任何我可以提供帮助的内容！

Answer 1

如果您在其他位置使用脚本文件，则需要在索引页面中添加对该文件的引用。你的代码完全正常。这是工作的掠夺者：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>

角度材料介绍无法正常工作或渲染

1 个答案: