Question

这段代码只是用AngularJS指令打印“Hello world”，但是当我在浏览器中加载页面时，页面是空白的。

这是HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>ngClassifieds</title>
    </head>
    <body ng-app="ngClassifieds" ng-controller="classifiedsCtrl">

        <hello-world></hello-world>

        <script src="node_modules/angular/angular.js"></script>
        <script src="node_modules/angular-animate/angular-animate.js"></script>
        <script src="node_modules/angular-aria/angular-aria.js"></script>
        <script src="node_modules/angular-material/angular-material.js"></script>
        <script src="scripts/app.js"></script>
        <script src="components/classifieds.ctr.js"></script>
    </body>
</html>

app.js：

angular
.module("ngClassifieds", ["ngMaterial"])
.config(function($mdThemingProvider) {

    $mdThemingProvider.theme('default')
    .primaryPalette('teal')
    .accentPalette('orange');
})
.directive("helloWorld", function() {
    return {
        template : "<h1>Hello world!</h1>"
    }
});

脚本元素中的路径是正确的，就我而言没有错别字，我很确定我的端口没有问题。对于我做错了什么，我感激不尽！

Answer 1

您缺少角度材质的参考，因为它是一个依赖项，

<强>样本

angular
.module("ngClassifieds", ["ngMaterial"])
.directive("helloWorld", function() {
    return {
        template : "<h1>Hello world!</h1>"
    }
});

<!DOCTYPE html>
<html>
    <head>
        <title>ngClassifieds</title>
       <link data-require="angular-material@0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="angular.js@*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script data-require="angular-material@0.11.0" data-semver="0.11.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
  <script data-require="angular-animate@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
  <script data-require="angular-aria@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
    </head>
    <body ng-app="ngClassifieds">
        <hello-world></hello-world>       
    </body>
</html>

Answer 2

您没有加载 Angular-material.js 文件

.module("ngClassifieds", ["ngMaterial"])

------------------------------------- ^

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


<!-- Angular Material Javascript now available via Google CDN; version 1.0.7 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>

参考Angular-Material Git-Hub page了解更多信息

Hello World AngularJS指令坏了

2 个答案: