简体   繁体   中英

angular.js:15697 Error: [$injector:unpr] Unknown provider

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM