angular.js: Error: [$injector:unpr] Unknown provider
Question
I keep getting this error and I cannot figure it why:
angular.js:13708 Error: [$injector:unpr] Unknown provider: fstackProvider <- fstack <- MainController
Here is a config.js file:
angular.module("app")
.constant("fstack", "xxxxxxxxxxxxxx");
Here is my app.js file:
(function(){
var app = angular.module('app', ['addCarCtrl', 'galleryCtrl','detailCtrl', 'userCtrl', 'ngRoute', 'angular-filepicker'])
app.controller('MainController', MainController);
function MainController($scope, fstack) {
$scope.fstack = fstack;
}
app.config(function($routeProvider, filepickerProvider){
//The route provider handles the client request to switch route
$routeProvider.when('/addCar', {
templateUrl: 'partials/addCar.html',
controller: 'addCarController'
})
.when('/gallery', {
templateUrl: 'partials/gallery.html',
controller: 'galleryController'
})
.when('/detail/:id', {
templateUrl: 'partials/detail.html',
controller: 'detailController'
})
.when('/login', {
templateUrl: 'partials/login.html',
controller: 'userController'
})
.when('/', {
templateUrl: 'partials/home.html'
})
//Redirect to addCar in all the other cases.
.otherwise({redirectTo:'/'});
filepickerProvider.setKey('{{fstack}}');
});
})();
Here is some of my HTML file:
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">AMC MEAN app</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li role="presentation"><a href="/#/addCar">Add Car</a></li>
<li role="presentation"><a href="/#/gallery">Gallery</a></li>
</ul>
</div>
</div>
</nav>
<!-- Here is where the partials will be displayed -->
<div ng-view ng-controller="MainController"></div>
When I add the ng-controller="MainController" I get this error. I am trying to get access the $scope.fstack so I thought I should add the MainController in. It is obvious I do not know what I am doing but if anyone has any thoughts that could help me out that would be awesome. I need to get the value contained in the $scope.fstack to this set key.
filepickerProvider.setKey('{{fstack}}');
2 answers
solution1
1 2016-07-16 01:59:55
I think you have to declare everything that you're injecting into the controller.
Try app.controller('MainController', ['$scope', 'fstack', MainController]);
solution2
0 2016-07-16 03:20:57
Define constant before controller.
angular.module("app")
.constant("fstack", "xxxxxxxxxxxxxx");
app.controller('MainController', MainController);
function MainController($scope, fstack) {
$scope.fstack = fstack;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.