Я следовал учебнику по AngularJS и другому учебнику по Angular Material. Теперь я хотел использовать Angular Material в своем проекте AngularJS.
Однако я обнаружил, что после добавления «ngMaterial» к зависимостям приложение прерывается. Я также использую Brackets, чтобы смотреть его вживую, и, конечно же, каждый раз, когда я нажимаю «Сохранить» после добавления «ngMaterial», он ломается. Я попытался изменить, когда я его ввожу, а также изменить порядок загрузки в файле HTML.
Ниже приведен код для HTML, app.js и controller.js. Я ценю любое руководство!
--EDIT-- Я добавил ошибку консоли, как указано ниже. Обратите внимание, что если я удалю ngMaterial из своего app.js, ошибок консоли не будет.
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;
}
});
}]);
ОШИБКА КОНСОЛИ
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
