Why won't my service register? - angularjs

Question

I tried creating a service in angularjs but I keep getting angular.js:10467 Error: [ng:areq] Argument 'MainController' is not a function, got undefined.
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>
my 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);
});
my service in service.js
(function() {
'use strict';
angular.module('NoteTaker', []).factory('screamer', function(){
return {
say: "blahbalh"
};
});
}());

Answer 1

angular.module(name, dependencies) creates a new module. If you want to add to an existing one, use 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>
I create a new module on line 1, and add the controller & service to it.

Answer 2

tcooc answered your question, but I'll try to make it a little easier to understand:
app.module('myModule', ['dep1', 'dep2']); // passing an array creates a NEW module
Access the newly created module by calling the same method, but without the array of dependencies:
app.module('myModule')
.controller('MyController')
.service('MyService')
.factory('MyFactory');
Or, just attach everything to the first module call:
app.module('myModule', ['dep1', 'dep2'])
.controller('MyController', function(...) {})
.service('MyService', function(...) {})
.factory('MyFactory', function(...) {});
Also, it helps to write dependency injection like this:
MyController.$inject = ['$scope', '$location', '$log'];
function MyController($scope, $location, $log) {
}
MyService.$inject = ['$http'];
function MyService($http) {
}
This makes it clear what is getting injected where. And it makes your code much more readable, since you can now write this:
app.module('myModule', ['dep1', 'dep2'])
.controller('MyController', MyController)
.service('MyService', MyService);