I am trying to use requireJs and AngularJs together. when I want to inject some factories I get the following error:
angular.js:15697 Error: [$injector:unpr] Unknown provider: StudentQueriesProvider <- StudentQueries <- schoolCtrl
search.js
define([
'angular',
],function (angular) {
angular.module('app',[])
.controller('schoolCtrl',['$scope','StudentQueries'
,function ($scope,studentQueries) {
$scope.students=studentQueries.queryStudentByName('name');
}]);
});
studentQueries.js
'use strict'
define([
'angular'
], function (angular) {
debugger;
(function (angular) {
angular.module('studentQueries', ['graphQl'])
.factory('studentQueries', ['graphQl'], function (graphQl) {
let queryStudentByName = function (firstName) {
//some logics
};
return {
queryStudentByName: queryStudentByName
};
}
);
})(angular)
}
)
graph.js
'use strict';
define([
'angular'
], function (angular) {
(function (angular) {
var service = angular.module('graphQl', []);
service.factory('graphQl', ['$http', function ($http) {
const sendQuery=(query,variables)=>{
//some logics
};
return {
sendQuery:sendQuery
};
}])
})(angular)
})
and finally my require-config.js
require.config({
paths: {
angular: 'bower_components/angular/angular',
jquery:'bower_components/jquery/dist/jquery'
},
shim: {
"angular": {
deps: [
'jquery'
],
exports: "angular"
}
}
});
require([
'angular',
'scripts/controllers/student/search',
'scripts/services/students/studentQueries',
'scripts/services/graph'
],function () {
angular.bootstrap(document, ['app']);
}
);
You are trying to inject 'StudentQueries' while defining the factory as 'studentQueries', as Raimond comment out seems those injectors and definitions are all case sensitive.
Edited search.js
define([
'angular',
],function (angular) {
angular.module('app',[])
.controller('schoolCtrl',['$scope','studentQueries'//changed casing here
,function ($scope,studentQueries) {
$scope.students=studentQueries.queryStudentByName('name');
}]);
});
I needed to add app.js and inject it into my search.js file.
define([
'angular',
//backend services
'scripts/services/students/studentQueries',
'scripts/services/graph',
],function(angular){
console.log('app.js');
return angular.module('app',[
'studentQueries',
'graphQl'
]);
}
)
and finally I needed to add app.js into search.jsto:
'use strict'
define([
'angular',
'scripts/app'
],function (angular) {
angular.module('app')
.controller('schoolCtrl',['$scope','studentQueries'
//and the rest of logics
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.