Question

我遵循了关于AngularJS的教程和另一篇关于Angular Material的教程。我现在想在AngularJS项目中使用Angular Material。

然而，我发现一旦我添加了＆ng; ngMaterial＆＃39;应用程序中断的依赖项。我也在使用Brackets进行实时观看，而且每次点击“添加＆ng; ngMaterial＆＃39;它打破了。当我注入它以及更改HTML文件中的加载顺序时，我尝试改变。

以下是HTML，app.js和controller.js的代码。我感谢任何指导！

- EDIT-- 我按照下面的要求添加了控制台错误。请注意，如果我从app.js中删除ngMaterial，则表示没有控制台错误。

HTML

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8"> 
<title>Angular Material</title>
<!-- MATERIAL STYLESHEET -->
<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css"> 

<!-- AngularJS Libraries -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-animate.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>


<!-- Your application bootstrap  -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

<!-- ICON SET -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/angular-material-icons.min.js"></script>

</head>

<body>
  <div class="main" ng-view>

  </div>
</body>

</html>

app.js

  var myApp = angular.module('myApp', [
    'ngMaterial',
    'ngRoute',
    'artistControllers'

  ]);

myApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/list', {
    templateUrl: 'partials/list.html', //The actual library link
    controller: 'ListController'
  }).
  when('/details/:itemId', {
    templateUrl: 'partials/details.html',
    controller: 'DetailsController'
  }).
  otherwise({
    redirectTo: '/list'
  });
}]);

controllers.js

var artistControllers = angular.module('artistControllers', ['ngAnimate']); 

artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http){
  $http.get('js/data.json').success(function(data) {
    $scope.artists = data;
    $scope.artistOrder = 'name';
  });
}]);

artistControllers.controller('DetailsController', ['$scope', '$http','$routeParams', function($scope, $http, $routeParams){
  $http.get('js/data.json').success(function(data) {
    $scope.artists = data;
    $scope.whichItem = $routeParams.itemId; //$routeParams looks at the parameters in when (). In This case it's when on details:ItemId in the app.js file. Specifies which page to route to on a click.

    //Slider
    if ( $routeParams.itemId > 0 ){
        $scope.prevItem = Number($routeParams.itemId)-1; //Need number so it doesn't become string
    }else{
        $scope.prevItem = $scope.artists.length-1;
    }

    if ( $routeParams.itemId < $scope.artists.length-1 ){
        $scope.nextItem = Number($routeParams.itemId)+1;
    }else{
        $scope.nextItem = 0;
    }

  });
}]);

CONSOLE ERROR

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.9/$injector/modulerr?p0=myApp&p1=Error%3A%2…%2Flocalhost%2Fangularmaterial%2Flib%2Fangular%2Fangular.min.js%3A32%3A232)
    at http://localhost/angularmaterial/lib/angular/angular.min.js:6:449
    at http://localhost/angularmaterial/lib/angular/angular.min.js:30:1
    at Array.forEach (native)
    at q (http://localhost/angularmaterial/lib/angular/angular.min.js:7:274)
    at e (http://localhost/angularmaterial/lib/angular/angular.min.js:29:115)
    at $b (http://localhost/angularmaterial/lib/angular/angular.min.js:32:232)
    at c (http://localhost/angularmaterial/lib/angular/angular.min.js:17:431)
    at Zb (http://localhost/angularmaterial/lib/angular/angular.min.js:18:140)
    at Tc (http://localhost/angularmaterial/lib/angular/angular.min.js:17:215)
    at http://localhost/angularmaterial/lib/angular/angular.min.js:201:117
(anonymous) @ angular.min.js:6
(anonymous) @ angular.min.js:30
q @ angular.min.js:7
e @ angular.min.js:29
$b @ angular.min.js:32
c @ angular.min.js:17
Zb @ angular.min.js:18
Tc @ angular.min.js:17
(anonymous) @ angular.min.js:201
a @ angular.min.js:131
(anonymous) @ angular.min.js:27
q @ angular.min.js:7
c @ angular.min.js:27

Answer 1

这里的问题是您错误地引用了 player.play() ，请按以下顺序进行，

angular-aria.js

<强> DEMO

ngMaterial和ngRoute Together Break App

1 个答案: