我正试图运行在下面给出的angular material例子。此处.我已经尝试了下面的例子，但它是不为我工作。通过以下错误在控制台
错误: 未捕获错误。[$injector:modulerr] 未能实例化模块StarterApp，原因是：错误。[$injector:nomod] 模块'StarterApp'不可用！你拼错了模块名或者忘记加载它。你或者拼错了模块名，或者忘记加载它。如果注册一个模块，确保你指定依赖关系作为第二个参数。
我的代码如下
test.html这是html文件内容
<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css">
<link rel="stylesheet" href="test.css">
<meta name="viewport" content="initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.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-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
<script src="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
<script src="test.js"></script>
</head>
<body layout="column" ng-controller="AppCtrl">
<div ng-controller="AppCtrl">
<md-content style="margin: 16px; padding:16px">
<h3>
RGB <span ng-attr-style="border: 1px solid #333; background: rgb({{color.red}},{{color.green}},{{color.blue}})"> </span>
</h3>
<div layout>
<div flex="10" layout layout-align="center center">
<span class="md-body-1">R</span>
</div>
<md-slider flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider" class>
</md-slider>
<div flex="20" layout layout-align="center center">
<input type="number" ng-model="color.red" aria-label="red" aria-controls="red-slider">
</div>
</div>
<div layout>
<div flex="10" layout layout-align="center center">
<span class="md-body-1">G</span>
</div>
<md-slider flex ng-model="color.green" min="0" max="255" aria-label="green" id="green-slider" class="md-accent">
</md-slider>
<div flex="20" layout layout-align="center center">
<input type="number" ng-model="color.green" aria-label="green" aria-controls="green-slider">
</div>
</div>
<div layout>
<div flex="10" layout layout-align="center center">
<span class="md-body-1">B</span>
</div>
<md-slider flex ng-model="color.blue" min="0" max="255" aria-label="blue" id="blue-slider" class="md-primary">
</md-slider>
<div flex="20" layout layout-align="center center">
<input type="number" ng-model="color.blue" aria-label="blue" aria-controls="blue-slider">
</div>
</div>
<h3>Rating: {{rating}}/5 - demo of theming classes</h3>
<div layout>
<div flex="10" layout layout-align="center center">
<span class="md-body-1">default</span>
</div>
<md-slider flex md-discrete ng-model="rating1" step="1" min="1" max="5" aria-label="rating">
</md-slider>
</div>
<div layout>
<div flex="10" layout layout-align="center center">
<span class="md-body-1">md-warn</span>
</div>
<md-slider flex class="md-warn" md-discrete ng-model="rating2" step="1" min="1" max="5" aria-label="rating">
</md-slider>
</div>
<div layout>
<div flex="10" layout layout-align="center center">
<span class="md-body-1">md-primary</span>
</div>
<md-slider flex class="md-primary" md-discrete ng-model="rating3" step="1" min="1" max="5" aria-label="rating">
</md-slider>
</div>
<h3>Disabled</h3>
<md-slider ng-model="disabled1" ng-disabled="true" aria-label="Disabled 1"></md-slider>
<md-slider ng-model="disabled2" ng-disabled="true" aria-label="Disabled 2"></md-slider>
<h3>Disabled, Discrete</h3>
<md-slider ng-model="disabled1" ng-disabled="true" step="3" md-discrete min="0" max="10" aria-label="Disabled discrete 1"></md-slider>
<md-slider ng-model="disabled2" ng-disabled="true" step="10" md-discrete aria-label="Disabled discrete 2"></md-slider>
</md-content>
</div>
<!-- Angular Material Dependencies -->
</body>
</html>
test.js文件内容
angular.module('sliderDemo1', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.color = {
red: Math.floor(Math.random() * 255),
green: Math.floor(Math.random() * 255),
blue: Math.floor(Math.random() * 255)
};
$scope.rating1 = 3;
$scope.rating2 = 2;
$scope.rating3 = 4;
$scope.disabled1 = 0;
$scope.disabled2 = 70;
});
测试.css
.sliderdemoBasicUsage input[type="number"] {
text-align: center; }
这里有什么问题，为什么对我无效？
问题是你有这个。
<html lang="en" ng-app="StarterApp">
还有这个
angular.module('sliderDemo1'
要么它们都应该是StarterApp，要么它们都应该是sliderDemo1。
<html lang="en" ng-app="StarterApp">
angular.module('StarterApp'
或者...
<html lang="en" ng-app="sliderDemo1">
angular.module('sliderDemo1'
另外，请注意HTML的引用 {{rating}} 从来没有定义过。这似乎是这个例子的源代码中的一个错误。