Angular JS:未捕获错误:[$ injector:modulerr]无法实例化模块

时间:2017-05-23 09:26:12

标签: javascript angularjs

我是角度js的新手。我正在尝试使用带物质库的angularjs创建一个应用程序,我正在使用ui-router进行路由。 但是跟随错误不断出现:

未捕获错误:[$ injector:modulerr]无法实例化模块。

这是我的代码:

HTML =>

nn.Sequential(
  nn.LSTM(inputSize, hiddenSize, 1, batch_first=True),
  # what to put here to retrieve last output of LSTM ?,
  nn.Linear(hiddenSize, classe_n))

和JS =>

<body ng-app="SalesApp">
  <nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
    </div>
    <ul class="nav navbar-nav">
    <li><a ui-sref="one">one</a></li>
    <li><a ui-sref="two">two</a></li>
    <li><a ui-sref="three">three</a></li>
  </ul>
</nav>
<div ng-controller="AppCtrl" layout="column" style="height: 500px;" >
<section layout="row" flex>
<md-sidenav class="md-sidenav-left" md-component-id="left" md-disable-backdrop md-whiteframe="4">

  <md-toolbar class="md-theme-indigo">
    <h1 class="md-toolbar-tools">Disabled Backdrop</h1>
  </md-toolbar>

  <md-content layout-margin>
    <p>
      This sidenav is not showing any backdrop, where users can click on it,  
      to close the sidenav.
    </p>
    <md-button ng-click="toggleLeft()" class="md-accent">
      Close this Sidenav
    </md-button>
  </md-content>
</md-sidenav>
<md-content flex layout-padding>
  <div layout="column" layout-align="top center">
    <p>
      Developers can also disable the backdrop of the sidenav.<br/>
      This will disable the functionality to click outside to close the 
   sidenav.
    </p>
    <div>
      <md-button ng-click="toggleLeft()" class="md-raised">
        Toggle Sidenav
      </md-button>
    </div>
  </div>
  </md-content>
  </section>
 </div>
<!-- MAIN CONTENT --> 
<div class="container">
<div ui-view></div>
</div>

<!-- Angular Material requires Angular.js Libraries -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="js/app.js"></script>
 </body>

1 个答案:

答案 0 :(得分:0)

错误是由使用angularjsangular-animate的不同版本引起的。在下面的示例中,我使用 1.5.5 更改了它们并且它现在正在工作。

&#13;
&#13;
var SalesApp = angular.module('SalesApp', ['ui.router', 'ngMaterial']);
SalesApp.config(function($stateProvider, $urlRouterProvider) {
  var oneState = {
    name: 'one',
    url: '/one',
    template: 'one.html'
  }

  var twoState = {
    name: 'two',
    url: '/two',
    template: 'two.html'
  }
  var threeState = {
    name: 'three',
    url: '/three',
    template: 'three.html'
  }

  $stateProvider.state(oneState);
  $stateProvider.state(twoState);
  $stateProvider.state(threeState);

});
SalesApp.controller('AppCtrl', function($scope, $timeout, $mdSidenav) {
  $scope.toggleLeft = buildToggler('left');
  $scope.toggleRight = buildToggler('right');

  function buildToggler(componentId) {
    return function() {
      $mdSidenav(componentId).toggle();
    };
  }
});
&#13;
<body ng-app="SalesApp">
  <nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a ui-sref="one">one</a></li>
      <li><a ui-sref="two">two</a></li>
      <li><a ui-sref="three">three</a></li>
    </ul>
  </nav>
  <div ng-controller="AppCtrl" layout="column" style="height: 500px;">
    <section layout="row" flex>
      <md-sidenav class="md-sidenav-left" md-component-id="left" md-disable-backdrop md-whiteframe="4">

        <md-toolbar class="md-theme-indigo">
          <h1 class="md-toolbar-tools">Disabled Backdrop</h1>
        </md-toolbar>

        <md-content layout-margin>
          <p>
            This sidenav is not showing any backdrop, where users can click on it, to close the sidenav.
          </p>
          <md-button ng-click="toggleLeft()" class="md-accent">
            Close this Sidenav
          </md-button>
        </md-content>
      </md-sidenav>
      <md-content flex layout-padding>
        <div layout="column" layout-align="top center">
          <p>
            Developers can also disable the backdrop of the sidenav.<br/> This will disable the functionality to click outside to close the sidenav.
          </p>
          <div>
            <md-button ng-click="toggleLeft()" class="md-raised">
              Toggle Sidenav
            </md-button>
          </div>
        </div>
      </md-content>
    </section>
  </div>
  <!-- MAIN CONTENT -->
  <div class="container">
    <div ui-view></div>
  </div>

  <!-- Angular Material requires Angular.js Libraries -->
  <script src="https://code.angularjs.org/1.5.5/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</body>
&#13;
&#13;
&#13;