Javascript Angular JS:Uncaught错误：[$injector:modulerr]未能实例化模块_Javascript_Angularjs

Javascript Angular JS:Uncaught错误：[$injector:modulerr]未能实例化模块

javascript angularjs

Javascript Angular JS:Uncaught错误：[$injector:modulerr]未能实例化模块,javascript,angularjs,Javascript,Angularjs,我是angularjs新手。我正在尝试使用angularjs和材质库创建一个应用程序，并使用ui路由器进行路由。但以下错误不断出现：未捕获错误：[$injector:modulerr]未能实例化模块这是我的密码： HTML=> <body ng-app="SalesApp"> <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header">

我是angularjs新手。我正在尝试使用angularjs和材质库创建一个应用程序，并使用ui路由器进行路由。但以下错误不断出现：

未捕获错误：[$injector:modulerr]未能实例化模块

这是我的密码：

HTML=>

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

该错误是由于使用不同版本的

angularjs

和

angular animate

造成的。在下面的示例中，我用1.5.5对它们进行了更改，现在它开始工作了

var SalesApp=angular.module（'SalesApp'，['ui.router'，'ngMaterial']）；
SalesApp.config（函数（$stateProvider，$urlRouterProvider）{
var oneState={
名称：“一”，
url:“/one”，
模板：“one.html”
}
变量twoState={
姓名:"两",，
url:“/two”，
模板：“two.html”
}
var三状态={
姓名:"三",，
url:“/three”，
模板：“three.html”
}
$stateProvider.state（oneState）；
$stateProvider.state（twoState）；
$stateProvider.state（三州）；
});
SalesApp.controller（'AppCtrl'，函数（$scope、$timeout、$mdSidenav）{
$scope.toggleft=buildToggler（'left'）；
$scope.toggleRight=buildToggler（'right'）；
函数buildToggler（componentId）{
返回函数（）{
$mdSidenav（componentId）.toggle（）；
};
}
});

安格拉鲁路由器

一个
两个
三

残障背景

此sidenav不显示任何背景，用户可以单击它来关闭sidenav。

关闭这个侧导航

开发者也可以禁用sidenav的背景。
这将禁用单击外部关闭sidenav的功能。

切换侧导航
单击控制台中的链接，它将告诉您哪个模块加载失败。嗨，Deblaton，我的应用程序SalesApp没有加载。谢谢这一行模板：“two.html”
应该是模板URL:“two.html”
。你试过这个改变吗？与所有其他模板相同。请注意，您使用的是angular1.2.13
，但模块是1.5.5。你应该在他们中间使用相同的版本好的，非常感谢@Qurimmo，这解决了问题。谢谢你的语气。。。成功了
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();
   };
 }
});