将 ngMaterial 与 ngRoute 一起使用时出错

Question

我正在学习 AngularJS + AngularMaterial，我遇到了一个奇怪的问题。

我想在我的项目中同时使用模块 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')
        });
    }
});

Answer 1

如果您点击进入错误，angular 错误页面会提到您需要使用 ngRoute 库，我在您的 html 代码中看不到它。

https://docs.angularjs.org/api/ngRoute

将 ngMaterial 与 ngRoute 一起使用时出错

Error when using ngMaterial with ngRoute

angularjs

angular-material

HTML 文件

JS 文件