【发布时间】：2017-05-23 09:26:12
【问题描述】：
我是 Angular js 的新手。我正在尝试使用带有材质库的 angularjs 创建一个应用程序，并且我正在使用 ui-router 进行路由。 但是不断弹出以下错误：
未捕获的错误：[$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>
还有 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();
};
}
});
【问题讨论】：
-
点击控制台中的链接，它会告诉你哪个模块加载失败。
-
嗨 Deblaton，我的应用程序 SalesApp 没有加载。谢谢
-
这一行
template: 'two.html'应该是templateUrl: 'two.html'。你试过这个改变吗？所有其他模板都相同 -
那么请注意您使用的是角度
1.2.13，但模块是1.5.5。您应该使用它们之间的相同版本 -
好的，非常感谢@quirimmo，解决了问题。
标签： javascript angularjs