Почему мой сервис не регистрируется?

Question

Я попытался создать службу в angularjs, но я продолжаю получать angular.js: 10467 Ошибка: [ng: areq] Аргумент «MainController» не является функцией, полученной неопределенностью.

HTML:

<div ng-controller="MainController"> 

<form name="searchUser" method="post"> 
    <input ng-model="username" type="search" placeholder="Find"/> 
    <input type="submit" value="Search" ng-click="search(username)" /> 
</form> 
You are searching for: {{username}} 


<hr /> 
    <div ng-repeat="(key,value) in data"> 

     {{ key + " : " + value}} 
    </div> 



</div> 

<script src="lib/angular/angular.js"></script> 
<script src="js/app.js"></script> 
<script src="services/Screamer.js"></script> 

мои app.js:

angular.module('NoteTaker', []); // dependcies in array. 


angular.module('NoteTaker', []).controller('MainController', function(screamer, $log, $http, $scope, $interval){ 
    $http({ 
     method : 'GET', 
     url: 'https://api.github.com/users/' + $scope.username 
    }).then(function(response){ 
     console.log(response); 
     $scope.data = response.data; 
    }, function(response){ 
     console.log(response); 
    }); 

моя служба в service.js

(function() { 
    'use strict'; 
    angular.module('NoteTaker', []).factory('screamer', function(){ 
     return { 
       say: "blahbalh" 
     }; 
    }); 
}()); 

Answer 1

angular.module(name, dependencies) создает новый модуль. Если вы хотите добавить к существующему, используйте angular.module(name):

angular.module('NoteTaker', []); // dependcies in array. 
 

 
angular.module('NoteTaker') 
 
    .controller('MainController', function(screamer, $log, $http, $scope, $interval) { 
 
    $http({ 
 
     method: 'GET', 
 
     url: 'https://api.github.com/users/' + $scope.username 
 
    }).then(function(response) { 
 
     console.log(response); 
 
     $scope.data = response.data; 
 
    }, function(response) { 
 
     console.log(response); 
 
    }); 
 
    }); 
 

 
// service.js 
 
(function() { 
 
    'use strict'; 
 
    angular.module('NoteTaker').factory('screamer', function() { 
 
    return { 
 
     say: "blahbalh" 
 
    }; 
 
    }); 
 
}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="NoteTaker" ng-controller="MainController"> 
 

 
    <form name="searchUser" method="post"> 
 
    <input ng-model="username" type="search" placeholder="Find" /> 
 
    <input type="submit" value="Search" ng-click="search(username)" /> 
 
    </form> 
 
    You are searching for: {{username}} 
 

 

 
    <hr /> 
 
    <div ng-repeat="(key,value) in data"> 
 

 
    {{ key + " : " + value}} 
 
    </div> 
 

 

 

 
</div>

создать новый модуль на линии 1 и добавьте услугу контроллер & к нему.

Answer 2

tcooc ответил на ваш вопрос, но я постараюсь сделать это немного легче понять:

app.module('myModule', ['dep1', 'dep2']); // passing an array creates a NEW module 

доступа вновь созданный модуль путем вызова тот же метод, но без массива зависимостей:

app.module('myModule') 
    .controller('MyController') 
    .service('MyService') 
    .factory('MyFactory'); 

Или просто приложить все к первому модулю:

app.module('myModule', ['dep1', 'dep2']) 
    .controller('MyController', function(...) {}) 
    .service('MyService', function(...) {}) 
    .factory('MyFactory', function(...) {}); 

Кроме того, она помогает писать зависимости инъекции, как это:

MyController.$inject = ['$scope', '$location', '$log']; 
function MyController($scope, $location, $log) { 
} 

MyService.$inject = ['$http']; 
function MyService($http) { 
} 

Это дает понять, что становится впрыскивается где. И это делает ваш код более читаемым, так как теперь вы можете написать это:

app.module('myModule', ['dep1', 'dep2']) 
    .controller('MyController', MyController) 
    .service('MyService', MyService);