3
我正在學習AngularJS + AngularMaterial，並且出現奇怪的問題。使用ngMaterial和ngRoute時出錯
我想在我的項目中同時使用ngRoute和ngMaterial兩個模塊，但是當我注入它們兩個時，出現錯誤：「Error：[$ injector：modulerr]」。它們彼此不兼容？
示例代碼可以在這裏看到：http://codepen.io/anon/pen/OybZve。
HTML文件
<html lang="en" ng-app="AngularClient">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<meta name="viewport" content="initial-scale=1" />
</head>
<body layout="column" ng-controller="AppCtrl">
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
</md-button>
<h1>Hello World</h1>
</div>
</md-toolbar>
<div layout="row" flex>
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
<md-button href="#/">Home</md-button>
<md-button href="#/projects">Projekty</md-button>
<md-button href="#/forum">Forum</md-button>
<md-button href="#/contact">Kontakt</md-button>
</md-sidenav>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
<ng-view></ng-view>
</md-content>
</div>
</div>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.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-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
</body>
</html>
JS文件
var app = angular.module('AngularClient', ['ngRoute', 'ngMaterial']);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: '/static/angularclient/home.html',
controller: 'mainController'
})
.when('/projects', {
templateUrl: '/static/angularclient/projects.html',
controller: 'projectsController'
})
.when('/forum', {
templateUrl: '/static/angularclient/forum.html',
controller: 'forumController'
})
.when('/contact', {
templateUrl: '/static/angularclient/contact.html',
controller: 'contactController'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
}]);
app.controller('contactController', function($scope, $http){
// Send email to site owner
$scope.sendMessage = function(){
$http.post('/api', {
action: 'send_message',
data: {
sender: $scope.sender,
title: $scope.topic,
content: $scope.content
}
})
.success(function(){
console.log('udało się')
})
.error(function(){
console.log('błąd :P')
});
}
});