I new to angular js.我正在尝试使用带有材料库的angularjs创建一个应用程序，并且正在使用ui-router进行路由。但是以下错误不断弹出：
未捕获错误： [$injector：模块rr] 无法实例化模块。
这是我的代码：
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>
和 JS =>
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();
};
}
});
该错误是由使用不同版本的 angularjs 和 angular-animate 引起的。在下面的示例中，我用 1.5.5 更改了它们，它现在可以工作了。
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();
};
}
});<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>