Контроллер 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

Попробуйте использовать метод 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, поэтому вы должны поместить их в первую очередь.