0
Ich folgte ein Tutorial zu AngularJS und ein weiteres Tutorial über Angular Material. Ich wollte jetzt Angular Material in meinem AngularJS-Projekt verwenden.ngMaterial und ngRoute Together Break App
Allerdings habe ich gefunden, sobald ich 'ngMaterial' zu den Abhängigkeiten die App bricht. Ich benutze Brackets, um es live zu sehen, und natürlich jedes Mal, wenn ich nach dem Hinzufügen von 'ngMaterial' auf Speichern klicke, bricht es ab. Ich habe versucht, zu ändern, wenn ich es injiziere sowie die Reihenfolge der Ladung in der HTML-Datei ändern.
Unten ist der Code für die HTML, app.js und controller.js. Ich schätze jede Anleitung!
--EDIT-- Ich fügte den Konsolenfehler wie unten beschrieben hinzu. Bitte beachten Sie, wenn ich ngMaterial von meiner app.js entferne, dann gibt es keine Konsolenfehler.
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;
}
});
}]);
KONSOLE 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
Können Sie uns zeigen, was passiert beim Hinzufügen von 'ngMaterial' (wie Konsolenfehler, etc.) – Edric
Sicher, ich habe den Konsolenfehler zu meinem Original hinzugefügt Frage. Es bricht die App durch einen völlig leeren Bildschirm, da index.html nicht mehr geladen wird. – user5854648
Versuchen Sie, die Reihenfolge Ihrer Skripts in Ihrem ** HTML ** zu ändern. Es lädt gerade 'js/app.js' und dann' js/controllers.js' '. Laden ** Controller vor App ** und sagen uns, ob das etwas ändert. – Alisson