Angular.js controller that uses multiple services

Question

I can't seem to figure how to inject multiple services into a controller. I have listed my files here:

index.html file:

<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:

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="">

My app.js file:

(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('/')
    });

})();

My controller file:

(function () {

    'use strict';

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

    function QuestionCtrl(questionsdata,getsong) {

        var vm = this;

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

My questionsdata (first service) file:

(function () {

    'use strict';

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

    function questionsdata() {

        var service = {
            getQuestions: getQuestions
        };


        return service;
.....

My get song (second service) file

(function () {
    'use strict';

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

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

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

        return service;
....

That's ain't working.

When I change my controller file to use only the questionsdata service as follows:

'use strict';

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

    function QuestionCtrl(questionsdata) {

It's working well. But when trying to use only the get song service as follows:

 'use strict';

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

    function QuestionCtrl(getsong) {

It ain't working as well. Weird, right? What am I missing?

Answer 1

Try this in 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>

Because myApp depends on myApp.welcome and myApp.questions, so you have to put them first.

Answer 2

Try using the inject method:

 'use strict';

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

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

    function QuestionCtrl(getsong, questiondata){