Question

我正在尝试运行here处给出的角度材质示例。我试过以下示例，但它不适合我。通过在控制台中跟随错误

错误：未捕获错误：[$ injector：modulerr]由于以下原因导致无法实例化模块StarterApp：错误：[$ injector：nomod]模块＆＃39; StarterApp＆＃39;不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

我的代码在

下面

的test.html 这是html文件内容

import paho.mqtt.client as mqtt

# The callback for when the client receives a CONNACK response from the server.
def on_connect(client, userdata, flags, rc):
    print("Connected with result code "+str(rc))

    # Subscribing in on_connect() means that if we lose the connection and
    # reconnect then subscriptions will be renewed.
    client.subscribe("hello/world")

# The callback for when a PUBLISH message is received from the server.
def on_message(client, userdata, msg):
    print(msg.topic+"| "+ userdate + " said: "+str(msg.payload))

id = raw_input('username: ')

client = mqtt.Client(id)


client.on_connect = on_connect
client.on_message = on_message

client.connect_async("192.168.0.24", 1883, 60)

# Blocking call that processes network traffic, dispatches callbacks and
# handles reconnecting.
# Other loop*() functions are available that give a threaded interface and a
# manual interface.
client.loop_forever()

test.js 文件内容

<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}})">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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.css

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

这是什么问题？为什么它不适合我

Answer 1

问题是你有这个：

<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}}从未定义过。这似乎是示例源代码中的一个错误。

Angular Material Slider示例不起作用

1 个答案: