使用多個服務的Angular.js控制器

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

嘗試使用注射方法：

'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，所以你必須把它們放在第一。