Question

我似乎无法想象如何将多个服务注入控制器。我在这里列出了我的文件：

index.html文件：

<script src="'./angular/angular.min.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-sanitize.js"></script>
<script src="'./angular-route/angular-route.js'></script>
<script src='./app/app.js'></script>
<script src='./app/welcome/welcome.js'></script>
<script src='./app/controls/questions.js'></script>
<script src='./app/services/questionsdata.js'></script>
<script src='./app/services/getsong.js'></script>

console.log错误：

Error: [$injector:unpr] http://errors.angularjs.org/1.5.0/$injector/unpr?p0=getsongProvider%20%3C-%20getsong%20%3C-%20QuestionsCtrl
    at Error (native)
    at http://localhost:8000/static/angular/angular.min.js:6:416
    at http://localhost:8000/static/angular/angular.min.js:43:7
    at Object.d [as get] (http://localhost:8000/static/angular/angular.min.js:40:270)
    at http://localhost:8000/static/angular/angular.min.js:43:69
    at d (http://localhost:8000/static/angular/angular.min.js:40:270)
    at e (http://localhost:8000/static/angular/angular.min.js:41:1)
    at Object.instantiate (http://localhost:8000/static/angular/angular.min.js:41:364)
    at http://localhost:8000/static/angular/angular.min.js:87:42
    at link (http://localhost:8000/static/angular-route/angular-route.js:977:26) <section class="container-fluid ng-scope" id="main" ng-view="">

我的app.js文件：

(function(){

    'use strict';

    angular.module('myApp', ['ngRoute', 'myApp.welcome', 'myApp.questions' ])

    .config(function ($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                redirectTo: '/welcome'
            })
            .when('/welcome', {
                templateUrl: 'static/app/welcome/welcome.html',
                controller: 'WelcomeCtrl'
            })
            .when('/questions', {
                //templateUrl: 'static/app/questions/questions.html',
                templateUrl: 'static/app/views/questions.html',
                //controllerAs: 'question',
                controller: 'QuestionsCtrl'
            })
            .otherwise('/')
    });

})();

我的控制器文件：

(function () {

    'use strict';

    angular
        .module('myApp.questions', ['ngRoute', 'ngSanitize'])
        .controller('QuestionsCtrl', QuestionCtrl);

    function QuestionCtrl(questionsdata,getsong) {

        var vm = this;

        var data = {
            params: "1,1"
        }; 
....

我的questionsdata（第一个服务）文件：

(function () {

    'use strict';

    angular
        .module('myApp.questions')
        .factory('questionsdata', questionsdata);

    function questionsdata() {

        var service = {
            getQuestions: getQuestions
        };


        return service;
.....

我的get song（第二服务）文件

(function () {
    'use strict';

    angular
        .module('myApp.questions')
        .factory('getsong',getsong);

    function getsong($http, $window, $interval) {

        var service = {
            getId: getId,
            getMySong: getMySong
        };

        return service;
....

那是在工作。

当我将控制器文件更改为仅使用questionsdata服务时，如下所示：

'use strict';

    angular
        .module('myApp.questions', ['ngRoute', 'ngSanitize'])
        .controller('QuestionsCtrl', QuestionCtrl);

    function QuestionCtrl(questionsdata) {

运作良好。但是，当尝试仅使用get song服务时，如下所示：

 'use strict';

    angular
        .module('myApp.questions', ['ngRoute', 'ngSanitize'])
        .controller('QuestionsCtrl', QuestionCtrl);

    function QuestionCtrl(getsong) {

它也起作用了。很奇怪，对吗？我错过了什么？

Answer 1

尝试使用inject方法：

 'use strict';

    angular
        .module('myApp.questions', ['ngRoute', 'ngSanitize'])
        .controller('QuestionsCtrl', QuestionCtrl);

    QuestionCtrl.$inject = ['getsong', 'questiondata'];

    function QuestionCtrl(getsong, questiondata){

Answer 2

在 index.html ：

中尝试此操作

<script src="'./angular/angular.min.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-sanitize.js"></script>
<script src="'./angular-route/angular-route.js'></script>

<script src='./app/controls/questions.js'></script>
<script src='./app/welcome/welcome.js'></script>
<script src='./app/app.js'></script>    
<script src='./app/services/getsong.js'></script>
<script src='./app/services/questionsdata.js'></script>

由于myApp取决于myApp.welcome和myApp.questions，因此您必须先将它们放在首位。

Angular.js控制器，它使用多个服务

2 个答案: