I am trying to run angular material example given at here. i have tried following example but it is not working for me. through following error in console
Error : Uncaught Error: [$injector:modulerr] Failed to instantiate module StarterApp due to: Error: [$injector:nomod] Module 'StarterApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
My code is below
test.html This is html file content
<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 File content
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;
});
test.css
.sliderdemoBasicUsage input[type="number"] {
text-align: center; }
What is the problem here? and why it is not working for me
The problem is that you have this:
And this:
Either they should both be StarterApp or they should both be sliderDemo1:
Or
Also note that the HTML references
{{rating}}which is never defined. That seems like a mistake in the source code of the example.