0

Ich bekomme einen Injektor Fehler, wenn ich angle Bootstrap versuchen. ist hier der Fehler:Angular Bootstrap Injector Fehler

angular.js:13424 Error: [$injector:unpr] http://errors.angularjs.org/1.5.3/$injector/unpr?p0=ui.bootstrapProvider%20%3C-%20ui.bootstrap%20%3C-%20AdminController 
at Error (native) 
at http://localhost:3000/node_modules/angular/angular.min.js:6:416 
at http://localhost:3000/node_modules/angular/angular.min.js:43:7 
at Object.d [as get] (http://localhost:3000/node_modules/angular/angular.min.js:40:270) 
at http://localhost:3000/node_modules/angular/angular.min.js:43:69 
at d (http://localhost:3000/node_modules/angular/angular.min.js:40:270) 
at e (http://localhost:3000/node_modules/angular/angular.min.js:41:1) 
at Object.instantiate (http://localhost:3000/node_modules/angular/angular.min.js:41:364) 
at http://localhost:3000/node_modules/angular/angular.min.js:88:341 
at http://localhost:3000/node_modules/angular-ui-router/release/angular-ui-router.min.js:7:23742 <div class="template ng-scope" ui-view=""> 

Hier ist meine index.html:

<!DOCTYPE html> 
<html lang="en" ng-app="FriendZone"> 
<head> 
<meta charset="UTF-8"> 
<title>Hello</title> 
<link rel="stylesheet"  href="node_modules/bootstrap/dist/css/bootstrap.min.css" /> 
<link rel="stylesheet" href="node_modules/angular-ui-bootstrap/dist/ui-bootstrap-csp.css"> 
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css"> 
<link rel="stylesheet" href="public/stylesheets/style.css"> 
</head> 
<body> 
<div class="template" ui-view></div> 

<script src="node_modules/jquery/dist/jquery.min.js"></script> 
<script src="node_modules/angular/angular.min.js"></script> 
<script src="node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"> </script> 
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script> 

<script src="front/app.js"></script> 
<script src="front/navigation/navigation-controller.js"></script> 
<script src="front/landing/landing-controller.js"></script> 
<script src="front/search/search-controller.js"></script> 
<script src="front/profile/profile-controller.js"></script> 
<script src="front/admin/admin-controller.js"></script> 
</body> 
</html> 

Und hier ist mein Admin-Controller:

(function() { 
angular.module('FriendZone').controller('AdminController', ['$scope', '$state', '$http', 'ui.bootstrap', 
    function ($scope, $state, $http, $view) { 
     $scope.getUsers = function() { 

     }; 

     $scope.getUsers(); 
    }]); 

ich Angular noch recht neu bin so es könnte etwas wirklich einfaches sein. Vielen Dank im Voraus!

Edit: Routing code (app.js):

angular.module('FriendZone', ['ui.router', 'ui.bootstrap']) 
    .config(function($stateProvider, $urlRouterProvider){ 
     $urlRouterProvider.otherwise('/landing'); 
     console.log("hello"); 
     $stateProvider.state('landing', { 
      url: '/landing', 
      templateUrl: 'front/landing/landing.html', 
      controller: 'LandingController' 
     }).state('search', { 
      url: '/search', 
      templateUrl: 'front/search/search.html', 
      controller: 'SearchController' 
     }).state('profile', { 
      url: '/profile', 
      templateUrl: 'front/profile/profile.html', 
      controller: 'ProfileController' 
     }).state('admin', { 
      url: '/admin', 
      templateUrl: 'front/admin/admin.html', 
      controller: 'AdminController' 
     }); 
    }); 
+0

Verwenden Sie nicht-'min.js' Version bei der Entwicklung, die Ihnen mehr Anhaltspunkte gibt, wenn etwas schief gelaufen ist. – zcui93

Antwort

1

Inject ui.bootstrap Modulabhängigkeits in Ihrem Modul Initialisierung nicht in die Steuerung. Prüfen Sie, ob die Abhängigkeit auch im Controller vorhanden ist.

 angular.module('FriendZone',['ui.bootstrap']).controller('AdminController', ['$scope', '$state', '$http', 
     function ($scope, $state, $http) { 
     $scope.getUsers = function() { 

     }; 

     $scope.getUsers(); 
}]); 
+0

Hallo, also habe ich deinen Code eingesteckt aber jetzt wird nichts gerendert aber es kommen keine Fehler auf. Weißt du, was falsch sein könnte? Danke für Ihre Hilfe! –

+0

Was ist Routing-Code? –

+0

Ich habe Routing-Code in den Post hinzugefügt, es ist in der Datei app.js in meinem Setup. –

0

Sie müssen die Abhängigkeit auf der Modulebene einschließen, die normalerweise in der app.js-Datei definiert ist. Der Controller verwendet in Abhängigkeiten definierte Codes, die beim Initialisieren des Moduls in der Moduldefinition eingefügt werden. Dann rufen Sie in einer separaten Datei, die Sie verknüpft haben, die Moduldefinition auf, die alle bereits definierten Abhängigkeiten abruft.